HTML5语义文章列表

Question

我正在做一个经典的文章列表，我想同时使用figure和time元素：

<li>
   <article>
      <figure>
         <a><img alt="Artile thumnbail"/></a>
         <figurecaption>
             <h3><a>Article Title</a></h3>
         </figurecaption>
      </figure>
      <time pubdate="xxx">xxx</time>
   </article>
</li>

这是正确的写法吗？

Answer 1

标记的名称是figcaption，而不是figurecaption。除此之外，代码看起来很好--但我不会在自己的代码中包装那么多元素。为什么需要figure和figcaption元素？没有它们，它更具语义--文章标题实际上不是图像的标题，而是一个独立的标题。请记住，大多数图像都不需要figure。

我会这样写的：

<li>
    <article>
         <a>
             <img alt="Article thumbnail"/>
             <h3>Article title</h3>
         </a>
         <time pubdate="xxx">xxx</time>
    </article>
</li>

没有这些元素，您可以组合<a>元素，并使用它将<img>和<h3>包装在一起。

Answer 2

文章定义为：

文档、页面、应用程序或站点中的自含式合成，旨在独立分发或可重用，例如在联合中。这可以是论坛帖子、杂志或报纸文章、博客条目或任何其他独立的内容项。(来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article)

对于文章列表，您可能不应该使用文章标记，而应该使用您正在使用的li标记或div。