Should I use 'li' or 'article' for products listing?

Question

I made some research and didn’t find an appropriate answer. I’m wondering if it’s better to keep using li elements for a products listing or maybe switch to the article element?

Every product list contains 1 main image, name and price.

Answer 1

From how you describe the product listing (image + name + price), it doesn't seem to fit the description of an article in HTML5:

The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry.

Ask yourself: Will that content be independent from the rest of the page content? If you take it out of context, will it make sense by itself? If the answer is "No", then you should consider that an <article> may not be the most suitable tag.

If you have multiple products to display, a styled list (ordered or unordered) seems like the best approach for this. But check some practical cases: how do big companies do it?:

• Amazon, Google Shopping, TMall, and Walmart use lists (ol or ul)
• AliBaba and Ebay just uses div boxes without any type of list.
• Taobao uses a combination of both (div for the box, and ul for the name and price)

Answer 2

Just keep the li elements and add a product schema from http://schema.org for a semantic-markup

Answer 3

This is not a question of either/or.

If using ul is appropriate has nothing to do with using article or not; and if using article is appropriate has nothing to do with using ul or not.

If each product’s content matches the definition of the article element, you should use it.

If the list of products matches the definition of the ul element, you should use it.

Generally speaking, a typical web shop listing some products (or product teasers), with some content/metadata about the product, should use an article for each product. If ul should be used is more opinion-based.

Answer 4

If you read the developer.mozilla documentation about it, it says :

The HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

So a product card should be in an article tag.