文章列表的语义HTML

Question

在一个典型的文章索引(如没有摘录的博客),像这样的图像:

那些项目应该是list(<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.

关于你的问题,如果预告片应该是article:

不要混淆article(HTML5元素)术语"文章"(英语).article有一个单独的定义,不一定与理解"文章"一词有关.

预告片也应该是article- 预告片article和全文article是不同 article的,尽管它们指的是同一个实体.

Answer 2

这里的答案还有很多不足之处。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 的一个有见地的回答解释说，语义列表标记有助于屏幕阅读器。所以是的，<article>'s的列表确实有意义。随着事情变得复杂，他提到了它是多么令人困惑。这就是 ARIArole和tabindex属性绝对应该添加和测试的地方。

该答案有一条评论，将用户引导至W3.ORG上的对话。根据定义，它似乎<article>不是应该是“独立内容”的列表的一部分。然而，这里的问题，我自己，可能还有你正在阅读这篇文章，需要一个更深入的答案，article适用于真正的文章列表。

如：

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