在<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>.您是否需要使用每个元素以传达有关您的内容的所有语义信息(部分,标题,链接等)？是否有任何意义,你打算传达的不是用适当的元素表达？拥有许多额外无意义的元素通常是无害的,但它会增加混乱,这可能意味着您在视觉上传达的语义差异,但不是以屏幕阅读器或自动机器人或浏览器呈现信息的方式进行编码一种不同的格式可以理解.