将嵌套在语义上是否正确？内的元素元素？

Question

使用 HTML5，将

元素放置在

元素中在语义上是否正确。这被证明有用的情况是博客上最近或流行文章的列表。考虑以下情况：

<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>

如下所示：

热门文章

我的博客中最受欢迎的帖子。

• 文章

  文章摘录。

• 文章

  文章摘录。

• 文章

  文章摘录。

对我来说，这似乎是标记信息的绝佳方式。我唯一的问题是，以这种方式将

元素嵌套在

元素中是否正确。

Answer 1

它在语义上没有任何错误，但实际上没有必要。

和
• 元素实际上并没有在此处添加任何内容，除非您利用它们的默认样式。只需将
  
  标记直接放在

  中就足够了，它可以降低页面的复杂性它的大小。

要确定 HTML 中的某些内容在语义上是否正确且有用，请问自己几个问题。您是否将每个元素用于其预期目的？例如，如果您对按钮使用 元素，那么在语义上就不正确，因为 用于超链接，则用于链接。 用于按钮。您是否需要使用的每个元素来传达有关内容的所有语义信息（章节、标题、链接等）？您是否想传达一些有意义的信息，但没有通过使用适当的元素来表达？拥有大量额外的无意义元素通常没有害处，但它会增加混乱，并且可能意味着您在视觉上传达语义区别，但没有以屏幕阅读器或自动机器人或浏览器呈现信息的方式进行编码。不同的格式可能有意义。

Answer 2

如果它在所有实现中都正确显示，我不知道为什么它会不正确...... HTML5 意味着灵活。另外，文档指出：

该元素可以存在的上下文
用过的：
预期流量内容的地方。

这看起来是大多数可用元素的上下文。