将<article>元素嵌套在<li>元素内，在语义上是否正确？

Question

使用HTML5，将<article>元素放置在<li>元素内是否语义上正确？一个适用于此情况的场景是博客上的最新或热门文章列表。考虑以下示例：

<section id="popular">
  <div class="blurb">
    <h2>Popular Articles</h2>
    <p>The most popular posts from my blog.</p>
  </div>
  <ul>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
    <li>
      <article>
        <h3>Article</h3>
        <p>An excerpt from the article.</p>
      </article>
    </li>
  </ul>
</section>

下面是应该出现的内容：

热门文章

来自我的博客的最受欢迎的帖子。

• 文章

  文章摘录。

• 文章

  文章摘录。

• 文章

  文章摘录。

对我而言，这似乎是标记信息的绝佳方式。我的唯一问题是，在此方式中将<article>元素嵌套在<li>元素内是否正确。

- Angus Fretwell

---

你可能想把 class="blurb" 从一个 div 改成一个 header，因为它在语义上被用作一个 section 的标题。 - Andrew De Andrade

此外，根据HTML5的新大纲，article内的每个标题都可以是h1。 - apnerve

相关问题：https://dev59.com/_Y7ea4cB1Zd3GeqPDZ3m - ma11hew28

Answer 1

这段内容在语义上没有错误，但其实并不必要。除非你想利用它们的默认样式，否则<ul>和<li>元素在这里并没有什么作用。直接将<article>标签放在<section id="popular">内部就足够了，同时可以减少页面复杂度和大小。

要确定在HTML中某些东西是否语义正确且有用，请问自己一些问题。你是否使用每个元素的预期目的？例如，如果你把<a>元素用于按钮而不是超链接，那就不符合语义，因为<a>是用于超链接，<button>是用于按钮。你是否需要每个正在使用的元素来传达关于你内容的所有语义信息（章节、标题、链接等）？是否有任何有意义的信息，你打算通过适当的元素使用来表达，但是没有被表达？过多的无意义元素通常不会有害，但会增加混乱，并且可能意味着你可视化传达的语义区别，在屏幕阅读器、自动机器人或以不同格式呈现信息的浏览器中不能理解。

- Brian Campbell

---

我想你可以认为<ul>/<li>元素是不必要的，但我觉得它们为文章列表添加了一些意义。 - Angus Fretwell

去年在WHATWG的邮件列表中有关于把<article>直接放在<ul>内（没有<li>）的有效性讨论。共识认为这样做对屏幕阅读器有益，语义上“并不不正确”，而且在主要浏览器中也能运作。我已找不到该讨论在我的收件箱中的记录，需要在档案中找到它。尽管如此，这是需要考虑的一点。 - traq

Answer 2

如果在所有实现中都正确显示，我不知道为什么会不正确... HTML5旨在具有灵活性。此外，文档指出：

可以使用此元素的上下文： 预期流内容的位置。

这似乎是大多数可用元素的上下文。

- Robert S Ciaccio

---

感谢你确认这是有效的HTML5，但它是语义化HTML吗？ - ma11hew28