HTML5语义化标签到底该怎么用才对？

璐莹 Dev 提问于 2026-03-15 17:48:30 阅读 45

前端

我最近在写一个博客页面，想用 HTML5 的语义化标签，但有点搞不清 <article>、<section> 和 <div> 到底啥时候该用哪个。

比如文章列表里的每一篇，我用了 <article>，但文章内部的小节我又套了 <section>，结果同事说这样可能不对。查了 MDN 也还是有点迷糊，有没有更实际的判断标准？

这是我目前的结构：

<main>
  <article>
    <h2>文章标题</h2>
    <section>
      <h3>小节一</h3>
      <p>内容...</p>
    </section>
    <section>
      <h3>小节二</h3>
      <p>内容...</p>
    </section>
  </article>
</main>

Canvas HTML

我来解答赞 6 收藏

反馈

1 条解答

程序员艺涵 Lv1

你的结构其实没大问题，但确实有优化空间。让我把这个问题讲透。

先说核心区别

、

的选择，关键看两点：内容的独立性和标题结构。

意味着"这是一块独立完整的内容，拿到别处也有意义"。一篇博客文章、评论区的一条评论、一篇新闻报道，这些用

没问题。

意味着"这是文档某个逻辑分区"，通常应该搭配标题（h2-h6）使用。它是文档结构的一部分，单独拿出来意义不完整。

就是纯粹没语义的容器，用来套样式和布局，跟语义完全无关。

你的代码分析

你的结构：

<main>

  <article>

    <h2>文章标题</h2>

    <section>

      <h3>小节一</h3>

      <p>内容...</p>

    </section>

    <section>

      <h3>小节二</h3>

      <p>内容...</p>

    </section>

  </article>

</main>

这样用是可以的。逻辑是：外层

代表"这是一整篇博客文章"，里层

代表"文章的这两个章节"。符合规范。

但可以更考究一点。如果你的小节内容比较长，完全可以反过来：

<main>

  <article>

    <header>

      <h2>文章标题</h2>

    </header>

    <section>

      <h3>小节一</h3>

      <p>内容...</p>

    </section>

    <section>

      <h3>小节二</h3>

      <p>内容...</p>

    </section>

    <footer>作者信息、发布时间等</footer>

  </article>

</main>

和

是

很好的搭档，用来包裹文章级别的元信息。

一个简单的判断标准

我平时判断就问自己两个问题：

第一个问题：这块内容单独拿走还能不能看？
能，用

。比如评论区一条评论，单独显示完全合理。
不能，用

。比如文章里的一个章节，单独显示没意义。

第二个问题：这里需不需要加标题？
需要加标题（h2-h6），优先考虑

。
不需要标题，只是为了包起来写样式，用

。

实际例子对比

博客列表页的正确用法：

<main>

  <h1>博客列表</h1>

  <article>

    <h2>第一篇文章标题</h2>

    <p>摘要...</p>

    <a href="/post/1">阅读全文</a>

  </article>

  <article>

    <h2>第二篇文章标题</h2>

    <p>摘要...</p>

    <a href="/post/2">阅读全文</a>

  </article>

</main>

这里每篇博客用

是对的，因为每篇都可以独立存在。

文章详情页可以这样：

<main>

  <article>

    <header>

      <h1>文章标题</h1>

      <time>2024-01-15</time>

    </header>

    

    <section>

      <h2>背景介绍</h2>

      <p>...</p>

    </section>

    

    <section>

      <h2>实现原理</h2>

      <p>...</p>

    </section>

    

    <section>

      <h2>代码示例</h2>

      <pre><code>console.log('hello');</code></pre>

    </section>

    

    <footer>

      <p>标签: JavaScript, 前端</p>

    </footer>

  </article>

</main>

总结一下

你的用法没大问题，

里面套

完全符合规范。同事可能是在意一些细节，比如

里的

HTML5语义化标签到底该怎么用才对？

应该用 包裹之类的。 核心就记住：能用 的时候说明内容独立性强，用 的时候说明它是文档结构的一部分，两者都不适合时才用 。 回复 点赞 2026-03-16 14:30

应该用
包裹之类的。

核心就记住：能用
的时候说明内容独立性强，用
的时候说明它是文档结构的一部分，两者都不适合时才用
。

点赞
2026-03-16 14:30