HTML Tag Basics: Paired and Unpaired Tags Explained

Introduction

A tag is a fundamental element of HTML that specifies how content should be displayed or what type of content it is. Tags are enclosed in angle brackets and usually come in pairs.

Types of tags

1. Pair Tags (Paired Tags)

Pair Tags consist of an opening tag and a closing tag. The content is placed between these tags. This structure is used for elements that have a beginning and an end, and they may contain other HTML elements or text.

Examples of Paired Tags:

  • Paragraph (<p>):
  <p>This is a paragraph of text.</p>
  • Headings (<h1>, <h2>, etc.):
  <h1>Main Heading</h1>
  <h2>Subheading</h2>
  • Div (<div>):
  <div>
    <p>Content inside a div element.</p>
  </div>
  • Anchor (<a>):
  <a href="https://example.com">Visit Example</a>

Characteristics:

  • Must have both an opening and a closing tag.
  • Can contain nested elements and text.

2. Unpaired Tags (Self-Closing Tags)

Unpaired Tags (also known as self-closing tags or void elements) do not have a separate closing tag. These tags are self-contained and used for elements that do not have content between opening and closing tags. In modern HTML (HTML5), the trailing slash is optional.

Examples of Unpaired Tags:

  • Image (<img>):
  <img src="image.jpg" alt="Description of image">
  • Line Break (<br>):
  <p>Line 1<br>Line 2</p>
  • Horizontal Rule (<hr>):
  <hr>
  • Input (<input>):
  <input type="text" name="username" placeholder="Enter your name">

Characteristics:

  • Do not require a closing tag.
  • Often used for elements that are self-contained and do not need additional content between tags.