语义化标签

HTML5 引入了一批"语义化标签",让结构一眼就能看懂——这是头部、那是导航、这是主体内容。它们功能上和 div 一样,但语义更清晰,搜索引擎和无障碍工具更友好。这一章是现代 HTML 的精髓。

1. 为什么需要语义化?

看两段代码,功能完全一样,但可读性天差地别:

<!-- 反面教材:全是 div,看不出含义 -->
<div class="header">
  <div class="nav">
    <div class="item">首页</div>
  </div>
</div>
<div class="main">
  <div class="post">……</div>
</div>
<div class="footer">……</div>

<!-- 正面教材:语义化标签,一眼看懂结构 -->
<header>
  <nav>……</nav>
</header>
<main>
  <article>……</article>
</main>
<footer>……</footer>

用 div 写的"div 汤"(div soup)只有样式,看不出含义;语义化标签则一目了然。语义化的价值:

SEO 友好:Google、百度会根据语义标签理解页面结构,合理加权。
无障碍:读屏软件(盲人用户用)能告诉用户"这是导航""这是主体内容",支持快捷键跳转。
代码可维护:同事接手项目时能一眼看懂结构。
未来兼容:浏览器、爬虫、各种工具都按标准解析语义标签。

2. 文档级语义标签

一个完整网页的"骨架"通常长这样:

<header>
  <h1>我的博客</h1>
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
    <a href="/contact">联系</a>
  </nav>
</header>

<main>
  <article>
    <h2>文章标题</h2>
    <p>正文段落……</p>
    <section>
      <h3>第一小节</h3>
      <p>……</p>
    </section>
    <section>
      <h3>第二小节</h3>
      <p>……</p>
    </section>
  </article>

  <aside>
    <h3>相关推荐</h3>
    <ul>
      <li>另一篇文章</li>
    </ul>
  </aside>
</main>

<footer>
  <p>© 2026 我的博客</p>
</footer>

3. 逐个讲解

header:页面或区块的顶部。常放 logo、标题、导航、搜索框。一个页面可以有多个 header(比如每篇文章内都有自己的 header)。
nav:主导航菜单的容器。一个页面通常 1 ~ 2 个(主导航 + 页脚导航)。不要把所有链接都包进 nav——只有"主要导航"才用,比如文章内的相关链接不属于 nav。
main:页面主体内容,一个页面只能有一个。导航、广告、侧边栏、页脚都不算主体。读屏软件支持快捷键直接跳到 main。
article:独立的、可以单独分发的内容。如一篇博客、一条新闻、一个论坛帖子、一条评论。判断标准:把它复制到别处或 RSS 输出,内容是否仍然完整有意义?是就用 article。
section:按主题分组的内容,通常自带标题。一个 article 内部常常用多个 section 分小节,section 内部也可以再嵌套 article。
aside:与主体相关但非核心的内容。如侧边栏、相关推荐、广告、引用框。放在 aside 里的内容拿掉不影响主体阅读。
footer:页面或区块的底部。常放版权、联系方式、备案号、友情链接。一个页面可以有多个 footer。

4. article vs section 怎么选?

这两个最容易混淆。判断方法:

内容可以独立存在(单独发到 RSS、复制到别的页面仍有意义)→ 用 article。
只是按主题分组(拿掉这个分组上下文不完整)→ 用 section。

两者可以互相嵌套:article 内多个 section 分小节,section 内的评论是 article。下面的例子是典型用法:

<article>
  <h1>2026 年度总结</h1>

  <section>
    <h2>工作</h2>
    <p>今年完成了 5 个项目……</p>
  </section>

  <section>
    <h2>生活</h2>
    <p>……</p>
  </section>

  <section>
    <h2>旅行</h2>
    <p>……</p>
  </section>
</article>
<!-- section 用于"按主题分组 + 自带标题";
     article 用于"可以独立分发的内容"。 -->

5. 实用辅助标签

除了上面几个,还有一些很实用的语义标签:

figure:插图(图 + 说明)容器,配 figcaption 写图说明。
figcaption:figure 的标题。
time:时间,配 datetime 属性让机器可读。
mark:高亮(像荧光笔)。
address:联系方式(作者、网站所有者)。
blockquote:块级引用。

6. details 和 summary — 纯 HTML 折叠

FAQ 页常用"折叠面板",以前必须用 JS 实现。HTML5 提供了 details + summary,纯 HTML 就能折叠:

<details>
  <summary>常见问题:如何退款?</summary>
  <p>请在订单页点击"申请退款",客服会在 24 小时内审核。</p>
</details>

<details open>
  <summary>已经默认展开的问题</summary>
  <p>……</p>
</details>
<!-- details + summary 实现"折叠面板",
     纯 HTML 实现,不需要 JS。FAQ 页常用。 -->

默认折叠,加 open 属性默认展开。点击 summary 切换状态。如果要改样式(箭头图标等),再配合少量 CSS 即可。

7. 什么时候仍然用 div?

语义化标签不是要消灭 div。div 仍然是"通用容器",在以下场景合理:

纯粹为了布局(如外层 wrapper、栅格行、容器),没有特殊语义。
需要套一层做样式分组,但内容不属于任何语义类别。
配合 CSS 实现复杂组件(轮播、模态框的外层)。

原则是:先看有没有合适的语义标签,没有再用 div。每写一个 div,先问问自己——这是 header? main? section? nav? 都不是才用 div。

8. 语义化的 SEO 价值

搜索引擎爬虫读你的 HTML 时,会重点看几个地方:

title(页面标题)、h1(主标题)——决定页面主题。
article 内的内容——识别为"核心内容",加权。
nav、aside、footer——识别为"非核心",降权。
h2 ~ h6——理解内容结构。

所以正确使用语义标签,等于告诉搜索引擎"这是核心内容、那是导航",有助于你的页面在搜索结果中排名提升。

9. 无障碍(a11y)价值

视障用户用读屏软件(如 NVDA、VoiceOver)浏览网页时,会朗读出每个元素的语义。比如读到 nav 会说"导航区,共 5 个链接";遇到 main 会允许用户按快捷键直接跳过广告进入主体。这种体验是 div 永远给不了的。

养成写语义标签的习惯,等于让你的网站对所有人开放——这是技术人的社会责任。

10. 实战示例:完整博客文章页

把所有语义标签组合起来,做一个完整的博客文章页:

<header>
  <h1>我的博客</h1>
  <nav>
    <a href="/">首页</a>
    <a href="/about">关于</a>
    <a href="/contact">联系</a>
  </nav>
</header>

<main>
  <article>
    <h2>文章标题</h2>
    <p>正文段落……</p>
    <section>
      <h3>第一小节</h3>
      <p>……</p>
    </section>
    <section>
      <h3>第二小节</h3>
      <p>……</p>
    </section>
  </article>

  <aside>
    <h3>相关推荐</h3>
    <ul>
      <li>另一篇文章</li>
    </ul>
  </aside>
</main>

<footer>
  <p>© 2026 我的博客</p>
</footer>

header + nav + main(article 内嵌 section)+ aside + footer——结构清晰、语义明确,SEO 和无障碍双友好。

小结

这一章你学会了 HTML5 全套语义标签,知道了 article/section 的区别,理解了语义化对 SEO 和无障碍的价值。原则:先找语义标签,再用 div。下一篇我们看让网页"动起来"的标签——音视频与嵌入。

← 上一篇表单

下一篇音视频与嵌入 →

✈️💬