On HTML5 article element
In the pub after presenting on HTML5 at London Geek Night last week, a bloke (Andy?) gave the best description I’ve heard yet of HTML <article>.
Don’t think of article as a newpaper article. Think of it like article of clothing: any discrete item.
It’s not just about newspapers or blogs. So, on amazon, a single product on a product listing page would be an <article>. An individual email in a web-based email app would be an <article> Individual tweets on a twitter client would be <article>.
Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)
7 Responses to “ On HTML5 article element ”
The problem I have with this sort of thing is how deep to go and the context to apply to the item. After all, a “discreet item” can be of any size, and almost any item can be broken down further into other discreet items. To take your example – an individual product on a product listing may be an <article>. Should the product description inside that also be an article, as that too is a discreet item?
Or is it better to think that an article as essentially a list item, and should only be used if there is more than one discreet item of a similar type within the sibling scope? Would, for example, it make sense for that same product item to be an <article> if it was on it’s own product page rather than in a list of other items? Or is there a semantic pre-requisite of like sibling items?
Well then you should use a div….AAAAARRRRGGGGHH!!!
<article> is meant for bits that might be used in a different context, such as imported into other sites. It would make no sense to mark up an item’s description as an article, but it would make sense to mark up the entire item as an article.
If you were using lists of items, you can still do so; but instead of <li>ITEM</li> you’ll use <li><article>ITEM</article></li>
If you honestly think it would be useful to use some piece of a discreet item as it’s own discreet item, then nesting your articles makes sense.
(Article can contain other articles, right? Does HTML5 have the equivalent of a DTD I can check to see what’s allowed in each element?)
I think semantics based around external use cases are a red-herring. Semantics should be self-contained and need no external framework for definition. Mainly because you can’t know the intent of the external resource, and semantics change based on context.
You’ve no idea whether what you’re wrapping in an article is whatthe external resource considered a discreet itsnot not.
Illend this comment here as I’m on my iPhone and theeebpage is broken. I can’t see what I’m typing.
An excellent heuristic. Though I think once again this illustrates my favourite HTML5 hobby horse – how element based semantics alone are not enough?
Why?
Take a look at the list of articles example above. We need two elements, where really, we only should need one.
In this instance, the list items play the role of (or have the quality of being) discrete, independent pieces of the document.
With element based semantics, we can only give one quality to a thing – and so we need multiple elements to give multiple qualities.
Think of it this way, an article element is really a section element with the quality of being a discrete, self sustaining unit of the document. But why shouldn’t other elements have the ability to have this quality too?
BTW, it’s not just with article section and so on that we get this problem – nav is another -pretty much all well marked up navigation on the web these days is a list. But now, we need to wrap these lists in an extraneous nav element to describe the list the nav element contains.
Ironically, XHTML 1 has a mechanism for this, extended by WCAG-ARIA, and actually widely supported in browsers (and more backwards compatible (to IE7 with no hacks), where new HTML5 elements need a hack to be styled even in IE7)
It’s the role attribute.
http://www.w3.org/TR/2006/WD-aria-role-20060926/
It works almost exactly like class and id (so developers are very familiar with it), its already a published standard, it’s well supported in browsers, and is far more extensive in terms of semantics than the handful of new HTML5 elements
In reality, the section, nav, article etc will remain in HTML5 – but I suggest doing an end run around these complications, and making your markup richer and more accessible in the long run with role in addition to HTML5
john
Why I think the “article of clothing” line works is that it is in two parts. “Article” itemises it but does not ascribe a function to it.
“List” does, “nav” does, “role” does.
Wouldn’t “article” be implied in all of them, though?
Basically, STOP using LI all the time for items? And instead use ARTICLE when more appropriate. This makes sense to me.