HTML 语义化标签：别再满屏 div 了，给页面起个能懂的名字

早几年写页面，大家特别爱用 <div>。导航是 div，侧边栏是 div，文章正文还是 div，最后整页全是 div 套 div，被人调侃成”div Soup（一锅 div 汤）“。代码能跑，但谁也看不懂哪块是啥。

HTML5 后来补了一批”带名字的容器”——header、nav、main、article……它们渲染出来和 div 没两样，区别全在”含义”上。这一篇就讲清楚：为什么该用它们，以及怎么用才不纠结。

先搞懂：什么是语义化

“语义化”说白了就是：用合适的标签表达内容的含义，而不是只管长什么样。

<div> 是”无语义容器”，它只说”这里有一块”，但不说”这块是导航还是正文”；
<nav> 直接说”这里是导航”，浏览器、搜索引擎、屏幕阅读器一眼就懂。

打个比方：div 像贴了”内容”标签的纸箱，语义标签像贴了”厨具""衣物""书籍”的箱子——后搬家（维护）和查找（SEO/无障碍）时，差别巨大。语义化不是”炫技”，是为了人和机器都能读懂你的页面。

常用语义标签逐个看

<header>：页头 / 区块头

<header>
  <h1>我的博客</h1>
  <p>分享前端学习笔记</p>
</header>

放网站或某篇文章的”头部信息”：站点名、Logo、简介、文章标题等。一个页面可以有多个 header（比如每篇文章自己的头部），不一定只有一个。

<nav>：导航

<nav>
  <a href="/">首页</a>
  <a href="/about">关于</a>
  <a href="/contact">联系</a>
</nav>

放”主要导航链接”。不是所有链接都塞进 nav，只有成组的、主要的导航才用。页脚那堆小链接一般就不放 nav 里。多个 nav 可用 aria-label 区分，如 <nav aria-label="主导航">、<nav aria-label="分页">。

<main>：页面主体

<main>
  <!-- 页面独一无二的核心内容 -->
</main>

<main> 是整个页面最核心、独一无二的内容，比如一篇文章、一个商品详情。一个页面只能有一个 <main>，而且不应包含重复出现的内容（如侧边栏、页脚）。它对屏幕阅读器特别友好——用户能一键跳到主内容，跳过导航。

<article>：独立成篇的内容

<article>
  <h2>今天学了语义化标签</h2>
  <p>收获满满……</p>
</article>

article 表示”可以独立分发、被引用”的内容：一篇博客、一条新闻、一条用户评论。判断标准：把这段内容单独拎出来发到别处，它依然完整易懂，那就用 article。博客列表里每篇帖子都是一个 article。

<section>：有主题的区块

<section>
  <h2>第一章：基础</h2>
  <p>……</p>
</section>

section 是”按主题划分的一块内容”，通常带一个标题。它比 div 多了一层”这是一章/一节”的含义。

article 和 section 容易混。一个简单判断：article 强调”独立性”，section 强调”主题分组”。article 里可以套 section，section 里也可以套 article（比如一个专栏 section 里有多篇 article）。不要为了”有个标题”就无脑用 section——如果只是单纯为了样式分组，div 更诚实。

<aside>：侧边 / 附属内容

<aside>
  <h3>相关推荐</h3>
  <ul>...</ul>
</aside>

放”和主内容相关但不核心”的东西：侧边栏、广告、作者简介、相关链接。它通常在视觉上是侧边，但语义上就是”附属信息”。

<footer>：页脚 / 区块脚

<footer>
  <p>© 2026 我的网站</p>
</footer>

放版权、联系方式、备案号等。和 header 一样，页面可以有多个 footer（比如每篇文章底部的小注）。

一个博客页的完整结构

把上面全串起来：

<body>
  <header>
    <h1>小明的前端笔记</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/tags">标签</a>
      <a href="/about">关于</a>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>语义化标签入门</h2>
        <p>发布于 2026-07-06</p>
      </header>
      <section>
        <h3>什么是语义化</h3>
        <p>……</p>
      </section>
      <footer>
        <p>本文作者：小明</p>
      </footer>
    </article>

    <aside>
      <h3>热门文章</h3>
      <ul>...</ul>
    </aside>
  </main>

  <footer>
    <p>© 2026 小明的前端笔记</p>
  </footer>
</body>

你看，光看标签名就知道每块干嘛，完全不用猜。这就是语义化的魅力。

语义化到底有什么用

别觉得”反正长得一样”，语义化的好处是实打实的：

SEO 更友好：搜索引擎能更准确理解页面结构，该重点收录的正文不会被当成广告忽略；
无障碍更好：屏幕阅读器用户能按”跳到导航""跳到主内容”快速浏览，视障人士体验大幅提升；
代码更好维护：半年后你回来看，<nav> 一眼知道是导航，不用在一堆 div 里找；
未来兼容：浏览器和辅助技术会持续增强对语义标签的支持。

有个经典对比：<div class="nav"> 和 <nav> 长得一样，但前者机器读不懂是导航，后者一读便知。语义化就是”给机器递说明书”。

什么时候还用 div

语义标签虽好，但不是所有容器都要语义化。当一块内容纯粹是为了”布局/样式分组”，没有任何语义含义时，用 <div> 反而最诚实。比如”为了 flex 布局包一层”——这种就用 div，别硬套 section。

一句话：有含义用语义标签，纯布局用 div。另外，<span> 是行内无语义容器，对应块级的 <div>。

常见错误与排查

一个页面多个 main：main 必须唯一，否则屏幕阅读器混乱；
section 没标题：section 通常应带标题，否则和 div 没区别；
用 section 纯粹为了样式：应改 div；
header/footer 乱塞：它们表示”头部/尾部信息”，别把任意内容塞进去；
article 套得太深：过度拆分反而难维护。

动手小练习

把你之前写的一个页面，把里面的 <div class="nav"> 改成 <nav>，div class="header" 改成 <header>；
画一个博客首页的结构图，标出哪里用 header/nav/main/article/aside/footer；
用开发者工具的无障碍树（Accessibility Tree）查看语义化前后的差异；
故意写两个 <main>，看校验工具（如 W3C validator）是否报错。

把它串起来：用语义标签重构一个旧页面

找一个你以前用满屏 <div class="xxx"> 写的页面，按下面的映射重构：<div class="header"> → <header>、<div class="nav"> → <nav>、<div class="main"> → <main>（整页只能有一个）、每篇文章块 → <article>、按主题分的小节 → <section>、侧边栏 → <aside>、页脚 → <footer>。重构后打开开发者工具的无障碍树（Accessibility Tree），对比前后，你会直观看到语义标签如何让结构一目了然。

新手常问（FAQ）

Q1：一个页面能有几个 <main>？ 只能有一个。main 代表页面独一无二的核心内容，多个会让读屏软件混乱。

Q2：<article> 和 <section> 怎么选？ 看”独立性”：这段内容单独拎出去发到别处依然完整，就用 <article>；只是按主题把内容分组，就用 <section>。文章里可以套小节（section），小节里也可以有独立成篇的评论（article）。

Q3：纯布局用的包裹层用什么？ 用 <div>。语义标签是用来表达”含义”的，没有含义的纯布局分组，老老实实用 div 最诚实。

这一篇你该记住的

语义化是用”带含义的标签”代替满屏 div：header/footer 是头脚（可多个），nav 是主导航，main 是页面唯一核心（只能一个），article 是独立成篇的内容，section 是按主题分块，aside 是附属侧边信息。语义化同时利好 SEO、无障碍和可维护性；纯布局用途仍用 div。判断 article vs section：独立性 vs 主题分组。

页面结构、文字、表格、表单、语义都齐了，但声音、影像、地图这些”动起来、出声”的内容还没讲。下一篇我们讲 HTML 多媒体，看看 audio、video、iframe 怎么把媒体塞进页面。

前端开发