Struggling with Semantics

Now that HTML5 is starting to crack the mainstream, misunderstood and misrepresented though it may be , it makes sense that more and more developers and contributors should start to struggle with the shifting assignment of semantic meaning to the HTML5 elements. I wrote about this on Halloween in my post HTML5 kills [time], Resurrects [u], where I struggle with the changes elements have gone through from HTML4 to HTML5, and even during the course of the development of HTML5.

It makes sense, then, that given all this flux people might start to grapple with each others’ definitions of semantics in the context of HTML5 elements. This week has seen a lot of activity around that topic, kicked off by the article Our Pointless Pursuit Of Semantic Value by Divya Manian. Regardless of the title, it’s an interesting opinion piece about the process of choosing an element when coding a page. She hits on four main points in the post:

1. The web no longer consists of structured content;
2. Is it really accessible?
3. Is it really searchable?
4. Is it really portable?

The article itself is a good read, but the comments after the article include a lot of well-thought responses, some of which were reformulated and written up as separate responses of their own. Many felt the article itself was too aggressive and made over-generalizations, even to the point that the Smashing Magazine editor-in-chief wrote that the article should have been edited better. I disagree. The tone of the post is what kicked off the maelstrom of debate that has been lacking for some time now on the value of struggling with semantics in HTML5.

Jeremy Keith wrote a response on the same site, Pursuing Semantic Value, where he points out that there truly is a semantic difference between elements:

[…] a div conveys no meaning about the contained content whereas a section element is specifically for enclosing thematically-related content […]

I disagree with his example of how you can see the difference in some browsers, since it is based on an arbitrary style decision made by a browser vendor and inserted into the default browser stylesheets:

You’ll notice that the same element (h1) will have different styling depending on whether it is within a div or within a section element […] So that’s one illustration of the practical difference between div and section.

Regardless, his points clear and a good read for anyone who is struggling with choosing the right element and who might find him/herself giving up too easily and falling into the dark trap of div-itis.

Steve Faulkner weighs in with a comment on the original article that he then converted to a post on his own site, HTML5 semantics and accessibility. He opens up by, as he says, stating the obvious:

Semantics are not just about accessibility, accessibility is not just about assistive technology. But semantic information (name, role, states and properties) carried by HTML elements and attributes is integral to making content on the web accessible, especially for those who rely upon assistive technology to access and interact with web content.

He goes on to cover hgroup, header, hgroup, figure, figcaption, longdesc (the attribute) and even the HTML5 outlining algorithm and reminds us that the browsers have the burden of making these all function as accessible elements, driven by the developer community.

Paul Irish responded to Jeremy Keith’s response in his post Semantics in practice and mapping semantic value to its consumers. He distills the struggle between and with accessibility and semantics pretty well, in my opinion, with this statement:

The practicalities of making accessible web content are messy, but important. The fact that we seem to spend more time on div vs article vs. section than on learning ARIA is a crime. (Furthermore, learning ARIA isn’t complete unless you’re listening to the results in a screenreader.)

John Foliot jumped onto the response bandwagon with his aptly titled post, My Thing About the Thing That Thing Wrote About Thing. His response is much more aggressive on the accessibility side and is far too difficult for me to distill with one takeaway quote. You need to really read through his post to understand everything. He was, however, nice enough to provide a tl;dr version:

Divya is quite confused about web accessibility. I examine everything she says in a detailed, semi-sarcastic, no-holds barred manner. Conclusion: Semantics matter – a lot.

In case you are wondering what that opening image is from, I stole it from CSSquirrel and its post The Value of Meaning. Consider that snippet from the comic to be my selection of a quote from the article.

Recap

Recent changes and chaos in HTML5 are frustrating developers who already struggle with the proper application of these new elements. One article exclaiming this frustration has started a much needed (even if it seems like common sense to many of us) discussion of how we as web developers need to approach choosing the right element for the job. If you are working in HTML5, it behooves you to read these articles and posts, and especially to read through the comments — here are gems of ideas and a treasure trove of links to help educate yourself. Take advantage of them.

Update: November 18, 2011

On some level I think Smashing Magazine has become ground zero for this debate. Bruce Lawson has a new article today on the site, HTML5 Semantics. This article goes into a good deal of depth on semantics and is worth a read.