html - 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)