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。

HTML5语义文章列表

2 个答案: