HTML5 Simplequiz #1

by .

A few years ago, Dan Cederholm published a series of articles called Simplequiz in which he posed some options for marking up a specified piece of content and invited readers to choose the one they felt was the best way to mark that up. The value was in the comments in which people said why they made that choice and debated the options (which means it is THE LAW that you read the preceeding comments before adding your own).

With Dan’s blessing, we’re beginning an occasional series of HTML5 Simplequizzes. And here’s the first.

Consider a products page on a website. It might be a page showing widgets, HTML5 books or Remy’s favourite nose hair removers. What’s the best way to mark up the products?

Note: please DON’T USE ANGLE BRACKETS in your comments. Escape them with < and > or just use [foo] – we’ll know what you mean.

A:

<div>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>

</div>
<div> <h2>Philips NT9110 Nose Hair Trimmer by Philips<h2> ... </div>

B:

<article>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...
</article>
<article> <h2>Philips NT9110 Nose Hair Trimmer by Philips<h2> ... </article>

C:

<section>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...
</section>
<section> <h2>Philips NT9110 Nose Hair Trimmer by Philips<h2> ... </section>

D:

<nav>
<div>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...
</div>
<div> <h2>Philips NT9110 Nose Hair Trimmer by Philips<h2> ... </div> ... </nav>

Your answers below, please, with your rationale.

115 Responses on the article “HTML5 Simplequiz #1”

kimblim says

Personally I would go with option 2.

Option 1 is XHTML, and now that we have more semantic tags, I think we should take advantage of that. <section> seems more appropiate as a wrapper around the products, and I would prefer to use <nav> for major navigation only. So… <article> it is :)

James H says

A SECTION is a thematic grouping of content, usually with a heading. Ergo, “C”.

wilfred nas says

I would prefer the sections as in C. But I would wrap them in an article…

David Strauß says

I would go with C.

There is a heading for every section, and you could see it as one record in a database.

Andrew says

If it’s a list of products, wouldn’t <ol> or <ul> be good options?

Ian says

I would also say C as each product is a section of a products page, which might be contained in an article.

Cole Henley says

Dear Bruce ‘three from the bottom, please Carol’ Lawson

I’m going for Option 2 on the basis that each product is a self-contained item so would seem to be the best fit.

Cole xxx

Eric DeLabar says

If I had to pick one I’d probably go with A because the Article and Section semantically seem inappropriate to me. Granted that’s may be me taking the element names literally.

D doesn’t seem as semantically off as B and C, but I don’t really think a catalog is navigation, it’s more like a list of things.

Honestly I’d probably choose E – None of the above and mark it up as an ordered or unordered list (depending on if it is actually in some sort of order…)

Laz says

Well, it kinda depends on the context, I think.

Even D, even though it just looks plain wrong, might make sense, if, weirdly enough, that code was the only way to navigate the site (and there were links in the “…” part of the code.)

Anyway, probabily the best option should be B, since this “articles” could live on their own (as widgets, for example).

Hidde-Jan says

In my opinion, an should be a self contained unit of information, it could be part of a larger collection of such pieces. A thematic grouping of content (a ) would consist of content that is related, but distinct. I don’t think it should be used as a wrapper around loose tags (i.e. , , etc.). So for me, the most reasonable choice would be B:

Hidde-Jan says

Missing spots: an <article> should, (a <section>), (i.e. <h2>, <p>, etc.), B: <article>

Richard Tape says

I guess it’s a bit of a tricky one. Personally, I would probably use an (un)ordered list – because we have more than one product.

Sometimes, people try and use HTML5 elements when they’re probably not needed. I would suggest that this is one those times.

Michael says

I would go with either A or C. If the products we just listed as title, image and link through to a full product page I would go with A. If there is a description I would go with C since the description would make the area an article.

Graeme says

I’d mark them up as an article as it is a self-contained item and each item has a title which is applied to it. Section would possibly be used to wrap products, assuming they were related i.e. all nose hair trimmers together. It’s not navigation and article seems more semantic than divs.

Ian says

B. All the products should be in the same ‘section’ and the difference between them semantically is the same difference between ‘articles’ in a blog, for example.

Not D, because they’re not all navigation items. Not C because they’re not in different sections (they’re all the same ‘type’ of item). Not A, because this is HTML5 doctor! ;)

Gareth Ablett says

Thinking about it you have a list of items in this case its products, at first i thought oh thats just an article, but then thought its a part of the Navigation aswell.

If you are just listing The items with intent to link to each then it should be a nav.

But to also consider where browsers may use this information it would want to consider each to be an article.

The best answer to this question is yep the have a backed reasoning but for now i would go for D.

Ollie says

I’d go with B, because products are syndicatable and tha’ts what is for. Articles’ wrapper could be a though.

Ollie says

Hoops, I wrote [article] and [section] and it got parsed out .:(

DominixZ says

I will go to option C because I think items ,that we will display, is in the same group so “section” and i will use section and wrap it with

Matt SMith says

On this page http://html5doctor.com/the-article-element/ an article is described as representing “a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable”, where as on this page http://html5doctor.com/the-section-element/ a section is described as representing “a generic document or application section”

Therefore I’d use B as each product is an item in it’s own right that can be freely distributed on other pages or websites. However I’d also wrap them in a section element representing the product list and then mark up each individual product with the hProduct microformat so everything knew they were a products.

Daniel says

Hmm, I agree with @kimblim about the and the non-semantic , but my feeling is that would be better suited as a wrapper around the page’s main content with being used around the individual products. Or maybe I should read the spec a bit more before attempting to answer…

Johnathan says

I would probably opt for C, it just seems to make the most sense when you’re reading through them. I would have to echo Ian’s comment though, purely to aide with styling I would have them wrapped within an article.

As regards for unordered lists, I just can’t imagine myself realistically using that format for a product layout – too cumbersome when it comes to styling and throwing in images amongst it all, which you invariably would?

Matt Wilcox says

In order of semantic precedence with most semantic first:

B, C, A

D is completely incorrect.

B first because it’s sectioning elements but also make sense with each article taken out of context (or syndicated)
C second because it has the advantages of correct semantics, just not the most appropriate semantics.
A third because it’s semantically nutral but not incorrect.
D is wrong because the contents of the element should be navigation, and these aren’t navigational in any way.

Asgeir Hoem says

I might be wrong, but doesn’t it make sense to mark this up with a list?

If this is a page displaying Remy’s favourite nose hair removers, the items are semantically related — and are not intended to be separated. Together, they form an independent component of the document.

To me, it makes sense to wrap the whole thing in an article, which contains an unordered list with the content.

Remy's favourite nose hair removers

...
...

And of course, if Remy is very particular, you might want to rank the items with an ordered list.. :-)

Guillaume Denormandie says

I have to agree with Andrew, <ul> seem more appropriate.

If i really had to choose, I’d go with option C because these items are far from being anything like an <article>; and <nav> wasn’t created to wrap just about any link list (I use it for top level navigation and sidebar navigation (categories, blogrolls and stuff)

Daniel says

I’ll try again…

I agree with @kimblim about the <nav> and the non-semantic <div>, but my feeling is that <article> would be better suited as a wrapper around the page’s main content with <section> being used around the individual products. Or maybe I should read the spec a bit more before attempting to answer…

lennym says

I’d go for B, <article>.

I was torn between B and C but I dont’ see what <section> would actually be sectioning so to speak, and in the words of the good doctor himself, “Would the content would make sense on it’s own in a feed reader? If so use “. I reckon each product would be viable content in it’s own right stripped of any surrounding context.

Brent says

B. All wrapped and contained within an article. Semantically makes sense to my brain.

Peace my friend !

Matt Wilcox says

Follow up for those proposing UL:

article is more semantic. As part of the semantics of the tag it’s already implicit that it may be part of a list of items. Using a UL, although correct, isn’t the most appropriate element. It’s a similar problem to the following:

When marking up a passage of text do you use:

1) a paragraph tag OR
2) an OL with each word in an LI

?

Both are semantically correct (because a paragrph is by definition an ordered list of words). But the P is more appropriate. Likewise here. article already implies it’s a stand-alone discreet peice of information, and if it’s in a section (or article) already then the listing is implicit (just like the word-order is implicit in a paragraph).

Listitus is a bitch. Everything is a list.

lennym says

Michael raises a very valid point that it’s difficult to really decide on the most appropriate markup without knowing what’s in the “…”.

Matt Bee says

Same as most, I’d go B, article as they are “articles for sale” and self contained hence according to the spec make sense.

Sections wouldn’t make sense to me, as they are the same type of content and shouldn’t need separating. All articles would go in a section if, say, another category of electrical item was sold on the same page.

A list makes sense, too, but article suits a little better as they can all standalone. IMO!

Only one I definitely wouldn’t go with is navigation.

Jérôme Coupé says

Would go for option B as each product makes sense on its own (self-contained). A “product feed” would make sense. Makes me lean towards using articles instead of sections for marking up this one.

Kevin Sweeney says

My vote goes for C, though B would be acceptable in certain circumstances.

Arguments for C (section)
1.) The content is grouped under a common theme (“Products”). To that end, the section element can be thought of as a collection of related content (see traditional lists argument below).
2.) On a product listing page, it makes sense that the content would, and should, appear within the document outline. For those of you arguing for a traditional ul or ol element, this is where you need to start thinking in more in terms of the HTML5 document outline.

When B (article) could be acceptable:
Like the spec says, syndication. I think that term can be a little bit confusing, so I am not necessarily thinking in terms of RSS, but rather 3rd party widget development. In this case, imagine that the shopping site allowed you to create a wishlist widget that you could embed on your site. Certainly, for individual product pages, article would be the better element to begin with (though the section element could still be used for a “Related Items” widget, which itself would most likely be wrapped within an aside element).

Eric DeLabar says

@Matt Wilcox love the analogy, and guess I need to re-read the pages on Article and Section so I don’t take them so literally.

I change my answer to B.

Ivana Vasilj says

B. Plus I’d wrap each article in a list item inside a list and would use h1 instead of h2

Dave says

Nice question.

The main point is about what else goes inside markup. This can change the context semantics, thus changing the appropriate tag to be used.

And despite there are new semantic tags, div is not dead. One option I think also possible is
section
div->h2->…/div
div->h2->…/div
/section

From presented options, I’d go with C. But as I said, it can vary largely with the content and context to other possible tags.

wearymadness says

I would say B.

The clue is in the question: “a page showing widgets”

This implies the content can live, makes sense, on it’s own, therefore it’s <article>

Andrew

Derek Johnson says

B. article all the way.

They are discrete, self-contained items.

Damir Zekić says

B, definitely. Speaking in OOP terms, every listed article is an instance of a specific type. This is in contrast to sections which are usually heterogenous objects making a larger object (an article for instance).

Furthermore, every item in the store can have reviews which could be encoded as sub-articles (not that you can’t do that with sections, but <article> is more in line with example from spec about blog and blog comments).

I would never used D and A is how I would done it a year ago.

I wanted to raise similar point as @Matt Wilcox does, albeit with different example: blog index is also a list of posts, but encoding a post as a <li> element is not something that is usually done. Although one can put article or section inside <li> as well, no?

Steve Pugh says

Using my handy HTML5 Doctor flowchart ;-) I’d say that either B or C depending on whether each product contained enough information to work in a standalone view. If they do then <article> is justified, otherwise <section>

At work I’ve marked up lists of products (on search or browse pages) with <ul> because they are just short snippets of the full product details. The actual product pages are built as one page per product, and I suppose I could wrap the page in an <article> and then each major part of the info (which we display on separate tabs within the page) as <section>.

elmimmo says

Some people mentioned C, wrapping all section inside an article. I do not think that is appropriate:

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

In other words, atomic objects. The key concept is syndication, I think. Considering an online shop that uses syndication to notify new products on sale, I think it would make more sense to syndicate each individual product. Nowhere in the spec (AFAIK) does it say that the article serves the additional purpose of grouping several items, which is the primary use those users seem to be giving it.

Besides, in respect to using section for each individual product:

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.

One section per product is not “grouping”, if by grouping we understand a group of several items in a same level. You do not make groups of 1 item per group.

The spec itself even states:

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

Hence I would go for B: enclosing each product in an article (which even in real English semantics makes sense), and grouping them all inside a section, if the webpage had other sections that serve purposes different from merely product listing (say, latest blog posts).

An omitted E option is why shouldn’t a list of products be, well, an unordered list…

Tom L says

I would go with B. Because this is a list of items, and each item has it’s H2 and details below, it would be something an individual could subscribe too. I would put sections in there to encapsulate the header from the content, and possible from a footer section as well.

I would have expected the title to use an H1 based on the HTML 5 standard, since it’s the first heading within the article. But I recall the conversation about backwards compatability.

Dominykas Blyžė says

My initial instinct, out of the options given, was to use the ARTICLE to mark up the individual items. However, it really depends on other content on the page and the content describint the product.

If it’s just the title, the image and a link to the next page – I think a simple UL would do the trick (not even using H2 for the item name).

If each item in the list makes sense on it’s own and has some content about it, e.g. has 2-3 lines of description or a bulletpoint list of main features (item 1: includes ac charger / item 2: battery charged), then I think ARTICLE is appropriate.

You wouldn’t mark up items in a list of “Related articles” as ARTICLE, would you?

Either way, I would say a very clear no-no to C (section) and D (nav).

Jody Daub says

Not B: The products aren’t widgets and the content is not really for syndication.
A and C are OK, I guess.
Not D: [nav] is intended for major navigation, and I interpret that as main pages on the site (home, contact, etc.)

Based on a [section] containing thematically grouped content, and each product being an item in a larger group of items (where the order is not important)

[section]
[ul]
[li]
[h2]Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate[/h2]

[/li]
[li]
[h2]Philips NT9110 Nose Hair Trimmer by Philips[h2]

[/li]
[/ul]
[/section]

toni says

(C) all the way.

Adam says

RE: <section> vs. <article> —

Think about it in terms of reuse. A section make sense only in the context of something else, it is never self contained.

The product description is a self contained concept in every instance in which it is used. It has only incidental relationship to the other products on the page.

To argue that it should be a section because it is a section of the page is flawed thinking. The product will always be rendered somewhere. Put it into audio for telephony catalog, and its a section of that, put it in a poster, its a section of the poster. The fact that its a section/part of the thing into which its rendered shows thinking of this in terms of a section is mixing content with presentation.

Since a product may contain other products (say as a bundle) I’d do the following, which establishes the approach.


<article>
<h2>Super Simple Quiz Bundle!</h2>
<section>
<h2>Bundled Products</h2>
<article>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...
</article>
<article>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...
</article>
</section>
</article>

David says

B, with @Ian’s solid rationale,… and like @Ivana I might also use H1 instead of H2

Paul Michael Smith says

I’d got for option C here are my reasons:

In this particular context then I believe section is the most appropriate because there is a heading at the start, although possible its not typical that this would be “syndicated content”, to me its a re-usable chunk that could appear in various locations across multiple documents within a given site and so is a-part-of or “section” of any of those documents in which it is contained.

If I’m correct I believe the section element allows for “scoped” headings and with that in mind it would lend its self very well for the re-use of this product component/snippet across the site.

Paul Watson says

I’d go for (B) – with each product as an article as each one can be read as a discrete item without reference to the others.

But I’d wrap the whole lot in a section as it is a grouping of articles that can have an h1 title describing what they are:


<section>
<h1>Choose one of our lovely Nose Hair Trimmers</h1>
<article>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...
</article>
<article>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...
</article>
</section>

bruce says

Wow! What a response! Thanks all, and keep ‘em coming.

In my quest to simplify the markup examples, I might have over-simplified and not given enough information.

The ellipsis in each product description is an image, some blurb (“The Snouto 2000 leverages HTMLCSSVG 5query and the latest hair-trimming technology and give you a superb nasal smoothness experience”) some prices and a link to buy it.

David Kendal says

Option B, but I’d switch the H2 tags to H1s. Remember, each section, article, nav, header, footer, etc. tag returns the header level to 1.

Option A is bad because the <div> tag is semantically useless—there may as well be no markup distinguishing them. Option C is good, but I think the <section> tag is better for grouping articles together– creating columns of information that are not navigation, etc. Option D is bad because it’s not a list of links navigating to different parts of a website—it’s navigating between different pages in the same part of the site.

Adam says

Further, from the spec:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

The section is for generic divisions. Yes the very next paragraph is a not encouraging authors to use an article tag when the section would be syndicated, but that doesn’t mean that its only things that would be syndicated that are articles. Again from the spec:

The article element represents a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

The important part of that quote is that its a self-contained composition and intended to be independently distributable or reusable. Syndication is only ONE example of distribution. In a content management system (or anything that is built following MVC) the models are always intended for reuse and so are always candidates for being articles. Its not necessarily the case but it is certainly typically the case that first class models in your application (product, posts, comments) should be rendered as articles, unless a more specifically appropriate tag exists.

Laz says

@David, you can use h2 too, you don’t *have* to start every time from h1. Currently it appears to be better for accessibility reasons.

Jason McLaughlin says

Option B is the clear winner. <section> seems purely layout-oriented, merely indicating each element’s relationship to its parent and sibling elements, whereas <article> is more holistically semantic, indicating not only structural hierarchy but also that each item represents a distinct unit of content within the referenced category.

Domenic Denicola says

Another vote for lists instead of any of the given options.

Paul Michael Smith says

I think Adam’s comment has nailed it for me. I didn’t read other comments before I posted mine because I wanted to see if my understanding from my limited reading on the subject was correct (in future I will read them first Bruce!), I think Adam has shown me to be wrong based what he’s pointed out in the spec.

Just shows how easy it is to read a little of something and then come up with you’re own interpretation based on something as simple as the names used. Before this, to me an “article” was something bigger than a “section” but seemingly not so.

Excellent, keep this up! Dan’s SimpleQuizes used to be brilliant.

rlfalerts says

…as Paul Watson’s suggestion above.

I think I’d go for B, and I’d keep the H2s. The articles would live within a section for which I would reserve the main heading (H1).

Adam says

for fun, here is a more robust (IMHO) markup scheme for the product:


<article data-sku="GM 12213">
<header>
<h1>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h1>
<dl>
<dt><abbr title='stock keeping unit'>SKU</abbr></dt>
<dd>GM 12213</dd>
</dl>
<dl>
<dt>Avaliablity</dt>
<dd><a href="/backorder.html" rel="help">Back Ordered</a></dd>
</dl>
</header>
... description ...
</article>

I’m a little ambivalent about some of the elements (using <dl> for instance) but this strikes me as closer to a complete approach. Perhaps a <footer> for miscellaneous meta data and an <aside> or two or three for purchase calls to action (they’re an aside to the content not to the site owners needs/purpose)

Adam says

for fun, here is a more robust (IMHO) markup scheme for the product:


<article data-sku="GM 12213">
<header>
<h1>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h1>
<dl>
<dt><abbr title='stock keeping unit'>SKU</abbr></dt>
<dd>GM 12213</dd>
</dl>
<dl>
<dt>Avaliablity</dt>
<dd><a href="/backorder.html" rel="help">Back Ordered</a></dd>
</dl>
</header>
... description ...
</article>

I’m a little ambivalent about some of the elements (using <dl> for instance) but this strikes me as closer to a complete approach. Perhaps a <footer> for miscellaneous meta data and an <aside> or two or three for purchase calls to action (they’re an aside to the content not to the site owners needs/purpose)

Douglas says

I’d use option 2, except instead of <h2> tags I’d use <h2> tags. I think it was in the HTML5 For Designers book that I was reading that header tags within <section> tags that are nested take on that same nested property so that <section><h1>Header 1</h1>…<section><h1>Header 2</h1>…</section></section> would behave like <div><h1>Header 1</h1>…<div><h2>Header 2</h2>…</div></div>

I think <article> tags work the same way… yes? no? Am I misreading here?

Matt says

In my opinion, the semantics here are already wrong.

Assuming that this would most likely already be within an <article>, it would definitely make sense to use an unordered list (<ul>) as putting a div or a <section> inside the content would be going completely overboard.

Douglas says

PS, that should read “…instead of <h2> tags I’d use <h1> tags…”
PPS. seconding @Adam’s robust option

Jason Ladicos says

Another vote for B plus h1s instead of h2s.

Ed Knight says

Of these I would choose B.

Reasonings:
- Each product item could be a self-contained element.
- Each article by itself means something and thus could be possibly used for feeds, syndication etc.
- Why Not A: That structure carries no semantic meaning or association at all. (esp. in HTML5)
- Why Not C: They are not really each sections, I could possibly see these article elements being contained in a section element together though.
- Why Not D: If the products where just a listing to their deeper page descriptions then a nav may be feasible, but I would say not in this case because more details are being displayed than simple nav link.

Zulema says

Going purely on the choices and not adding/subtracting code, my choice is B. It makes the most sense to break each product into an [article] tag instead of each in a [section] tag.

Since each product is an individual piece and can stand apart from the other products, the [article] tag makes the most sense. The [section] tag, from what I’ve understood, does not mark up items that stand-alone but marks up items of a larger piece.

Ted DRAKE says

I use version b on this search engine shavers on fyvr.net

I chose the article because each result is a self-contained product description. I could take that chunk of contact and place it as a highlighted product on a blog or other page.

code snippet:

<article>

<header><h1><a href="http://www.amazon.com/exec/obidos/ASIN/B000VKV28S/ref=nosim/fyvrnet-20">Panasonic ES7103K Pro-Curve Wet/Dry Triple Head Shaver, Black</a></h1></header>
<figure><a href=&quothttp://www.amazon.com/exec/obidos/ASIN/B000VKV28S/ref=nosim/fyvrnet-20"><img src="http://ecx.images-amazon.com/images/I/31R4ibTQLNL._SL75_.jpg&quot; alt="Panasonic ES7103K Pro-Curve Wet/Dry Triple Head Shaver, Black"></a></figure>

<details open="">

<ul>

<li><summary>The Pro-Curve Triple Blade Pivot Shaver, offers outstanding shaving features. Two foils and a center slit blade all float independently, while it's pivoting head feature rocks up and down, and back and forth, allowing the blades to form and follow every contour of your face for a more soo…</summary></li>

<li class="features">

<ul>
<li>Triple blade shaving system with pop up trimmer</li>
<li>Pivoting head</li>
<li>Sharpest blades for closeness - 30 degrees</li>
<li>LCD battery monitor</li>
<li>Dual voltage with one hour charge</li>
</ul>
</li>
<li><strong>$69.99</strong> Health and Beauty Panasonic</li>
</ul>
</details>
</article>

Adam says

Here’s the thing about h1 vs h2.

It doesn’t matter what you use. You can use anything as the “rank” is determined by its nested depth within the final page and the only one that matters is which ever has the highest.

So using h1 or h2 or h6 is all the same.

Lauhakari [mikko] says

Okey, so I see a lot of support of option C … And at first thought that was my choice too!
Then I thought about it a bit, and all the things I’ve read about like here @ HTML5doctor, and came to the conclusion that for each product it should be Option A. and all the products should be contained in a section!!

Option D goes away directly, as the list probably isn’t the “main” navigation or a navigation at all =P
Option B could work, but as each product is not what I would call a “self-contained composition intended for syndication”. Self-contained perhaps, but not for syndication, like a story.
Option C & A All the products should be contained in a section element as they together are an application section. And we would probably want to style these products and separate them so for that we should just use the div element as a simple container.

that’s my 2 cents =}

Alex says

I would choose C. A is the old way that HTML 4 provides and doesn’t take advantage of HTML5′s new abilities to markup different kinds of sections. D is definitely wrong. These sections aren’t navigation links.

I admit, it’s a tough choice between C and B. Buto IMHO, B isn’t suitable either as I don’t think that the product descriptions are all seperate articles. They are more like different chapters of one article “Nose hair trimmer” . So I would contradict Adam in this case. :-)

Arlen says

@Adam, get out of my head!

I was going to say it has to be B, as each can stand alone, and depending upon what the elipsis hides I’d turn the h2′s to h1′s and wrap them and maybe some of the rest in a header block, before the general description.

Oh, and I’d make the h1 a link to buy it, as well as putting one inside the article.

Rene Geuze says

I would go for B and most certainly if we assume the parent isn’t already an article.
C would seem correct if it were a post about multiple nose trimmers( like a top 10 someone made ) but as said then the parent should be an article.

For an e-commerce website article would also make sense because you could add (secondary?) info in an aside element. You generally don’t put aside elements in section elements(though I might be wrong there)

For the people suggesting an OL/UL, this makes no sense to me at all.Have you missed the “…” part? … in this context usually means something like a paragraph or more. Paragraphs go into a p element and a p element generally does not go into a li element. If you start using ul/ol for this it would seem to me you also put all forums, mailboxes, usercomments(like on this website) in ol/ul. Seems odd to me.

Enrique Ramírez says

I saw the very first example and I immediatly thought “Definition list!”… but since this is HTML5 doctor and after thinking of the actual contents that a product list would have (ie, not only a description), I may go with B. Though I still think any kind of list would be a better option.

Dave says

OK, with clarifications about content it becomes better to decide.

Just repeating myself: using html5 does not imply older tags are dead, it just adds some new semantic tags to context.

So, I would use something like:

Product X

some blurb here

Perhaps some listed features
Like size or weight

Add to chart

Perhaps would make use of aside tag to wrap product features list.

Paul Watson says

I’ve given my suggestion above (B), but I just wanted to add a further comment.

A few people have quoted the definition of the article element as being a “self-contained composition intended for syndication”, and proposed that this definition suggests that wrapping each product in an article is incorrect.

I’d disagree because I do think that a product can be a “self-contained composition intended for syndication”. If we move away from thinking about blogs and think about an online shop providing an XML feed of products (either an RSS feed of new products or an XML feed of selected products retrieved using a REST API for third part aggregators) then each product is very clearly a self-contained composition intended for syndication.

Sometimes I think the article element was badly named because it tricks you into thinking of articles (in the traditional sense – e.g. single blog posts), which is certainly going to be a major use of this element, but it is much more versatile than that.

Elaine Nelson says

I would agree with those suggesting <ul> or <ol> – what you’re doing here is specifically pulling a LIST of items. Each item may be bigger than a single line, but if you were hand-write the headers or type into an email or Word, there’s a reasonable chance that you’d bullet-point. At least, I would. And if you were describing it aloud, I’d be likely to speak it as a list, ie: I’m going to the store and buying a gallon of milk, a loaf of bread, and a box of cereal. All of that leads me to think “list.”

Alternatively, I’d go with B (<article>) based on the reuse question.

For extra semantic goodness one might put the individual chunks of information inside of a <dl> inside the <li>, but I’d base that on how easy or difficult it is to do that with the CMS.

To extend on that thought: if I were running a site like this in Drupal, I’d make each item for sale a node, and create custom fields for the SKU, price, etc. On the individual page for the item, I’d print it out mostly likely inside of a section (id=”content”?), with the name of the product as an <h1> and the details as a combination of <p> (narrative description) and <dl> (custom fields). Then I’d create a View for listing sets of items that display the titles & teasers in a list.

Bart says

a

Arieh says

out of the options – B. I would also like to add that I would probably add a header tag to each article, and also that all products should be contained inside one section.
What I recently did was to put the articles inside a UL:
[section]
[ul]
[li]
[article]
[header][h1]Prod1[/h1][/header]
[dl]……[/dl] <—- this is all the prod’s data
[/article]
[li]
[li] [article]…[/article]

the reasoning was mostly that I’m really used to using list for this kind of data, and I find it best represents the relation between articles

Dan says

My initial reaction: why is there no option for (un-)ordered lists?

After reading the comments article seems kinda fitting the bill as well. It really does depend on how much information will be inside the element. If it’s just the products name, an image and a price i may just stick with a list. If the description of the item is part of the element an article element may seem more appropriate, since it’s more complete.

To me this just shows that the spec is flawed here. If we can’t seem to agree on a solution quickly, the current state does more harm than it helps. What good are more semantics if every site interprets the elements’ definitions differently, ending up with different markup for the same contents? How does that help anyone – screen readers in particular?

Dan says

Oh, and about the “…would be used for syndication” part:

To me that’s complete nonsense and shouldn’t even be mentioned in the spec. If you want to syndicate stuff, provide a news-feed or a (RESTful) web-service. Don’t overload the document with technical stuff, especially if we already have a different, working solution for it.

fjpoblam says

Choices C or D are possibilites. I’d have to see the context. I’d like to see what’s on the rest of the page. Is it a catalog of items for sale? Another possibility is a definition list, a la

<dl>

<dt>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</dt>

<dd>description of the one made by Groom Mate and perhaps its price</dd>

<dt>Philips NT9110 Nose Hair Trimmer by Philips<dt>

<dd>description of the one made by Phillips and perhaps its price</dd>

<dl>

I reckon, of all the above, I’d ultimately choose C enclosed within an <article>

fjpoblam says

[Yo! HTML5doctor! I don't know if this is already present, but I couldn't find it. Enable editing of comments. Please do so. I meant </dl> and perhaps I would have placed prices as an optional second <dd>]

Thomas Maas says

Sunday evening, quiz time. Nice.

A is semantically poor
B is correct and specifies the sections as articles which makes sense because the products are independent items of content
C is correct and semantically richer than A but poorer than B because the section element is less specific than the article element
D gives the wrong semantic emphasis, as the primary goal of this content isn’t navigation.

final answer: B

Simon says

I’d have to go with B, for much the same reasons others have given. While a list of products might not be ‘articles’ in the traditional sense, I think the use of the <article> tag is appropriate – each product is a standalone item under a section header, not requiring all the others to provide context.

For that same reason, option C doesn’t seem appropriate – using a <section> tag implies that the content is an element of a whole, incomplete without the context of the whole. That’s clearly not the case here – each item in the list might be syndicated separately, might be copy-pasted into an email, or direct-linked to.

Paolo says

B all the way: because each product is a single entry which can even be syndicated, just like a blog post or news item, and it can be grouped in a category page or stand alone in his full single page description.

Eddie Sutton says

Solution “B” gets my vote and primarily for one reason – the “article” element is intended for a chunk of content that can live on its own and be published out of context with meaning intact. That makes sense for this example, especially with an e-commerce angle.

One of the fantastic things about HTML5 is the flexibility it provides for the designer of HTML semantics to choose which is most appropriate. My impression/understanding is that the HTML5 recommendations are just that – recommendations – and not hard rules.

This past weekend I attended An Event Apart in DC where Jeremy Keith conducted an interesting experiment. He provided the definitions from the HTML5 recommendations and asked us (a “classroom” of a few hundred) to identify which HTML5 element matched the definition. There was rarely a definite conclusion – different folks had different answers and for different reasons. That doesn’t make anyone wrong. It just reflects different conclusions, goals and decisions.

Love the quiz!

Litso says

B. All the products should be in the same ‘section’ and the difference between them semantically is the same difference between ‘articles’ in a blog, for example.

That’s what I thougt too, but maybe I (we) mix up the value/importance of article vs. section. Is a section a part of an article? Is an article (like blog post) part of the blogs section? Can both be true?

Litso says

First section of above post is a quote by Ian. I messed it up, sorry.

Bizawesome says

I am going to have to agree with Litso. We are dealing with two different trimmers. Which would be in the same category or section. However you want to give different information for each trimmer.

The site is some what vague but it almost seems like it would be like a shopping page.

Let’s look at this as if we are shopping through a store.

I know that when I got into a store the store that I want to purchase a new trimmer.

Logically I say to myself I need to head to the personal care SECTION when I get to the personal care SECTION I am going to look at a more specific SECTION which would be trimmers.

Once I find the trimmers SECTION I start comparing different items or ARTICLES.

Once I find the right trimmer/ARTICLE I back up from the specific SECTION and I going to a different SECTION and start looking at shaving cream/gel ARTICLES.

It’s “B” for me.

Chris says

B as article makes the most sense in the series of related products. You may have a section tag surrounding the specific types of times as a whole but B is the only one that makes sense here.

TheNinja says

For me, it’s obvious that it’d be B. It’s a product page, and each product is self-contained and has a heading. If there were several similar products (different models, or from different manufacturers) I’d like to see them grouped together via separate tags that are wrapped by one tag.

TheNinja says

Let me try that last sentence again….. “I’d like to see them grouped together via separate < article > tags that are wrapped by one < section > tag.”

Martijn van Turnhout says

I would have have said ” in the beginning, but now that I’ve studied the semantics behind the and , I’ve come to the conclusion that is the way to go here.

Martijn van Turnhout says

My tags disappeared. Here’s what I said:

I would have have said in the beginning, but now that I’ve studied the semantics behind the and tags, I’ve come to the conclusion that is the way to go here.

Martijn van Turnhout says

Christ, sorry for this mixup, LOL. One last try. Sorry folks:

I would have said SECTION, but now that I’ve studied the semantics behind the SECTION and ARTICLE tags, I’ve come to the conclusion that ARTICLE is the way to go here.

stuart Robson says

All four examples are valid.

A – the element is still in use within HTML5 for a block level element with no special meaning, so if the content does not fit into an , or element it is perfectly valid to use a element.
B – the element would be used if this content was pieces of news, blogs, forum posts or a sidebar widget of the page that forms an independent part of the document, site or page.
C – the element can be used as the content has separate headings and each piece of content would be separate discussion.
D – the element is ok as the content could be in-page navigation a table of contents or some form of pagination on the page, document or site.

I hope this all makes sense, the lovely thing about HTML5 is the rules are almost like there are no rules. Which takes us firmly away from the XHTML strictness that would often throw the spanner in the works when you’ve missed that vital semi-colon :)

I hope that all makes sense :)

Bruce Lawson says

What an amazing response! Thanks all. Here is my take on the question; note that this is not in any way definitive, and feel absolutely free to argue. In fact, it’s a moral duty to do so!

Firstly, I think the answer is b: the <article> element is the best man for the job. It’s not a question of eliminating the others and <article> being the only remaining choice—it seems to me explicit from the specificaton—but let’s look at why a (<div>) and d (<nav>) are ruled out.

<div> is your “element of last resort”, that you use to group other elements when no other grouping element is appropriate. It’s the only alternative in HTML 4/ XHTML 1, but in HTML5, it’s like writing <span class="abbreviation"> instead of <abbr> because we have more appropriate semantic elements at our beck and call. However, don’t be fooled: you can still use <div> when no other element is appropriate, it’s just that we have more elements to choose from first.

<nav> is incorrect because this is a page about nose-hair trimmers: this stuff we’re marking up is content, not navigation.

So that leaves us a choice between <article> and <section>. You notice that I deliberately chose products rather than news stories or blog posts, to break the mental link between newspaper articles and <article>. The element should be thought of as an article of clothing – an individual item that can be reused and worn with other items of clothing (a black t-shirt that today you wear with blue jeans and tomorrow you wear with a taffeta ra-ra skirt, leggings and Pixie boots, for example). The black t-shirt is one item, discrete and self-contained but can be pulled into a wider ensemble, such as the one described above that Dr Oli wore at the last Doctor meetup.

In a comment, elmimmo quotes the spec

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

and adds

In other words, atomic objects. The key concept is syndication, I think. Considering an online shop that uses syndication to notify new products on sale, I think it would make more sense to syndicate each individual product. Nowhere in the spec (AFAIK) does it say that the article serves the additional purpose of grouping several items

Certainly, any of the nose-hair trimmers on the page could be individually syndicated. Remy might, for example, have an Amazon wishlist in which a nosehair trimmer is one product (article) amongst other books, DVDs, CDs etc.

So why is <section> not the man for the job? Primarily, because it groups several elements, while <article> is, as elmimmo says, atomic. <section> does not carry with it the idea of discrete and re-usable. Because <section> is a grouping element, neither would I wrap all the <article>s in <section> in this context. In this example, we have a collection of nose-hair trimmers; grouping them isn’t necessary as grouping them implies a need to distinguish or differentiate this group from another group – and there’s nothing else on the page. Sure, you might want to group them together to apply styling, but that’s a stylistic matter and for that you’d use the semantically neutral <div> (did I mention you can still use <div>?).

If, however, we had two collections of products – say, a group of nose hair trimmers and a group of merkins, then it would be perfectly semantic to use two <section>s to wrap each group of <article>s because there is a conceptual (and therefore semantic) difference.

Consider this photograph of Dr Rich Clark and me at the last Doctors meetup.

Rich Clark, wearing lurid jumpsuit and garish hat, and Bruce Lawson

Each item of our clothing would be an <article> as they are discrete (a hat is a hat, and a t-shirt is a t-shirt and, while part of wider ensembles, are independent entities). They are re-usable; tomorrow, I could wear those jeans with a different t-shirt. They are syndicatable: for example, Richard could wear my sunglasses on his head, while I could wear his hat (but would certainly look nowhere near as dashing). Marking this up, and distinguishing between Richard and me (should you be in any doubt), the set of <article>s listing Rich’s ensemble would be in a section with the heading <h1>Rich's ensemble</h1>, and a similar <section> for my ensemble:


<section>
<h1>Rich's ensemble</h1>
 <article>
 <h2>A very fetching hat</h2>
 <p>blah blah</p>
 </article>
 <article>
 <h2>A lovely polyester jumpsuit</h2>
 <p>blah blah</p>
 </article>
</section>

<section>
<h1>Bruce's ensemble</h1>
 <article>
 <h2>A t-shirt</h2>
 <p>blah blah</p>
 </article>
 <article>
 <h2>Some supermarket jeans</h2>
 <p>blah blah</p>
 </article>
</section>

(In the interests of accuracy, biut complicating matters, I should emphasises that this is highly contextual: in another context, say biographies of each HTML5 doctor, Richard and I would merit our own <article> because in that context our bios are atomic, syndicatable and reusable.)

So that’s my answer. Matt Smith wrote that he would also “mark up each individual product with the hProduct microformat so everything knew they were a products”. You can certainly do that: microformats build on semantic HTML, regardless of whether that’s HTML 4 or 5. You could also use RDFa or microdata.

Several of you pre-empted my next HTML5 Simplequiz question by suggesting that you would wrap the articles in a list. In my example, I specifically didn’t say that the articles are arranged in price order, as I didn’t want to imply an ordered list. You could use <ol> or <ul> but when I was marking up my own blog I chose not to because I find it overcomplicates the markup without any real benefit. Sure, my blogposts are in reverse chronological order – but any crawler wishing to deduce that can deduce the order from the <pubdate> attribute on the <time> element in each <article>‘s <header>.

I agree with Matt Wilcox in finding listitis as terrible affliction. Anything can be marked up as a list, but that doesn’t mean you should. For example, the phrase in English “dog bites man” has a very different meaning from “man bites dog”, but that meaning is completely dependant on word order. However, you wouldn’t mark it up as an inline ordered list, would you? So reserve wrapping lists for occasions when it really matters. In this occasion, I contend, it doesn’t matter.

That’s about it. To Ivana Vasij who said she “would use h1 instead of h2″, stay tuned: you can use <h6> if you like; it doesn’t matter in HTML5 as the outlining algorithm takes care of that, as we’ll see in a future article, which will also deal with the slightly different meaning of <section> when inside an <article>.

So: let the debate continue!

Ian says

Thanks for the explanation. I was sure it was B, but the use of headings did cause me to ponder their choice. So a future article on the outlining algorithm will be eagerly awaited. Ta!

Kevn says

Yes, thanks for explaining. I was sure it was C (using the <section> tag) but you make a compelling argument for using the <article> tag.

fjpoblam says

While “listitis” may be a “terrible affliction,” “articleitis” or “sectionitis” or “divitis” may be afflictions as well. Anything may also be marked up as an article or section, but it doesn’t mean they should be. As I suggested, it depends upon context.

Your example didn’t show content beyond titles. The titles showed both items describing “nose hair trimmers” which could also lead the puzzle-solvers to deduce these are items in a catalog. In which case, a list (accompanied by descriptions, and perhaps images, and perhaps prices), might well be appropriate.

In other words, this is a puzzle with many possible solutions.

Bruce Lawson says

Yup, as I said above – it’s my personal take on the question.

onno says

I am in agreement with fjpoblam. If an ad is tagged as an article, a section or a nav element, then we have just reduced the semantic significance of all other content in those tags to the level of the ad. If you read the specification, Bruce, it clearly points to meaningful content, and ads are not meaningful content, only being tangentially related to the content in that it make money. Now if the ad were somehow related to the content of the page, that would be different, for it would then be necessary to make that meaning clear for machines.
Since the reason for HTML5 having more tags is to become more semantically clear, that is, so that machines can have an easier time of getting meaning out of the web, the only choice, for me, would be A, to wrap the ad in a generic div, and if there were more than one ad, to wrap them in a list.

MonK-eYe says

I would say none of the above

You are showing some grouping content and ask what sections to use.

I would put these nose tools in a [tr] element into a nice table into the section “nose hair removers”.

Matthew Wilson says

I am for B or C. However, this example does not really help with creating a clear vision of the overall page. Are these search results?, a list of products in a particular category? or a straight up list of links?

But since we inferring….
I would more definitively say B, then.
Reason: <article> is designed for self-contained content meant to be syndicated. I guess a good question would be: what is meant by syndication? Are we just talking about RSS or Atom feeds? Or are we talking about site-wide syndication? Intra-site syndication? Essentially syndication is the broadcasting of content across multiple channels. Another site could be considered that, I suppose.
I am all for making the content as useful and flexible as possible. Now, put those <article> tags in a <section> and we have the beginnings of a real HTML5 party.

Again, I think that based on the shear number of comments, most of us can agree that some aspect of markup is subjective. However, it is also contextual.

This was fun! Lets do another!

Viki Pandit says

An unordered list would suffice here since its a product catalog not a blog. If this was a blog with articles on the products would go with C.

Bobby Jack says

I wish the name “article” hadn’t been used for this element; surely an alternative (item, chunk, entry, piece) would be less ambiguous; the term ‘article’ is already so loaded, particularly in the context of blogs and news sites.

I wonder how soon we’ll see both – a) a popular web service and b) a mainstream browser – that makes use of the distinction between, say, article and section. Will the syndication aspect of the ‘article’ element ever be used as an alternative to RSS feeds?

Matt Menzer says

I would have chosen a list initially, but that’s only because I wouldn’t usually consider syndicating products listed on a product page. If I had a page announcing new products, or maybe even ordered the product page by newest product to oldest product, then I would have considered using article.

Your photo example brings up an interesting point. Looking at your example code, The primary atomic units I would imagine as syndicatable would be the outfits, not the individual items of clothing. Since articles can be nested, is there a reason you would ever choose to only make the individual pieces of clothing articles, rather than making both the clothing items and the outfits articles? I can’t see how outfits as simply sections offers any benefit over outfits as articles.

This also raises another question: should a group of (consecutive?) articles at the same level of the outline that are not contained in a list be assumed to be related to one another in one syndication context? If not, then there are added semantics to wrapping a list of related articles in a ul or ol, and ‘listitis’ is no longer an issue: the ol on the product page defines the relationship of the individual product articles.

Stephen says

I like the point of view. Good stuff to think about.

Wenzel says

I’d rather use


<section>
<article>The Product<article>
<article>The Product<article>
</section>

Justin says

B

Jason says

I had said C, like others thinking of it as a section containing articles within.
But now makes sense… as with a newspaper example. A newspaper contains sections that have articles in them.

USA Today

World News
HTML5 Starting to make sense! Makes one wonder……

Local News
Wonders of HTML5 blows US away, but…..

Entertainment

Movies
If you think these are hot, wait till…….

Television
New Season of……

Jason says

Did the above in the code… ;)

solicitor says

ya ts wonderful….

Killavus says

If I would like to make a product page listing many products, I’ll obviously use an unordered list. But when I’d be forced to choose one of these solutions – I’ll take B, because, as spec says, an <article>:

(…) represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. (…)

One product is great to represent it in a RSS feed as a single element. I’d wrap it all in a <section> tag, because a product page is certainly a:

(…) thematic grouping of content, typically with a heading.

C would do the trick, but it’s too generic for me. When I can provide a deeper level of semantic hierarchy, why not?

Yours
Martin

Marco says

I will go with B.
Like Ian points out articles would be inside a section and the page could have more sections (main products, recommended products, etc). So since the products are individual items I’ll go with B.

Loved the SimpleQuiz

Nikhil Sapkota says

C it is if the current situation is to be taken a look at.. Nice question.

Join the discussion.

Some HTML is ok

You can use these tags:
<a href="" title="">
<abbr title="">
<b>
<blockquote cite="">
<cite>
<del datetime="">
<em>
<i>
<q cite="">
<strong>

You can also use <code>, and remember to use &lt; and &gt; for brackets.