Are (non-void) Self-Closing Tags Valid in HTML5?

You can develop your own website easily using HTML5, which is the latest version of Hypertext Markup Language. But you can face confusion, like self-closing tags can be used with non-void elements. In this blog, we will discuss self-closing tags and rules for using them in HTML5.

Table of Contents:

• Understanding Self-Closing Tags
• Void vs Non-Void Elements
  • Void Elements
  • Non-Void Elements – Problem with Self-Closing Non-Void Elements
• What Happens When You Use Self-Closing Non-Void Elements?
  • Ignored Self-Closing Slash
  • Content May Not Appear as Expected:
  • CSS and JavaScript Issues:
• XHTML vs. HTML5: The Confusion
• Best Practices for Writing HTML5
  • Do Not Use Self-Closing Tags for Non-Void Elements:
  • Use the Correct Syntax for Void Elements:
• Conclusion

Understanding Self-Closing Tags

The separate closing tags are not needed for the self-closing tags because they don’t hold any content inside them. You can write them a single tag with a slash before >. 

Example: 

<img /> or <br />

Void vs Non-Void Elements

Void Elements

These elements are said to be the self-contained elements, and they do not have a closing tag. They usually do not hold any content because they are self-closing in nature. In HTML5, you don’t have to include the self-closing slash (/>). 

Example:

<area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <source>, <track> and <wbr>.

Top Web Development Courses to Kickstart Your Coding Journey

Professional Web Development Courses

Explore Program

Non-Void Elements – Problem with Self-Closing Non-Void Elements

These elements hold the content and require both an opening tag and a closing tag.

Example:

<div>, <p>, <span>, <script>, <section>, <article>, <header>, <footer>, <nav> and <aside>

You cannot use the self-closing syntax on non-void elements because it is not valid in HTML5.

Example:

<div />
<p />
<span />

They may be technically wrong in the standard HTML5, but some browsers try to process it. Sometimes, they will be considered as the opening tags without a proper closing tag, which can lead to a messed-up layout and can cause problems with JavaScript. 

What Happens When You Use Self-Closing Non-Void Elements?

The HTML may handle it differently when you use the non-void elements with a self-closing tag, depending upon where it is used. This may lead to unexpected behavior, so it is better to use proper opening and closing tags. 

Ignored Self-Closing Slash

In HTML5, the self-closing slash (/>) on non-void elements is ignored, and the element is treated as an opening tag.

Example:

<div />
<p />
<span />

This will be interpreted as:

<div>
<p>
<span>

Content May Not Appear as Expected:

You cannot use a self-closing tag for a non-void element for adding content to it because the browser may interpret it differently. You should use proper opening and closing tags to avoid this. 

CSS and JavaScript Issues:

You should have a proper structure of the document, which contains style and script in proper hierarchy for the working of the code. This may give you a page with good looks, so always prefer the proper HTML structure. 

XHTML vs. HTML5: The Confusion

If you’ve worked with XHTML before, you might be used to its strict rule that every tag must be properly closed. In XHTML, even self-closing tags always need the /> at the end to follow the rules:

Example:

<img src="image.jpg" />
<br />
<input type="text" />

HTML5 is more relaxed and doesn’t require you to add the self-closing slash. Unlike HTML5, XHTML followed strict rules and allowed non-void elements to be self-closed, but that’s not valid in standard HTML5.

Best Practices for Writing HTML5

You can follow the below practices to make sure the HTML code is valid, readable, and functional for all browsers and devices. 

Do Not Use Self-Closing Tags for Non-Void Elements:

Always provide both an opening and closing tag for non-void elements.

<div></div>
<p></p>
<span></span>

Use the Correct Syntax for Void Elements:

For void elements, you can omit the self-closing slash (/>) if you prefer cleaner syntax:

<img src="image.jpg">
<br>
<input type="text">

Conclusion

In HTML5, self-closing tags are fine for void elements, but don’t use them for non-void elements. Unlike XHTML, where every tag had to be self-closed, HTML5 only requires it for void elements. Using self-closing tags on non-void elements can cause display issues.

For clean and reliable code, always close non-void elements properly. If you’re switching from XHTML or another language, keep in mind HTML5’s easier but specific rules to avoid problems in your web apps.

Are (non-void) self-closing tags valid in HTML5? – FAQs