在 <li> 列表中使用 <article> 和 <figure>

Question

在使用 XHTML 编码多年后，我终于开始使用 HTML5 来构建一个简单的投资组合网站。

我正在构建的网站在主页上显示 12 个缩略图。当您滚动缩略图时，它会显示一个标题。图片和标题都链接到帖子。

旧的 XHTML 方式

<div class="thumb">
<a href="portfolio_1" title="Portfolio item 1"><img width="225" height="150" src="images/thumb_1.jpg" alt="Portfolio item 1" /></a>
<h3><a href="portfolio_1" title="Portfolio item 1">Portfolio item 1</a></h3>
</div>

新方式

<ol>
<li class="thumb">
<article>    
<figure>
<a href="portfolio_1" title="Production test 8"><img width="225" height="150"   src="images/thumb_1.jpg" alt="Portfolio item 1" /></a>
<figcaption><a href="portfolio_1" title=""><h3>Portfolio item 1</h3></a></figcaption>
</figure>
</article>
</li>
</ol>

对于新代码，我为每个投资组合项目使用了一个列表。在列表中，我创建了一篇文章，然后将图形标签用于图像和图像标题。

我的问题 这是 HTML5 语义矫枉过正吗？代码比原始 XHTML 版本多得多，我想知道完全放开列表是否更好。

期待您的反馈。

Answer 1

首先，不需要article 标签；这是一张图片，不是一段文字。

其次，除非您有多个样式列表（除了您的nav li），否则您不需要类样式，只需要您的常规ol li {}，因此无需对列表进行分类。

最后，我刚刚通过 W3.org 验证器运行了一个页面，并被告知不能将图形放在有序列表中。没有给出任何理由，所以我不能说为什么，但正如 robertc 所说，你的旧 XHTML 方法现在和永远都可以正常工作（只需使用 HTML5 doctype）。

PS，当使用 HTML5 doctype 时，您的 img 标签可以简化，添加 figcaption 以生成可搜索的标题：

figure

<img src="images/cache.png" alt="alternative text">
    <figcaption>captionated text</figcaption>

/figure