[whatwg] HTML5 fo ecommerce

Benjamin Hawkes-Lewis bhawkeslewis at googlemail.com
Fri Jan 23 00:58:35 PST 2009

On 23/1/09 08:10, Mynthon wrote:
> On my companys page there are no articles and sections. There are
> products and product lists. Isnt it wrong to use
> <article>
>    <section>
>      <h1>product1</h1>
>      some data
>    </section>
>    <section>
>      <h1>product2</h1>
>      some data
>    </section>
>    <section>
>      <h1>product3</h1>
>      some data
>    </section>
> </article>
> while it wil be misleading screen readers? For users without
> disabilities there is no problem but for eg. blind peple? Calling
> product list an article is... hmmm... wrong.


You're not marking the product list as an "article". That's just the 
name of the element. You're marking it up as "a section of a page that 
consists of a composition that forms an independent part of a document, 
page, or site. This could be a forum post, a magazine or newspaper 
article, a Web log entry, a user-submitted comment, or any other 
independent item of content."


Similarly, when you mark something up as an "address", you're not 
marking any old snail mail address, but rather any sort of contact 
information (e.g. telephone, email) for the author of that part of the 


Conclusion: The names of HTML elements are not a perfect guide to what 
they represent. If it is correct to say your product list is "a section 
of a page that consists of a composition that forms an independent part 
of a document, page, or site", then marking it up with an "article" 
element will not mislead conforming user agents, screen readers or 

However, whether it's the best element to use in your case is debatable. 
A case might be made for using OL, depending on what sort of product 
list this is. For example, if it's a search results page for 
"grabowski", I'd use an OL:

<article class="search-results">
<h1>Search Results</h1>
<p>Results 1-5 of 5 for <kbd>grabowski</kbd>.</p>
<li class="product>
<h1>New book</h1>
<p>by Chris <mark>Grabowski</mark></p>
<p>old price:<span>5usd</span></p>
<p><strong>Now only:</strong>  <span class="price">3.99usd</span></p>
<p>This is description of product …</p>

(Compare the OL elements in the search result pages of Google and 
Yahoo!, with which screen reader users are familiar.)

I'd also use an OL if it's a sorted list (e.g. sorted by price).

On the other hand, if the order is editorial, I'd probably just use an 
"article" with nested "article" elements or "section" elements.

HTML5 provides extension mechanisms that can be used to annotate HTML to 
make product data extractable. The microformats community is working on 
markup for product lists and products:



hListing is already in use on Kelkoo:


> Will be very cool for me and many other.

If you're proposing new features, you need to begin with the end-user 
problems you're trying to solve, not specific HTML element proposals:


It's not clear to me whether the problem you're hinting at is that the 
name "article" is insufficiently generic for what it represents or 
whether you're attempting to solve additional problems (data extraction? 
special navigation?).

Naming elements tends to be a case of choosing the least worst option, 

Benjamin Hawkes-Lewis

More information about the whatwg mailing list