You are reading a MIX Online Opinion. In which we speak our minds. Nishant Kothary Meet Nishant Arrow

Opinions

26Comment Retweet

Article vs. Section: We’ve Finally Gone Mad

Aug 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?

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.

HTML5 for Web Designers

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

Weimaraner Tag Example

What do you think? Feel free to add your own spectacular markup accouterments in the comments below.

Follow the Conversation

26 comments so far. You should leave one, too.

Andy Andy said on Aug 12, 2010

I had a similar head scratching moment last week when I decided to "learn" Html5.

Much scratching layer I think i came to the conclusion there is no hard and fast rule, and that kinda characterizes Html5, at least the mark up elements of it... I mean we don''t even need to close our img or br tags!

I think I had expected a clearly laid out set of rules, but had actually found, much like Jack Sparrow did, that they''re "more like guidelines really".

fjpoblam fjpoblam said on Aug 12, 2010

I reckon it''s a matter of taste. For my own (and my CSS''s) consistency, I''ve been treating an article as something *I* think can stand alone - the "main" part of a web page, or a blog post, for example. I use an aside for either a sidebar or a pull quote. I use a section for anything that has a header (and, hence, an article or an aside may contain sections...).

This all yields lightweight code for me. I say, whatever works for you. There''s no use stretching your code to meet someone else''s idea of propriety.

Travis Travis said on Aug 13, 2010

Great article, my thoughts exactly. Why go to all the trouble, only to write an ambiguous spec? Ponderous.

Cuong Dang Cuong Dang said on Aug 13, 2010

LOL, I like your intro!!

dave dave said on Aug 13, 2010

Great post, funny yet informative.

I think it''s time for me to learn html5, specially now that more tags are being supported by some browsers.

I''m not sure, but I think that section tag could come in handy for my merchant cash advance website.

BTW, I''ll turn 27 in 2 months. I blame all this coding for my (at least) 5 white hairs.

Nishant Nishant said on Aug 13, 2010

@Andy—Agreed. Jack Sparrow''s wisdom prevails again.

@fjpoblam—Amen. Though, I have trouble with using it for some of the scenarios you mentioned because they contradict the syndication heuristic. Then again, the syndication argument is starting to feel moot. Josh''s insight convinces me that if we truly cared about the semantics of syndication, better choices exist. So, we''re back to Jack Sparrow.

@Travis @Cuong Dang—Thanks.

Jeremy Keith Jeremy Keith said on Aug 14, 2010

This might just be the best thing I''ve read all year.

I feel your pain, Nishant. And I have the horrible feeling that what you''re experiencing is just a foretaste of what lies ahead for later adopters.

Steve Steve said on Aug 14, 2010

Great article!

As an HTML developer who started 15 years ago but now only devs personal projects I think this is a real shame. Specifications always contain some ambiguity, that''s unavoidable, but this is particularly ambiguous and could be really confusing. I fear that a lot of old, bad habits will now be carried over to HTML5 as developers get confused and revert to old practices or try to mix the old with the new.

If it''s confusing for experienced coders how are newbor supposed to understand and adopt it?

Stephanie (Sullivan) Rewis Stephanie (Sullivan) Rewis said on Aug 14, 2010

Yea, exactly. You should have heard me explaining/arguing with the 16 year old last night (who has decided to learn JS & thus HTML5/CSS3). And the semantics made so much sense. Not. =( (That said, I do love Jeremy''s book about the subject of HTML5.)

webecho webecho said on Aug 14, 2010

I would mark mine up the opposite way that you have.
The ''problem'' is we''re both right.

Section = wrapper for main content area
Article
Heading elsewhere
Section item1
Section item2
Section item3
Section item4

I''ve enjoyed reading HTML54WD a few times now, but I haven''t decided where I sit with this ...
HTML5 has made so many things so much simpler , so should we complain about this ambiguity or be happy for the flexibility?

@jeremy have you set ways of using the section and article tags?
In your example on p. 70 would you wrap that code within an "article"?

My logic tells me I''m using it the right way ... but I have nothing to back up my contradiction of Nishants version.

I''m looking forward to seeing what ''cowpaths'' come of this.

Great article Nishant and thanks JK for the tweet pointer to it.

Tab Atkins Tab Atkins said on Aug 14, 2010

Long story short: STOP WORRYING.

I''m serious. The difference is fairly minor, and it doesn''t matter very much. article, aside, and nav are just slightly specialized versions of section. (I''m a participant in the WHATWG/HTMLWG, so I''ve got some experience in this stuff.)

There are several perfectly acceptable rules-of-thumb for whether you want to use article or section. You might want to use article if:
* the section is something "independent" from surrounding content
* the section is something you might want to offer a permalink for
* the section is something you might want to display all by itself sometimes
* the section carries around a publication date of its own, that you want to use <time pubdate> for

Feel free to apply any or all of these. Again, it''s not a big deal. Don''t agonize over it.

Examples!

A single blog comment can be an article. It''s independent, and I''ve seen several blogging platforms that let you link to and view individual comments. (If you make it just a section, though, no biggie.)

A tweet can be an article, because it''s very obviously an independent linkable thing.

Your article can be an article, for the same reasons.

But any of these could be a section, too. No big deal. If you just ignore article and make everything a section, that''s fine. Just use article when you want to add a @pubdate to a section.

Oli Studholme Oli Studholme said on Aug 16, 2010

I''ve always felt the "RSS feed question gives a good yardstick":http://oli.jp/2009/html5-structure1/#choosing. The trouble is that different people will have different perceptions of what is and isn’t significant enough to be in an RSS feed ("a comments feed!?"). However, the nice thing is both choices are correct. Actually <div> would be correct too, but some elements are _more_ semantically correct than others ;-) With semantics it''s generally guidelines over rules anyhow — they wouldn''t be half as much fun to debate otherwise :D

You might find this useful "The amazing HTML5Doctor Easily Confused HTML5 Element Flowchart of Enlightenment":http://html5doctor.com/happy-1st-birthday-us/#flowchart

Finally your code sample as it stands is not correct, as you’re missing the section''s heading (it''s in your diagram).

Nishant Kothary Nishant Kothary said on Aug 16, 2010

@Jeremy—The pandering Weimaraner suckered you in. :)

@Steve—I''m fine with ambiguity as well. Redundancy, not so much.

@Stephanie—Lol. I bet dinner conversations are going to get more and more fun at your home.

@webecho—I didn''t think about that, but that''s certainly a possibility. After all, you''re just wrapping the entire syndicatable area in an article. Good question.

@Tab—Stop worrying? C''mon, dude :) And, your comment seems to confirm one of the main issues with this debate—the tags seem redundant.

@Oli—Thanks for all the great pointers. I eventually came to all the same conclusions as you. The _Argumentum Ad Nauseam_ resolution of this debate is what''s irksome, though. Yes, we now have flowcharts and heuristics in place to determine the right choices, but that is a symptom of the original problem, not the solution. Anyhow, water under the bridge.

I was trying to keep the code sample focused on section/article, but you''re right that it''s probably worth updating to add a heading (btw, the actual markup for my site uses an hgroup).

DJG33KD0UT DJG33KD0UT said on Aug 18, 2010

Hahaha, omg. I''m dieing. Even though your good at what you do, I think you need to quit your ''day job'' and just go on a comedy tour catering exclusively to W3C design nerds.

But until you hit the road, keep writing these articles. ;)

bruce bruce said on Aug 26, 2010

Why do you want to mark up your "elsewhere"s from your "here"s?

If for no other reason than for stylistic reasons (you want two columns on a short page rather than one long page), use two divs.

But you want to distinguish them stylistically because in your mind they''re conceptually different (elsewhere vs here). Conceptually different requires a semantic element.

Each of your articles is independently linkable/ syndicatable - so each individual article is, well, an article element.

So what of each group of articles? While you can have nested articles (a comment on a blog post would be an article nested inside the article that contains the post, for example) that isn''t the case here; you can''t syndicate the *group* as an independent entity.

A glance at the spec (http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element) shows that section is the right man for the job: one of its functions is "a thematic grouping of content, typically with a heading" - as yours has: an h1 of "elsewhere" or an h1 of "journal".

James Duncombe James Duncombe said on Sep 13, 2010

Good article.

I wonder, do they have any difference in the outline algorithm? (http://dev.w3.org/html5/spec/sections.html#outline, https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document). This doesn''t really effect us yet but it will do at some point. You can check your documents at: http://gsnedders.html5.org/outliner/

I bought Introducing HTML5 by Remy Sharp and Bruce Lawson which has explained a lot. I''ve also re-written my site in HTML5. Must admit though, Section and Article are still a little confusing.

Rose Rose said on Nov 2, 2010

Confession: Sometimes I just give up and write crap markup. Or maybe not total crap, but sometimes I''m just like, "Who gives a damn about all the semantics and the tiny details? No one freaking views my source code anyway."

Which I guess is why I am not a very good person.

Also: I liked Tab Atkins''s comment because it kind of makes me feel better about my lazy attitude.

(In other words - yes, you melted my brain a little. Oh! And I like the idea of naming HTML tags after dog breeds. Why is there not more of this?)

Nishant Nishant said on Nov 2, 2010

@Bruce — I appreciate the comment and our reasoning concurs. But as other comments have indicated, you can certainly take paths that lead you to different markup destinations, and most of those are correct as well. The source for this issue, I still maintain, is that they''re overly redundant elements. From what I''ve read on the discussion lists and online, it seems like the majority of folks feel the same way. And the official response to this feedback seems oddly totalitarian.

@James — That''s a good point. I''ll have to check out the outline algorithms; for another day, though, since I''m currently in a peaceful state :-) Agree on Bruce''s book. Everyone should buy a copy.

@Rose — I confess as well. Both, that I''ve written terrible markup, and that my character is highly questionable :-) And, you''re completely right that the audience—normal humans who giggle when you talk passionately about HTML at a party—hardly care about markup semantics. To your point, though, this part of the specification is brain-melting enough for web developers that it warrants a revision; I''ve found that there''s usually a pretty big future cost for such spec issues. I suspect you and I will be able to absorb this cost because we have dogs with soothingly soft ears, but what of the unfortunate dogless people around the world?

nomad-one nomad-one said on Dec 4, 2010

Is there any way that the semantic meaning can be derived from the specific usage, ie. article within section means something different to section within article.

So the context/usage gives the specific meaning, sorry, not a purist or guru on this topic at all but just applying some simple logic.

jimworm jimworm said on Dec 11, 2010

From a programmer/developer''s point of view: rule of thumb - use section when you''d describe it with a class, use article for instances of the class.

Chris Chris said on Jan 20, 2011

From watching Tantek Celik''s "HTML5 Now" and reading Bruce Lawson''s "Introducing HTML5," (plugs?) I''ve come to think of sections as the semantic replacement for divs that we''ve been using to group content into well, sections. So it makes perfect sense to wrap the two columns above in a section and markup the individual items as articles.

I do differ with Bruce Lawson about wrapping user/reader comments in an article with an additional article tag. I would wrap them in a section. After all, they aren''t independent entities. They are a part of the article: opinions from users/readers in the comment section of the article.

Anonymous Coder said on May 13, 2011

I think they would make things a hell of a lot easier and less confusing if they just made the SECTION tag to replace the DIV tag.

Section vs Article HTML 5 | SeekPHP.com said on Sep 25, 2011

[...] Here is an interesting article about one mans madness in trying to differenciate between the two new elements. The basic point of the article, that I also feel is correct, is to try and use what ever element you feel best actually represents what it contains. [...]

Replica Watches On Sale said on Nov 30, 2011

Replica watches on sale has been selling top quality grade 1A replica watches since 2000. Perfectly built swiss watches online store make ideal gifts, especially on Christmas and Birthdays! Our replicas are not cheap or flimsy copies, they are genuine, fully-working watches of the real luxury brands. Expensive cheap watch are prestigious, they make a statement at any occasion and will never compromise your reputation! In fact, most people prefer high quality rolex replica watches to authentic Swiss watches of no-name brands. Why buy an original Tissot, when you can buy Rolex replica watches with authentic Swiss movements for the same price?

Kat Chilton said on Apr 27, 2012

The section vs article debate is only brain melting if the ambiguity is bothersome to you. In the world of web development, a good web author should be able to think both like a designer and a programmer. In the instance of deciding what format of articles and sections work's the best, your inner designer should make the decision. If you don't have one, it doesn't really matter because the specs are intentionally flexible. There are many correct solutions to the same problem. The best answer to this debate is if everyone just switches off the left brain for a moment and lets the right brain savor the poetic license we are granted by the new elements.

Gucci Belts said on May 2, 2012

That is some inspirational stuff. Never knew that thoughts might be this varied. Many thanks for all of the enthusiasm to offer such beneficial data right here.