Question

I’m currently working on an ecommerce project and can’t work out whether to use article, section or a div to wrap the product listing.

There are multiple sections following it for things such as promos and I don’t want to use div since the following sections would have a greater meaning and undermine it, however it should have a greater meaning than the following sections.

I’m considering the article tag but I cannot find an example of it being used outside of a blog. I’ve noticed people deem it acceptable for single items (product pages), but what approach should be used for browsing product listings?

Answer 1

The section specification is very instructive:

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, possibly with a footer.

Note: The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

If a number of elements are thematically related and can be grouped together under a common title (e.g. "Shoes") then wrap the products in a section.

If the elements you are wrapping are not related, cannot be grouped under a common title and are just being wrapped for the purpose of styling then use a div.

For completeness, the article tag represents (from the same page):

a self-contained composition in a document, page, application, or site and that is, in principle, 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.

so your items for sale would each be an article within the section.

As a final side note, I wouldn’t wrap the whole page in a <div role="main">: surely the header sits outside of the main content.