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

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!