在< ol>，< ul>和< li>的HTML 5中使用< article>标记的语义正确方法是什么？ [英] What is the semantically correct way to use the `<article>` tag in HTML 5, with `<ol>, <ul>, and <li>`?

问题描述

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

 < ol class =section> 
< li class =article> 
< h2> Article A< / h2> 
< p>一些文字< / p> 
< / li> 
< li class =article> 
< h2>文章B< / h2> 
< p>一些文字< / p> 
< / li> 
< li class =article> 
< h2>文章C< / h2> 
< p>一些文字< / p> 
< / li> 
< / ol> 
  

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

 < section> 
< ol> 
< li> 
<文章> 
< h2>文章A< / h2> 
< p>一些文字< / p> 
< / article> 
< / li> 
< li> 
<文章> 
< h2> B条< / h2> 
< p>一些文字< / p> 
< / article> 
< / li> 
< li> 
<文章> 
< h2>文章C< / h2> 
< p>一些文字< / p> 
< / article> 
< / li> 
< / ol> 
< / section> 
  

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

如果您使用列表向博客帖子添加时间顺序语义，提到每篇文章都是自包含的，那么你的代码是可以的（我会删除包含部分但是 - 它没有标题且不必要）。

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

 < article> 
< header> 
< h2> lolcat奇点< / h2> 
< time datetime =2010-05-24pubdate =pubdate>今日< / time> 
< / header> 
< p> ...< / p> 
< / article> 
<文章> 
< header> 
< h2>互联网由猫组成< / h2> 
< time datetime =2010-05-23pubdate =pubdate>昨天< / time> 
< / header> 
< p> ...< / p> 
< / article> 
  

如果你在主页上列出文章列表，你必须决定是否内容是独立的（即，你会从文章摘要中提供一个内容）。如果是这样，那么上面的代码仍然没问题。如果摘要太短而不能自包含，那么你可以选择使用一个列表，但是在那个阶段你并没有处理文章语义，所以你的原始类名会有点误导：

 < ol class =article-list> 
< li> 
< h2>文章A< / h2> 
< p>一些文字< / p> 
< / li> 
< li> 
< h2> B条< / h2> 
< p>一些文字< / p> 
< / li> 
< li> 
< h2>文章C< / h2> 
< p>一些文字< / p> 
< / li> 
< / ol> 
  

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

Fwiw我实际上最终使用了一个包含文章 time pubdate - 语义带和吊带方法。我现在想知道我是否应该自己删除列表:)你也可以使用hAtom，但请注意ARIA的 role =article不应该使用列表项目。

虽然HTML5是一种演变，但从内容和指南的良好指南开始，您将从抛弃旧代码中获得最大收益。 ，并从头开始打分。 HTH！

I currently have an ordered list that I want to markup using the new HTML 5 attributes. It looks like this:

<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>

It seems the only way to keep the list AND use HTML 5 tags is to add a whole bunch of unnecessary divs:

<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>

Is there a better way to do this? What are your thoughts?

解决方案

If you’re using a list to add chronological order semantics to weblog posts, and as @Tomas mentioned each article is self-contained, then your code is ok (I’d remove the containing section though — it’s untitled and unnecessary).

However as you say there’s some extra markup. If you want to use less HTML, you can remove the list. You may think that you’ve then lost the chronological order semantics, but you can actually do this better using time with the pubdate attribute. This would look like:

<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>

If you’re making a list of articles on the homepage, you’ll have to decide if the content stands alone (i.e. would you make a feed out of the article summaries). If so then the above code is still fine. If the summaries are too short to be self-contained, then you could choose to use a list, but at that stage you’re not dealing with "article" semantics, so your original classnames would be a little misleading:

<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>

and select using .article-list li {} or .article-list h2 {} etc.

Fwiw I actually ended up using an ordered list containing article with time pubdate — the semantic belt and suspenders approach. I’m now wondering if I should remove the list myself :) You can also get carried away with hAtom, but note that ARIA’s role="article" shouldn’t be used on list items.

While HTML5 is an evolution, you’ll get the most benefit from throwing out your old code, starting from the content and a good guide to the spec, and marking stuff up from scratch. HTH!

这篇关于在< ol>，< ul>和< li>的HTML 5中使用< article>标记的语义正确方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！