在<li>元素中嵌套<article>元素在语义上是否正确？</li> </article>

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>元素中是否正确。

Answer 1

关于它没有任何语义错误，但它并不是必需的。除非您正在利用其默认样式，否则<ul>和<li>元素并未在此处添加任何内容。只需将<article>标记直接放在<section id="popular">中即可，这样可以降低页面的复杂程度和大小。

要确定HTML中语义是否正确且有用，请问自己几个问题。您是否将每个元素用于其预期目的？例如，如果对按钮使用<a>元素，则在语义上不正确，因为<a>用于超链接，<button>用于按钮。您是否需要使用每个元素以传达有关您的内容的所有语义信息（部分，标题，链接等）？您是否打算通过使用适当的元素来传达不表达的内容？拥有许多额外无意义的元素通常是无害的，但它会增加混乱，这可能意味着您在视觉上传达的语义差异，但不是以屏幕阅读器或自动机器人或浏览器呈现信息的方式进行编码一种不同的格式可以理解。

Answer 2

如果它在所有实现中都能正确显示，我不知道为什么它会不正确...... HTML5意味着灵活。此外，the documentation声明：

  

此元素可以使用的上下文   用过的：       在哪里有流量内容。

这看起来是大多数元素的背景。