Tags

If you want to build a beautiful website, tags are essential elements that help you achieve that.

An HTML tag acts as a container for content or other HTML tags. Tags are words enclosed within < and > angle brackets.

They serve as keywords that instruct the web browser on how to format and display the content.

Commonly Used Tags in HTML

Here are some commonly used tags in HTML. These are some of the tags you will use frequently while building websites.

Document Structure Tags

1. <!DOCTYPE html>: Specifies the document type.
2. <html>: Encloses the entire HTML document.
3. <head>: Contains meta-information and links to scripts and stylesheets.
4. <body>: Contains the content of the web page.

Metadata Tags

1. <title>: Sets the title of the web page.
2. <meta>: Provides metadata such as character set, author, and viewport settings.
3. <link>: Links external resources like stylesheets.

Text Formatting Tags

1. <p>: Paragraph.
2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings.
3. <strong>: Strong emphasis, typically displayed in bold.
4. <em>: Emphasis, typically displayed in italic.
5. <br>: Line break.
6. <hr>: Horizontal rule.

List Tags

1. <ul>: Unordered list.
2. <ol>: Ordered list.
3. <li>: List item.

Hyperlink and Media Tags

1. <a>: Anchor element used to create links.
2. <img>: Displays an image.
3. <audio>: Embeds audio content.
4. <video>: Embeds video content.

Form Tags

1. <form>: Defines an HTML form.
2. <input>: Creates an input field.
3. <textarea>: Creates a multi-line text area.
4. <button>: Creates a button.
5. <select>: Creates a dropdown list.
6. <option>: Defines an option inside a <select> element.

Table Tags

1. <table>: Defines a table.
2. <tr>: Defines a table row.
3. <td>: Defines a table data cell.
4. <th>: Defines a table header cell.
5. <thead>: Defines the table header group.
6. <tbody>: Defines the table body group.
7. <tfoot>: Defines the table footer group.

Semantic Tags

1. <header>: Defines a header section.
2. <footer>: Defines a footer section.
3. <article>: Defines an independent article or piece of content.
4. <section>: Defines a section of content.
5. <nav>: Defines navigation links.
6. <aside>: Defines related or sidebar content.

Paired and Unpaired HTML Tags

Well, that was a really long list. Don't worry, we will study these in detail. In HTML, tags can be broadly categorized into two types:

1. Paired Tags (Container Tags)

These are tags that come in pairs, consisting of an opening tag and a corresponding closing tag. The content goes between these two tags.

Opening Tag

The opening tag starts with < and ends with >. For example:

<p>

Closing Tag

The closing tag also starts with < but includes a forward slash / before the tag name and ends with >.

For example:

</p>

Examples

• Paragraph:

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

• Heading:

  <h1>This is a heading.</h1>

2. Unpaired Tags (Self-Closing or Stand-Alone Tags)

These are tags that don't require a closing tag. They are self-contained and contain all the information they need within a single element.

Self-Closing Tag

A self-closing tag starts with < and ends with />. However, the forward slash is optional in HTML5.

For example:

<img />

Or:

<br>

Examples of Stand-Alone Tags

• Line Break:

  <br />

• Horizontal Rule:

  <hr />

• Image:

  <img src="image.jpg" alt="An example image" />

Pictorial Representation of Tags

The image below offers a visual representation of how tags are structured in HTML. As you can see, an element can contain other elements, which may also contain additional elements, forming a tree-like structure.

This hierarchy can include void elements as well as nested elements, as illustrated in the picture.