Article vs. Section: We’ve Finally Gone MadAug 12, 2010 In Design By Nishant Kothary
Two weeks ago I decided to use the controversial HTML5 structural tags, <article> & <section>, in the real world. A week ago I found the first white hair on my head
I’m not saying I have conclusive evidence that the <article> tag accelerates melanin depletion. But when coupled with other symptoms I exhibited—increased use of abusive language, heightened temptation to dress my cat up as Santa, and an obsessive need to watch Bachelorette (I do think we should cut Frank some slack, though)— one needn’t stretch their imagination much to find a correlation.
Anyhow, I digress.
I know I’m coming to the <article> vs. <section> party a little late. I know the discussion is, for practical purposes, closed. But that says nothing about the resolution of ambiguity clouding the topic. And despite the numerous articles and sections (sorry, I had to) dedicated to debunking the topic, I didn’t find many real-world examples.
So, here’s one. How would you mark up the middle two “sections” in this wireframe?
A little more context:
- Elsewhere. This is a listing of publications (mine, in this case) you can find “elsewhere”. In other words, the individual items link off to other domains. I’ve been increasingly writing for online publications,so I figure I should catalog the writings.
- Journal. The items in this listing lead to recent blog posts on my own domain,rainypixels.com.
It’s probably worth noting that each of the “items” are comprised of the title of the post, a publish date, an excerpt and a link to read the complete piece, which leads to a permalink on the same domain or another domain.
This is a very common scenario; most blog templates rely on it (heck, you needn’t look farther than the home page of this very site). It’s also the scenario that unearths the insanity of the spec and signals to a world where smart, mind-reading machines exist.
The specific hairy issue in answering the aforementioned question deals with the choice of nesting sections within an article, articles within a section, articles within an article or sections within sections. Also, should a div be invited to the party? Trick question! You blinked. You’re going to hell. Bwahahaha!
OK, pick your brains up off the floor. I’m going to give you an answer that offers, if not a cure to itchiness, then at least some relief:
<section id="elsewhere"> <h1> Elsewhere </h1> <article> Item 1 </article> <article> Item 2 </article> <article> Item 3 </article> <article> Item 4 </article> </section>
When confronted with the choice between section and article (assuming you’ve eliminated all other possible tag choices for your task), this heuristic seems to work:
If you could see the content as an item or entry in an RSS feed, wrap it in an article. Otherwise, use section.
I am Jack’s Raging Bile Duct.
One of my problems with this whole topic is that it’s done little to semantically improve the structure of my document—and for practical purposes, I’m still going to markup articles and sections with semantic id’s and classes to write manageable stylesheets, anyway. It seems that retraining my muscle memory is the only outcome.
The other issue pointed out by my colleague, Joshua Allen, is that if it’s truly about syndication, it should have a permalink similar to an entry or item in an RSS feed. It’s the established way of Web syndication, after all. But he’s clearly smoking crack, because his solution requires that we first plead insanity, then beg for forgiveness for having spent uncountable man hours in almost-Kantian article vs. section debates, apologize to victims of melanin depletion and finally replace the culprit element with, oh, I don’t know, <entry> or <item>! We shall do no such thing, Mr. Allen, so go back to your silly world where things make sense.
My hyperbolic negativity aside (I promise I’ll be done soon. To quote Billy Crystal from Analyze That, “I am grieving. It’s a process.”), we may find solace in the fact that smarter folks like Jeremy Keith have arrived at similar conclusions. Read this, this and if you’re really hungry for pain, this, for background. Or look no further than Mr. Keith’s succinct (slightly resigned, and understandably so) conclusion to the “article” section of his absolutely wonderful book, HTML5 for Web Designers:
What’s more problematic is that article and section are so very similar. All that separates them is the word “self-contained”. Deciding which element to use would be easy if there were some hard and fast rules. Instead, it’s a matter of interpretation. You can have multiple articles within a section, you can have multiple sections within and article, you can nest sections within sections and articles within sections. It’s up to you to decide which element is the most semantically appropriate in any given situation.
I’m done complaining.
Time to look at the silver lining and give in to the opportunistic urges coded into my genetics; after all, I descend from a long line of entrepreneurs. It seems clear to me that the milieu is ripe for our most creative markup proposals, and I shall be making a case for my own pet interest—the <weimaraner> element—defined as follows:
The weimaraner element represents a section of content on a page that may be characterized as “cute”, albeit a little clingy or passive-aggressive.
I further propose that browser vendors implement some sort of standard UI that overlays a picture of a Weimaraner, to defuse readers’ mounting anger. It’s a tried and tested theory that pictures of cute dogs reduce stress levels. Here’s a quick ‘n dirty example that uses this very article (notice its impact on your anxiety):
What do you think? Feel free to add your own spectacular markup accouterments in the comments below.