html - 有很多嵌套元素不好吗？

Question

<!-- beginning of main-container  -->
<div class="main-container">
  <main>
    <section>
      <h3>Featured Stories</h3>
      <figure>
        <a href="#"><img src="bird-story.jpg" alt="A red-flanked bluetail roosting on the grounds of Library" title="A red-flanked bluetail roosting on the grounds of Library" /></a>
        <footer>
          <a href="#"><h4>Rare bird attracts crowds</h4></a>
          <figcaption>A red&dash;flanked bluetail roosting on the grounds of Library is popular with birders&period;</figcaption>
        </footer>
      </figure>
    </section>
  </main>
</div>
<!-- end of main-header -->

我读到 HTML 应该是语义化的，这意味着您应该描述内容的含义而不是它的外观。大家觉得我过分了吗？有时，当我尝试设计它时，它会让我感到困惑。

Answer 1

嵌套元素太多也不错。不好的是有太多不必要的元素。拥有不必要的元素会增加您的 DOM，并且会减慢 DOM 操作过程(如果执行的话)。

在你的 html 中，

• 如果只有 1 个部分，您可以去掉 section 标签在 ma​​in 内。

• 在 a 中包裹 h4 是无效的 html w.r.t 语义(内联 block 元素中的 block 级元素)。应该用过反过来(a inside h4)

• footer 标签也可以省略。但同样，这将取决于如何您需要更多关注 figcaption w.r.t seo。

绝对没有这样的规则，一切都是关于在编写 HTML 时有一个视角。