38

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

例子

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

而且，它们应该是图/图标题？因为会有些道理，而且...图片是文章的一部分而不是主要内容，所以标题/描述可能不是图片的标题，而是文章的标题。

你怎么看？

编辑：一个活生生的例子 - https://news.google.com/?hl=en

4

5 回答 5

30

我会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有一个单独的定义，不一定与对“文章”一词的理解有关。

teaser 也应该是 an article– teaserarticle和 fulltextarticle是不同 article的 s，尽管它们指的是同一个实体。

于 2013-10-11T12:15:28.947 回答
10

这里的答案还有很多不足之处。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 列表确实有意义。随着事情变得复杂，他提到它会变得多么令人困惑。这是 ARIA 的地方，绝对应该添加和测试属性role。tabindex

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

如：

  • 带有摘录的博客文章列表
  • 搜索结果
  • 评论
  • 注释
于 2019-01-18T17:11:09.390 回答
1

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

如果你觉得它是一个有序或无序列的文章列表，那么你可以分别使用<ol>or<ul>元素。

我建议使标记尽可能简单，并尽可能复杂，因此应遵循以下原则：

<div>
  <article>
    <img>
    <div>…&lt;/div>
  </article>
  <article>
    <img>
    <div>…&lt;/div>
  </article>
  …
</div>
于 2013-10-10T23:18:29.297 回答
1

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

于 2013-10-10T23:06:56.863 回答
0

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

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

这是一篇关于aside.

于 2016-07-20T07:29:54.943 回答