I really, really enjoyed this deep dive into practical HTML semantics. Sit back and enjoy!
Wednesday, July 27th, 2022
Tuesday, July 6th, 2021
I’ve been having some really interesting chats with Brian about tabs, markup, progressive enhancement and accessibility. Here’s a braindump of his current thinking which is well worth perusing.
Tuesday, September 3rd, 2019
The way you build web pages—using
IntersectionObserver, for example—can have a direct effect on the climate emergency.
Webpages can be good citizens of battery life.
It’s important to measure the battery impact in Web Inspector and drive those costs down.
Tuesday, June 18th, 2019
A deep dive with good advice on using—and labelling—sectioning content in HTML:
Sunday, June 16th, 2019
IntersectionObserver to lazy load images—very handy for webmention avatars.
Sunday, January 14th, 2018
Monday, February 20th, 2017
Jake is absolutely spot-on here. There’s been a lot of excited talk about adding an
h element to HTML but it all seems to miss the question of why the currently-specced outline algorithm hasn’t been implemented.
This is a common mistake in standards discussion — a mistake I’ve made many times before. You cannot compare the current state of things, beholden to reality, with a utopian implementation of some currently non-existent thing.
If you’re proposing something almost identical to something that failed, you better know why your proposal will succeed where the other didn’t.
Jake rightly points out that the first step isn’t to propose a whole new element; it’s to ask “Why haven’t browsers implemented the outline for sectioned headings?”
Tuesday, September 6th, 2011
Nicole provides a step-by-step explanation of why it will probably benefit you to add classes to your headings to ensure consistent styling without writing overly-verbose CSS.
Tuesday, August 16th, 2011
A brave attempt to explain the new outline algorithm in HTML (although it inaccurately states that no browsers have support for it—Firefox shipped with it a while back).
You can safely skip the comments: most of them are discouraging, ignorant, and frankly, just plain stupid.
Thursday, June 23rd, 2011
A handy little tool for quickly generating ratios (like the golden section) from a number.
Saturday, August 14th, 2010
A great post from the frontline of markup. This is just a taste of the confusion to come.
Thursday, April 15th, 2010
Bruce gives a good explanation of the difference between section and article in HTML5.
Sunday, April 11th, 2010
Article of doubt
A Day Apart in Seattle was more like a seminar than a workshop. Rather than being an intimate gathering in a small room, it was more lecture-like in an amphitheatre setting. But that didn’t stop me interacting with the attendees. There were plenty of great questions throughout, and I also had everyone complete an exercise.
I reprised the exercise I gave at dConstruct back in September. It isn’t a test of the audience. Rather, it’s a test of how well the new structural elements in HTML5 are described:
I then asked the attendees to match up the definitions with the element whose name sounded like the best match. To be clear: this wasn’t a test of knowledge. I was testing the spec.
The results from September’s test were quite revealing. There was some confusion between
details. Since then, the definitions in the spec have been updated and I’m happy to report that the Seattle audience—a much larger sampling—were almost unanimous in correctly matching element names to their definitions.
With one glaring exception.
article elements were, once again, confused. This happened back in September at dConstruct. It happened again at A Day Apart in Seattle. I didn’t get exact numbers, but from the very web-savvy audience of about two hundred people, I would say there was a 50/50 split in matching up the definitions of
article. About 50% of the attendees thought that the definition of
section applied to
article and visa-versa.
section were more distinct. The
article element used to have optional
pubdate attributes. Now their content models are identical (apart from the fact that the
article element can take an optional
time element with a
The only thing that distinguishes the definition of
article from the definition of
section is the presence of the phrase
section groups together thematically-related content. An
article groups together self-contained thematically-related content. That distinction is too fine to warrant a separate element, in my opinion.
The existence of two elements that are practically semantically identical isn’t a harmless addition to HTML5. It’s causing a great deal of confusion. I’ve spoken to authors who incorrectly assumed that articles had to be within sections or that sections could only be within articles. The truth is that you can have sections within articles, articles within sections, sections within sections, articles within articles, or any other combination you can think of.
This isn’t helpful. Authors are confused. Yet, according to the HTML Design Principle of Priority of Constituencies:
In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.
I don’t understand why Hixie is still clinging to the addition of the
article element when he has repeatedly stated that he wants to keep the number of new elements to a minimum. Here’s the perfect opportunity: merge
article into one element. Personally, I would keep
section, with its more generic-sounding name.
We’ve been here before. The
acronym elements were responsible for years of confusion amongst authors unsure of which one to use. The use-cases and the definitions of both elements were just too similar. That particular problem has been solved in HTML5: the
acronym element is now obsolete. The
abbr element works well enough for both use cases.
Let’s not repeat the mistake of