HTML uses two kinds of tags: paired tags and single (self-closing) tags. Each plays a different role when structuring a webpage.

Paired Tags

Paired tags have an opening and closing tag. They wrap content, group elements, and define meaning or structure.

Syntax:

<tag_name>Some content</tag_name>

Here's a real example of using paired tags:

In this example:

• <section>...</section>: groups related content together;
• <h1>...</h1>: adds a heading for the section;
• <p>...</p>: contains a paragraph explaining that most HTML tags come in pairs.

Single Tags

Single tags do not have a closing tag. They are used when no inner content is needed and all behavior is defined through attributes.

Syntax:

<tag_name />

Here's a real example of using single tags:

This code includes two elements:

• <input />: creates a text input field. The placeholder=" name" shows a hint inside the box;
• <img />: displays an image of fruits.
  • alt="Fruits": text shown if the image doesn't load;
  • width and height: set the image's dimensions;
  • src: specifies the image URL.

Tag Nesting

Tags must be nested correctly, like matryoshka dolls, with each closing tag matching its opening tag in the proper order.

Here's an example of nested tags:

<tag1>
  <tag2>
    <tag4>...</tag4>
    <tag5>...</tag5>
  </tag2>
  <tag3>
    <tag6>...</tag6>
  </tag3>
</tag1>

Let's consider the next valid example:

This code displays a paragraph with a link and emphasized text:

• <p>...</p>: wraps the entire paragraph;
• <a href="https://privacy.com">...</a>: creates a clickable link to the Privacy Policy;
• <strong>...</strong>: makes the word "website" bold to emphasize it.