HTML tags
Tags: html, webdev, development, devops
Published: 2023-08-14 12:28:38

# HTML tags: The building blocks of the web

HTML (Hypertext Markup Language) forms the basis of the World Wide Web. A language used to structure content and define relationships between different elements on a web page. HTML uses a set of predefined tags to accomplish this, each with a specific purpose. In this article, we will explore some important HTML tags and help you start your web development journey.

## 1. "<html>" and "<head>"

Every HTML document starts with the "<html>" tag, which functions as the root element. Inside the <html> tag you will find the <head> tag. The "<head>" tag contains metadata such as the document name and links to external resources.

**Implementation:**
```
<! DOCTYPE html>
<html>
<head>
    <title>My first website</title>
</head>
<body>
    <! - Content goes here ->
</body>
</html>
```

## 2. "<body>"

The <body> tag is where the main content of a web page is located. This is where you will post text, images, videos, and other elements that users will see and interact with.

**Implementation:**
```
<body>
    <h1>Welcome to our site</h1>
    <p> This is an example of a paragraph of text. </p>
    <img src="image.jpg" alt="Landscape from Ova..">
</body>
```

## 3. Tag "<h1>" to "<h6>"

The header tag is used to define headers and headers on a page. The tag "<h1>" represents the top level, "<h6>" represents the bottom level.

**Implementation:**
```
<h1>Main Title</h1>
<h2> header </h2>
<h3> subtitle </h3>
<! - ... ->
```

## 4. `<p>` - Paragraph

The <p> tag is used to create a paragraph of text. An important note to structure your content and improve its readability.

**Implementation:**
```
<p> This is a paragraph of text. It can contain <em>song</em> or <strong>strong</strong> text. </p>
```

## 5. `<a>` - Link

The <a> tag creates hyperlinks that allow users to navigate to web pages or other resources. It is often used to connect different parts of a website.

**Implementation:**
```
<a href="https://www.example.com">Enter example website</a>
```

## 6. `<img>` - Image

The <img> tag is used to display an image on a web page. It requires the "src" attribute to point to the image file and the "alt" attribute to access it.

**Implementation:**
```
<img src="image.jpg" alt="Beautiful Sunset">
```

## 7. "<ul>" and "<li>" is an unordered list

The tags "<ul>" (unordered list) and "<li>" (list elements) are used to create a reading list. Lists are great for presenting information in a structured way.

**Implementation:**
```
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>3rd element </li>
</ul>
```

## 8. "<ol>" and "<li>" - Ordered list

Similar to the unordered list, the "<ol>" (listed list) and "<li>" tags are used to create a numerical list.

**Implementation:**
```
<ol>
    <li>The first step</li>
    <li>Second Step</li>
    <li>Third Step</li>
</ol>
```

## The results

HTML tags are an important part of web development. With these key points, you can create a website that builds content and attracts users effectively. As you continue to learn, you will discover more advanced features and techniques that allow you to create dynamic and interactive websites. Happy coding!