在 HTML 5 中使用 `<article>` 标签的语义正确方法是什么，以及 `<ol>、<ul> 和 <li>`？

Question

我目前有一个有序列表，我想使用新的 HTML 5 属性对其进行标记。它看起来像这样：

<ol class="section">
  <li class="article">
    <h2>Article A</h2>
    <p>Some text</p>
  </li>
  <li class="article">
    <h2>Article B</h2>
    <p>Some text</p>
  </li>
  <li class="article">
    <h2>Article C</h2>
    <p>Some text</p>
  </li>
</ol>

似乎保留列表并使用 HTML 5 标签的唯一方法是添加一大堆不必要的 div：

<section>
  <ol>
    <li>
      <article>
        <h2>Article A</h2>
        <p>Some text</p>
      </article>
    </li>
    <li>
      <article>
        <h2>Article B</h2>
        <p>Some text</p>
      </article>
    </li>
    <li>
      <article>
        <h2>Article C</h2>
        <p>Some text</p>
      </article>
    </li>
  </ol>
</section>

有没有更好的方法来做到这一点？你有什么想法？

Answer 1

如果您使用列表向博客文章添加时间顺序语义，并且正如@Tomas 提到的每篇文章都是独立的，那么您的代码是可以的（尽管我会删除包含 section - 它没有标题和不必要的）。

但是，正如您所说，还有一些额外的标记。如果您想使用较少的 HTML，您可以删除该列表。你可能认为你已经失去了时间顺序语义，但实际上你可以使用 time 和 pubdate 属性更好地做到这一点。这看起来像：

<article>
    <header>
        <h2>The lolcat singularity</h2>
        <time datetime="2010-05-24" pubdate="pubdate">Today</time>
    </header>
    <p>…</p>
</article>
<article>
    <header>
        <h2>The internet is made of cats</h2>
        <time datetime="2010-05-23" pubdate="pubdate">Yesterday</time>
    </header>
    <p>…</p>
</article>

如果您要在主页上制作文章列表，则必须确定内容是否独立（即您是否会从文章摘要中制作提要）。如果是这样，那么上面的代码仍然可以。如果摘要太短而无法独立，那么您可以选择使用列表，但在那个阶段您不是在处理“文章”语义，因此您的原始类名会有点误导：

<ol class="article-list">
    <li>
        <h2>Article A</h2>
        <p>Some text</p>
    </li>
    <li>
        <h2>Article B</h2>
        <p>Some text</p>
    </li>
    <li>
        <h2>Article C</h2>
        <p>Some text</p>
    </li>
</ol>

并使用.article-list li {} 或.article-list h2 {} 等进行选择。

我实际上最终使用了一个包含article 和time pubdate 的有序列表——语义腰带和吊带方法。我现在想知道我是否应该自己删除列表 :) 你也可以对 hAtom 忘乎所以，但请注意 ARIA 的 role="article" 不应该用于列表项。

虽然 HTML5 是一种演变，但您将从丢弃旧代码、从内容和规范的良好指南开始以及从头开始标记内容中获得最大的好处。 HTH！

Answer 2

根据last editor's draft：

article 元素表示文档、页面、应用程序或站点中的自包含组合，旨在独立分发或重复使用，例如在辛迪加。这可以是论坛帖子、杂志或报纸文章、博客条目、用户提交的评论、交互式小部件或小工具，或任何其他独立的内容项。

正如我所解释的那样，您的使用在语义上非常好，尽管我真的必须首先质疑您对列表的使用。鉴于每篇文章的文本可能比几行多得多，无序列表似乎会使事情变得笨拙。我想你会用css“风格化”项目符号等，如果页面显示时禁用css，我不明白为什么你想要一个项目符号列表。我只是建议

<article>
    <h2>The header</h2>
    <p>Some text</p>
</article>
<article>
    <h2>The header</h2>
    <p>Some text</p>
    <p>And maybe another paragraph</p>
</article>