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

如果您使用列表将时间顺序语义添加到weblog帖子，并且@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 {}等选择

Fwiw我实际上最终使用了一个包含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>

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

2 个答案: