Paired and Single Tags

In HTML, there are both paired tags and single tags (also known as self-closing tags or void elements). Each type serves a specific purpose and has its own function.

Paired Tags

Paired tags consist of opening and closing tags. They can wrap around the content and group items to change some properties or collect elements by meaning.

Syntax:

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 consist of only an opening tag and no closing tag. They are used when the tag does not require content or when all content and behavior are specified using attributes.

Syntax:

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

When nesting tags, following the hierarchy order is essential, similar to nesting dolls. Each nested tag should be enclosed appropriately within its parent tag while still following the rules of HTML syntax.

Here's an example of nested tags:

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.

Sum up

HTML consists of paired and single tags, each serving different purposes. Paired tags have an opening and closing tag to enclose content, while single tags are self-closing. Properly nesting tags and following the correct hierarchy are essential for a well-formed HTML structure.