Stop Closing Void Elements

Published on January 3, 2024 (↻ February 5, 2024), filed under (RSS feed).

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.

The cover of “Upgrade Your HTML IV.”

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)!

Toot about this?

About Me

Jens Oliver Meiert, on September 30, 2021.

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

If you have a question or suggestion about what I write, please leave a comment (if available) or a message. Thank you!