我目前有一个订单列表,我想使用新的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>
有没有更好的方法来做到这一点？你怎么看？
解决方法
如果您正在使用列表来添加时间顺序语义到博客帖子,而且@Tomas提到每篇文章都是自包含的,那么你的代码是确定的(我将删除包含的部分 – 它是无标题的,不必要的).
不过你说有一些额外的标记.如果要使用较少的HTML,可以删除列表.您可能会认为您已经失去了按时间顺序的语义,但实际上可以使用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我实际上最终使用包含时间公式的文章的排序列表 – 语义带和挂件方法.我现在想知道我是否应该删除列表:)你也可以用hAtom被带走,但请注意,ARIA的角色=“文章”不应该在列表项中使用.
虽然HTML5是一个演变,但是从内容开始,从原始的代码开始,您可以获得最大的收益,并从头开始标记内容. HTH！