Stop Closing Void Elements

Published on Jan 3, 2024 (updated May 9, 2024), filed under development, html (feed). (Share this on Mastodon or Bluesky?)

Some developers believe in closing all HTML elements. Some have to close all HTML elements. Others don’t believe in doing so, or aren’t forced either way. Personally, I’m neither a believer in closing elements that don’t need closing (I prefer and recommend writing valid HTML, the HTML way), nor do I like to be a tool of my tooling.

In Upgrade Your HTML IV, I wrote a little about closing void elements. Let me share it here—with none of it meaning you need to like or do the same:

<meta name="viewport" content="width=device-width"/>
<meta charSet="utf-8"/>

Yes, that uppercase “S” in charSet is valid and weird.

What else do you notice? The viewport expression?

Yes, there are different views on this. (My own favorite? <meta name=viewport content="initial-scale=1,minimum-scale=1,width=device-width">.)

The encoding declaration?

Yes, that’s a good observation, too. Unless you deliver your HTML documents without a server—like on a USB stick—, you may skip it in favor of an HTTP header. (Accordingly, in other parts of this series, I omit declarations like this.)

In other words, although you can provide encoding information with each request, the W3C Internationalization Activity still recommends providing this information within the markup. I won’t argue about it now.

What about the trailing slashes (/)?

These are the point of this chapter.

Are they needed? What purpose do they serve?

They are a remnant of XML-inspired XHTML times, and their only use case nowadays relates to foreign elements (SVG and MathML). The most concise explanation can be found in section 13.2.2 of the HTML specification:

The trailing U+002F (/) in a start tag name can be used only in foreign content to specify self-closing tags. (Self-closing tags don’t exist in HTML.) It is also allowed for void elements, but doesn’t have any effect in this case.

That is, the trailing slash marks a tag as self-closing—but self-closing tags don’t exist in HTML, and their presence has no effect.

Let’s clean up (this time you live, @charset):

<meta name=viewport content=width=device-width>
<meta charset=utf-8>

That’s my view, on closing void elements. If you like this, check out the book; if you love this, check out the series (Amazon, Apple Books, Kobo, Google Play Books, Leanpub)!

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)