Basics of HTML Tags and Their Usage

HTML (HyperText Markup Language) is the foundation of web development. It uses tags to structure and display content on the web. In this post, we'll explore the most common HTML tags, their purpose, and how to use them effectively.

What Are HTML Tags?

HTML tags are elements enclosed in angle brackets, like <tag> and </tag>. Tags usually come in pairs: an opening tag and a closing tag. For example:

<p>This is a paragraph.</p>

Some tags, like <img>, are self-closing and don’t need a closing tag.

Commonly Used HTML Tags

Here’s a list of essential HTML tags and their usage:

<html>: Defines the root of an HTML document.
Example:
```
<html> ... </html>
```
<head>: Contains metadata about the document (not visible to users).
Example:
```
<head> ... </head>
```
<title>: Sets the title of the webpage (shown in the browser tab).
Example:
```
<title>My Webpage</title>
```
<body>: Defines the content visible on the webpage.
Example:
```
<body> ... </body>
```
<p>: Represents a paragraph of text.
Example:
```
<p>This is a paragraph.</p>
```

<a>: Creates hyperlinks.
Example:

<a href="https://example.com">Visit Example</a>

<img>: Embeds an image.
Example:
```
<img src="image.jpg" alt="Description">
```
<h1> to <h6>: Headings, with <h1> being the largest and <h6> the smallest.
Example:
```
<h1>This is a Heading</h1>
```

Nesting HTML Tags

HTML tags can be nested inside one another. Ensure the tags are properly closed in the correct order:

<div>
  <p>This is a paragraph inside a div.</p>
</div>

Understanding HTML Attributes

Attributes provide additional information about an element. For example:

<a href="https://example.com" target="_blank">Visit Example</a>

In the example above:

href: Specifies the link’s URL.
target: Opens the link in a new tab.

Practical Examples

Here are a few practical examples of how to use HTML tags:

<html>
  <head>
    <title>My First Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
    <a href="https://example.com">Visit Example</a>
    <img src="image.jpg" alt="Description">
  </body>
</html>

Conclusion

HTML tags are the building blocks of every webpage. By understanding and using these tags effectively, you can create well-structured, functional, and visually appealing web pages. Practice using these tags to become a proficient web developer!