文章列表的语义HTML [英] Semantic HTML of an articles list

问题描述

在一篇典型的文章索引中（比如博客而没有摘录）像这样：

< ul>< li>

还有，它们应该是图形/图形说明？因为会有一定意义，但也...图片是artcile的一部分，而不是主要内容，所以也许title / description不是图片的标题，而是文章的标题。

你怎么看？

编辑：一个现场示例 - https://news.google.com/?hl=zh_CN

解决方案

<我会为每个片段（即新闻预告片）使用文章。

每个 article 包含标题的 h1 元素，以及 img 元素图片和 p 文本元素。

由于您可能想链接到完整版，你可以将所有元素放在一个 a 元素中（HTML5中允许）或者只有标题等元素。

所以它可能看起来像：

 < article> 
< h1>< a href =title =><！ - 新闻标题 - >< / a>< / h1> 
< img src =alt =/> 
< p><！ - 新闻说明 - >< / p> 
< / article> 
  

如果此图片本身应该使用图有一个单独的标题。新闻描述（这里包含 p ）通常不是该图片的标题。

您可能会更改文章子项的顺序。感谢分段元素的工作方式，标题不一定是第一个元素。

您可以使用 ul ，但没有必要。然而，只有当订单对于理解内容真正有意义（即不同的订单会改变文件的含义）时，才应该使用 ol 。典型的例子：如果项目按照相关性排列（例如顶部最相关的预告片），您应该使用 ol 。

---

关于您的如果传情应该是文章：

不要混淆文章（HTML5元素）与术语文章（英文）。 文章有单独的定义，这并不一定与理解术语文章有关。

传情应该也是文章 - 传情文章和全文文章是不同 文章 s，尽管它们指的是相同的实体。

In a typical index of articles (like a blog without excerpt) like this image:

those items should be a list (<ul><li>) or just divs?

And also, they should be figure/figcaption? Because would make some sense, but also... picture is part of an artcile not the main content, so maybe title/description is not the caption of the image, but the caption of the article.

what do you think?

EDIT: a live example - https://news.google.com/?hl=en

解决方案

I’d use an article for each snippet (i.e. a news teaser).

Each article contains an h1 element for the heading, an img element for the image, and p element(s) for the text.

As you probably want to link to a full version, you could enclose all elements in one a element (which is allowed in HTML5), or the heading etc. only.

So it could look like:

<article>
  <h1><a href="" title=""><!-- news title --></a></h1>
  <img src="" alt="" />
  <p><!-- news description --></p>
</article>

Only use figure if this image itself should have a separate caption. The news description (here contained in p) usually isn’t the caption for that image.

You may change the order of the article children. Thanks to the way sectioning elements work, the heading doesn’t have to be the first element.

You may use an ul, but it’s not necessary. ol, however, should only be used if the order is really meaningful for understanding the content (i.e. a different order would change the meaning of the document). Typical example: if the items are ranked by relevance (e.g. most relevant teaser at the top), you should use ol.

---

Regarding your question if the teaser should be an article:

Don’t confuse article (HTML5 element) with the term "article" (English language). article has a separate definition that doesn’t necessarily have something to do with the understanding of the term "article".

The teaser should also be an article – the teaser article and the fulltext article are different articles, although they refer to the same entity.

这篇关于文章列表的语义HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！