Let’s talk HTML this week.
The 2024 HTML Survey results are published, so that’s as good a reason as any. I’m a bit too daft to extract anything terribly interesting from the results themselves, but the survey itself acts as a sort of list of things we all might do well to at least be aware of.
Normally, HTML moves very slowly, which is generally a good thing. (“Slow, like brisket”, I’ll always think of.) It’s so foundational, I promise you, you don’t want it as fast-moving as the JavaScript ecosystem is. It can give HTML a bit of a boring feeling.
But there is a good amount of stuff happening fairly recently, certainly in the last year. I wonder if I could convince you HTML is in fact not boring. Let’s do it list-style to keep it fast and juicy.
- You probably know about
<details>and<summary>. They are amazing. Interactive primitives in HTML alone are :chefs kiss:. But they have their rough edges, and HTML is evolving to fix them. Things like: they can begridorflex, a way to style/replace the::marker, and allowing selection off all the non-summary children with::details-content. - We thought we were going to get a “styleable select” with
<selectmenu>, but the progressive enhancement story for that sucked. What we needed as a better “opt-in”, and now they’ve made that a thing via a CSS property/value instead:appearance: base-select;and it works on a regular<select>. There is a bunch more to the story, so it’s worth reading up on, but this is an amazing development. The Off The Main Thread show is a great deep dive talking about the long list of advancements that had to get done to make this happen, which should accelerate more new long-awaited features. (Jake’s argument against self-closing tags is also compelling.) - Maybe you know
<dialog>? It’s good now. Forms can even close on withmethod="dialog"which feels handy. But its buddy thepopoveris here now too (similar but different). And they can work entirely in HTML which is just mmmmmmm the best. David Darnes has a real quick overview which also touches on anchor positioning in CSS which will go together like peanut butter and jelly. - A “toggle” UI element is essentially exactly the same as an
<input type="checkbox">, so now we’ve got theswitchattribute which literally makes them look like a toggle. So many toggles have been implemented poorly in the world, this is a huge boon. - Remember how we had to do
rel="noopener noreferrer"on anchor links whenever you dotarget="_blank"? I didn’t get the memo but apparently we haven’t needed to do that in a few years now. - The last piece of the server-side rendering story for web components has arrived in the form of “Declarative Shadow DOM” so color me pleased about that. Patiently waiting for the web component based frameworks to drop.
- We got a
<search>element which is just easy to remember and applies the rightariaroles to an area.
I don’t know if you are impressed but I am! That’s a decent amount of stuff (I’m sure I missed half of it) that’s all in the hell yeah bucket.
If you enjoy funny nerdy writing about HTML (who doesn’t?) Heydon has been alphabetically blogging HTML elements (start at The Anchor Element). And if you’re looking to really learn HTML, Blake Watson’s new course HTML for People is entirely excellent.