Stop Closing Void Elements

Published on January 3, 2024 (↻ May 9, 2024), filed under Web Development (RSS feed for all categories).

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, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.

With my current move to Spain, I’m open to a new remote frontend leadership position. Feel free to review and refer my CV or LinkedIn profile.

I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.