HTML语义化标签使用指南：header、main、article、section的正确区别-速维云

HTML 语义化标签不是为了让代码看起来高级，而是为了让页面结构更清楚。浏览器、搜索引擎、读屏软件、后续维护代码的人，都能通过标签快速理解：这里是页头、这里是主体、这里是一篇独立内容、这里是一组相关内容。

在实际开发里，很多人最容易混淆 header、main、article、section。它们看起来都像“盒子”，但语义完全不同。本文就围绕这几个标签，讲清楚它们分别适合放什么，以及常见错误该怎么避免。

语义化的价值

早期页面常见写法是大量使用 div，再通过 class 命名区分区域。这样也能实现布局，但 HTML 本身无法表达结构含义。语义化标签的作用，就是把页面结构直接写进标签里。

<div class="header">...</div>
<div class="main">...</div>
<div class="footer">...</div>

上面这种写法对人类还算可读，但对机器来说只是普通 div。如果改成 header、main、footer，页面骨架就更清晰。

header 不是只能放页头

header 表示某个区域的介绍性内容或导航辅助内容。它可以是整个网站的页头，也可以是某篇文章、某个卡片、某个模块内部的标题区域。

<header>
  <h1>网站名称</h1>
  <nav>...</nav>
</header>

这是最常见的全站页头写法，通常包含 Logo、站点标题、导航菜单、搜索入口等内容。但 header 并不等于“页面顶部那个区域”，它更强调“引导和介绍”。

语义化标签的重点是表达结构含义，而不是替代 CSS 布局容器。

main 只能有一个

main 表示页面的主要内容区域。一个页面通常只应该有一个可见的 main，它不应该放在 article、aside、header、footer 或 nav 里面。

<body>
  <header>站点页头</header>
  <main>
    <h1>文章标题</h1>
    <p>文章正文...</p>
  </main>
  <footer>站点页脚</footer>
</body>

main 里应该放页面最核心、最独特的内容。全站重复出现的导航、侧边栏、页脚版权信息，一般不属于 main 的核心内容。

article 强调独立内容

article 表示一块可以独立分发、独立引用、独立理解的内容。常见场景包括博客文章、新闻正文、论坛帖子、评论、商品评价、帮助文档条目等。

<article>
  <header>
    <h1>HTML语义化标签使用指南</h1>
    <p>发布时间：2026-04-30</p>
  </header>
  <p>正文内容...</p>
</article>

判断是否该用 article，可以问自己一个问题：把这块内容单独拿出去，读者还能不能理解它？如果可以，它通常适合用 article；如果必须依赖上下文才能成立，可能更适合 section 或普通 div。

section 强调主题分组

section 表示文档中的一个主题区域，通常应该有标题。它适合把一篇文章、一个页面或一个模块拆成多个有主题的部分。

<article>
  <h1>前端性能优化指南</h1>

  <section>
    <h2>图片优化</h2>
    <p>压缩图片、使用合适格式、开启懒加载。</p>
  </section>

  <section>
    <h2>脚本优化</h2>
    <p>减少阻塞脚本，按需加载非关键资源。</p>
  </section>
</article>

如果只是为了加一层样式容器，不建议使用 section。这种情况用 div 更合适。section 应该代表“这里是一组有主题的内容”，而不是“这里需要一个盒子”。

article 和 section 的区别

article 关注独立性，section 关注主题分组。一个 article 里可以有多个 section，一个页面里也可以有多个 article。

<main>
  <article>
    <h1>文章标题</h1>
    <section>
      <h2>第一部分</h2>
      <p>内容...</p>
    </section>
  </article>
</main>

如果你在写博客详情页，整篇文章通常是 article；文章里的章节可以用 section。如果你在写首页的“最新文章列表”，每一篇文章摘要也可以是一个 article。

nav 和 aside

理解语义化结构时，也经常会碰到 nav 和 aside。nav 用于主要导航链接，比如顶部导航、目录导航、分页导航。不是所有链接列表都需要放进 nav，只有重要导航区域才适合。

aside 表示和主内容相关但不是主线内容的区域，比如侧边栏、相关阅读、广告位、作者信息卡片。它可以在 main 内，也可以在 main 外，具体要看它和主内容的关系。

常见错误

第一种错误是把所有容器都改成 section，以为这样就是语义化。实际上，没有明确主题的样式容器仍然应该用 div。第二种错误是在一个页面里放多个 main，这会让辅助技术难以判断主要内容。

第三种错误是把 article 当成普通内容块使用。如果一块内容不能独立理解，就不要强行使用 article。第四种错误是只换标签、不整理标题层级，导致页面结构看似语义化，实际大纲混乱。

实践建议

写 HTML 结构时，可以先用一句话描述每块内容的意义：这是站点页头，就用 header；这是页面主要内容，就用 main；这是一篇可以独立阅读的文章，就用 article；这是文章里的一个主题章节，就用 section；只是为了布局或样式，就继续用 div。

语义化不是把所有 div 都消灭，而是让重要结构有正确含义。做到这一点，页面会更利于 SEO、无障碍访问和长期维护，团队协作时也更容易理解代码。

文章版权归作者所有，未经允许请勿转载。

THE END

教程
# HTML # 前端开发 # 语义化标签

HTML语义化标签使用指南：header、main、article、section的正确区别