文章列表的语义HTML

Question

在一个典型的文章索引（如没有摘录的博客）中，如下图所示：

这些项目应该是一个列表（<ul><li>）还是只是div？

而且，他们应该是数字/ figcaption？因为有些意义，但是......图片是一个艺术品的一部分而不是主要内容，所以标题/描述可能不是图像的标题，而是文章的标题。

你觉得怎么样？

编辑：一个实例 - https://news.google.com/?hl=en

Answer 1

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

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

由于您可能希望链接到完整版本，因此可以将所有元素包含在一个a元素（HTML5中允许）或标题等中。

所以它看起来像：

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

如果此图片本身应具有单独的标题，则仅使用figure。新闻说明（此处包含在p中）通常不是该图片的标题。

您可以更改article孩子的顺序。由于分区元素的工作方式，标题不必是第一个元素。

您可以使用ul，但这不是必需的。但是，只有在订单对于理解内容真正有意义时才应使用ol（即，不同的顺序会改变文档的含义）。典型示例：如果项目按相关性排名（例如，顶部最相关的预告片），则应使用ol。

---

关于your question，如果预告片应为article：

不要将article（HTML5元素）与术语“文章”（英语）混淆。 article有一个单独的definition，并不一定与理解“文章”一词有关。

预告片也应该是article - 预告片article，全文article 不同 article，尽管他们指的是同一个实体。

Answer 2

这是一个意见问题，因此归结为偏好。 根据你的图像，我会使用<ul> <li>虽然我可以使用div获得相同的结果。

Answer 3

如果每个项目代表一篇文章，那么每个项目都应使用<article> elements来表示。

如果您认为它是有序或无序的文章列表，那么您可以分别使用<ol>或<ul>元素。

我建议尽可能简单地保持标记，并尽可能地复杂化，这样就可以了：

<div>
  <article>
    <img>
    <div>…</div>
  </article>
  <article>
    <img>
    <div>…</div>
  </article>
  …
</div>

Answer 4

正如其他人所说，我认为每篇文章都应标有article标记。

我还建议用aside标记围绕整个列表。因此，如果页面中有一篇主要文章（包含main），则不会受到其他文章的影响。

以下是关于aside的{​​{3}}。

Answer 5

这里的答案有很多不足之处。 HTML规范中有一个博客文章标记示例，其中带有注释。

https://www.w3.org/TR/2013/CR-html5-20130806/sections.html#the-article-element

虽然接受的答案已经复制/粘贴了<article>元素的使用说明，但根本无法回答所提出的问题。

这是W3.ORG的答案

  

如果您可以将原生HTML元素[HTML51]或属性与   您需要已经内置的语义和行为，而不是   重新设计元素，并向其中添加ARIA角色，状态或属性   使其可访问，然后这样做。

这是我研究后继续进行的逻辑： 我有一个评论列表。 每个评论均按有帮助的投票排序。 因此，第一级将是有序列表，因为评论将按其有帮助的投票进行排序。否则，无序列表就足够了，例如嵌套的注释：

<ol>
    <li class="review" role="article"> <!-- reviews ordered by votes-->
        <header>
            <h2>Review title</h2>
        </header>
        <p>Review body</p>
        <section class="comments">
            <ul>
                <li class="comment" role="article"> <!-- comments with votes-->

                </li>
            </ul>
        </section>
    </li>
</ol>

@Terrill Thompson的

An insightful answer解释说，语义列表标记可帮助屏幕阅读器。是的，文章列表确实有意义。随着事情变得复杂，他提到了它可能造成的混乱。这是绝对应该添加和测试ARIA，role和tabindex属性的地方。

该答案带有注释，可将用户引导至W3.ORG处的对话。根据定义，<article>似乎不会成为列表的一部分，而应该是“独立内容”。但是，这里的问题，我本人以及您可能正在阅读的问题都需要更深入的回答，其中article适用于真实的文章列表。

例如：

• 带有摘录的博客文章列表
• 搜索结果
• 评论
• 评论