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.

Defoe

whatever your doing it sounds ideal for figure and figcaption – Morale

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)

Glendoraglendower

Thanks guys for your time, really appreciate it! <br /> @Alvaro: Actually, forgot to mention a little detail, I might also include in the very near future a short description and some keypoints of the products (list or grid view) I must admin that I haven't seend many websites using article tag to list products, except this one from which i'm getting inspired: asicsamerica.com/Shop/Footwear/cat/Footwear – Defoe

Interesting. I still don't think the article would be the best choice then as, although making sense out of context, it wouldn't be really complete and independent. The aside element would look more appropriate... But that's just my opinion. – Glendoraglendower

OK, thanks Alvaro! so i'll keep using 'li' :) you have a great day. One last question please: in my 'header' tag, i'm including 'nav' with 1 'ul' that contains the main navigation (aligned left), and i have another 'ul' aligned in the right that contains 3 links: 'account', 'cart' and an icon for 'search'. Should these 3 links be included in the first 'nav' or should I create another 'nav' ? – Defoe

Answer 2

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.

Other

Well, the more i read, the more i get confused about what to use :/ – Defoe

Answer 3

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.

Kempf

The question remains if the articles themselves should go in a a li. The answer: probably. – Simple

Answer 4

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

Implied

talking about product schema, I have disabled it from the list of products: > "Product markup should be used for a specific product, not a category of products or a list of products" Source (bottom of the page) – Defoe

@Defoe FYI - I believe that is saying that you wouldn't markup a whole list as one Product, but you should still markup each item in the list as an entity, see: developers.google.com/search/docs/guides/… – Extract