[英]Should I use 'li' or 'article' for products listing?
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?我想知道是继续为产品列表使用
li
元素还是切换到article
元素更好?
Every product list contains 1 main image, name and price.每个产品列表包含 1 个主要图像、名称和价格。
From how you describe the product listing (image + name + price), it doesn't seem to fit the description of an article in HTML5 : 从描述产品清单(图像+名称+价格)的方式来看,它似乎不适合HTML5中的文章描述:
The article element represents a section of content that forms an independent part of a document or site;
article元素代表内容的一部分,形成文档或网站的独立部分; 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. 如果答案为“否”,那么您应该考虑
<article>
可能不是最合适的标签。
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?:
但是检查一些实际情况:大公司如何做到这一点?:
ol
or ul
) ol
或ul
) div
boxes without any type of list. div
框而没有任何类型的列表。 div
for the box, and ul
for the name and price) div
表示框, ul
表示名称和价格) This is not a question of either/or. 这不是一个/或一个问题。
If using ul
is appropriate has nothing to do with using article
or not; 如果使用
ul
是合适的,则与使用article
无关。 and if using article
is appropriate has nothing to do with using ul
or not. 并且是否使用
article
合适与是否使用ul
没有关系。
If each product's content matches the definition of the article
element , you should use it. 如果每个产品的内容都与
article
元素的定义匹配,则应使用它。
If the list of products matches the definition of the ul
element , you should use it. 如果产品列表与
ul
元素的定义匹配,则应使用它。
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. 一般来说,一个典型的网上商店上市的一些产品(或产品的玩笑),提供有关产品的一些内容/元数据,应该使用一个
article
为每个产品。 If ul
should be used is more opinion-based . 如果应使用
ul
则更多基于意见 。
只需保留li
元素,并从http://schema.org添加product schema
以进行语义标记
If you read the developer.mozilla documentation about it, it says:如果您阅读有关它的developer.mozilla文档,它会说:
The HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (eg, in syndication).
HTML 元素表示文档、页面、应用程序或站点中的自包含组合,旨在独立分发或重用(例如,在联合中)。 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.所以产品卡片应该在文章标签中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.