Do HTML Tags Always Come in Pairs?

HTML tags are essential components of elements that make up HTML files and web pages. They are often portrayed as working in pairs. However, do they always come in pairs?

HTML tags don’t always come in pairs. Those in pairs comprise a start and end tag, while optional/singular ones have a start tag but no end tag. Examples of unpaired tags are image, break, meta, division, and media source. Elements of these tags may only be commands without any content.

Read on to understand the difference between paired and unpaired HTML tags. I’ll also discuss their functions within an element and in the HTML files as a whole.

html paired and unpaired tags
The majority of HTML tags come in pairs. But there are some common ones that do not. If you use HTML often, then after a few times you will simply remember which tags require end tags and which do not.

HTML Tags

HTML files comprise elements, one of the several essential components of the file as a whole. These elements mostly begin and end with tags, signified by the less and greater than signs on both ends.

For example, this is an element: 

<p class="paragraph">HTML tags don't always come in pairs.</p>

The <p class=”paragraph”> is called a start tag, while the </p> is the end tag.

On some occasions (like the example above), the start tag has some content—called attributes—within. Attributes are modifiers that provide extra information about the tag’s element. So, “class” is the attribute name, while the “paragraph” is the attribute value.

On a side note, the class attribute lets you assign CSS properties to an HTML element from a separate file. I’ve written an article explaining why separating HTML and CSS is a standard practice in professional web development.

These are more examples of attributes used in HTML files:

  • Title: The title attribute gives advisory details about its element.
  • Id/type: Id attributes provide the HTML element a unique name, making it easier to select.
  • Style: This attribute helps developers define particular CSS styling rules like font, color, or border.

The primary function of HTML tags is to begin or end an HTML element. These elements are essentially what make up HTML files.

HTML tags are not case sensitive; upper-case, lower-case, or even mixed-case alphabets in tags have the same meaning.

Types of HTML Tags

Although there isn’t a standard method of categorizing HTML tags, we’ll classify them into paired and unpaired ones based on this topic.

I’ll discuss both in more detail:

Paired HTML Tags

Implied by its name, paired HTML tags always come in pairs: a start and an end. They are more commonly found in HTML files than unpaired ones.

The start and end tags have similar names, but the latter has a slash symbol (/) to close the function. For example, <html> and </html>, is a start and end, respectively.

Between both tags is the element’s content, which may be text or sub-elements.

Here are more examples of paired HTML tags:

  • <head> and </head> – These are at the beginning and end of HTML documents.
  • <body> and </body> – The body tags appear within the head element containing the web page’s content.
  •  <title> and </title> – These tags contain the web page’s title that doesn’t appear within the page but on the browser’s title bar.
  •  <p> and </p> – The paragraph tags complete the element that commands creating a new paragraph of text.
  • <div> and </div> – These help structure the web page.
  • <center> and </center> – These tags help to centralize text within a web page.
  • <table> and </table> – The table tags define a table insertion in a web page.

Unpaired HTML Tags

Owing to HTML’s continual growth, some tags don’t come in pairs. These are called optional or singular tags. On most occasions, the end tag is omitted, and the start tags contain essential attributes.

For example, the line break <br> tag doesn’t need an end tag to complete its command. It functions like the paired paragraph tag, moving texts to the following line.

Void/empty elements, however, with an unpaired open tag, must end with “/>“ for the following reasons:

Empty Tags Must End To Be XML Compatible

Extensible Markup Language (XML) is another markup language with rules to allow encoded documents to be human-readable and machine-readable.

Having some critical differences from HTML, XML doesn’t allow any element to remain open, even if they are empty. And some web developers create their files for both languages.

Besides, HTML allows optional tags to end with “/>” or not, so there’s no harm in including it.

Ending Tags Help Developers Better Understand the Code

Some web developers, especially newbies, always prefer seeing some sort of slash symbol (/) to indicate an element’s end.

Even for the more experienced developers, adding “/>” to close elements has become a habit. This is because such ending tags were mandatory in older HTML versions. Since newer versions still allow them, they’re not hesitant to incorporate them.

HTML Tags That Are Not in Pairs

As I’ve extensively discussed, some HTML tags exist independently. Here are some more examples of such tags:

  • <hr> – The horizontal rule, or thematic break, is used to divide web page content.
  • <embed> – Web developers use this new HTML5 tag to embed external web content such as video or audio into a web page.
  • <img> – The image tag helps to add images to a web page. They usually contain attributes to describe the image’s dimension, alternate text, etc.
  • <base> – This tag defines a specific base URL that will prefix every other link on the web page. The link must be within the head tags and can only be one per page.
  • <meta> – Meta tags explain a web page’s content, which may be vital for search engines to understand.
  • <link> – The link tag with multiple attribute options defines an outbound link in an HTML document.
  • <source> – This tag further defines multimedia files such as pictures, audio, and videos. They can contain five attributes: src, srcset, type, size, and media.

HTML Comments 

Like all programming languages, HTML also lets developers leave comments in their code. These statements aren’t part of the code that gets executed, but they help clarify how the code is structured. 

To leave comments in your HTML code, you need to surround the text with the <!–  and –> tags. 

Comments are helpful in maintaining a project and having multiple people working on the same projects. However, novice programmers often overdo them. Too many HTML comments can affect your project’s performance. I’ve written an article explaining how that happens. Don’t miss it!

Conclusion

HTML tags that are not in pairs are called optional, singular, or empty tags. Unlike paired tags, they usually only have a start tag but no end tag.

Start tags may contain additional information, known as attributes.

Although unpaired tags don’t need an end tag, they may require “/>” symbols to end them. If not, the document will be XML incompatible. Some web developers prefer including them to aid understanding.
Some examples of unpaired HTML tags include <br>, <hr>, <meta>, <source>, <link>, <base>, <img>, and <embed>.