翻开十年前的网页源码，你会看到满屏的 <div>——这就是所谓的”div 汤”。HTML5 引入的语义化标签彻底改变了这一局面。
🎯 什么是语义化
语义化（Semantic HTML）是指使用恰当的标签来表达内容的含义，而不仅仅是外观。
<!-- ❌ 非语义化：只关注外观 --><div class="header"> <div class="nav">...</div></div><div class="main"> <div class="article">...</div></div><div class="footer">...</div>
<!-- ✅ 语义化：表达含义 --><header> <nav>...</nav></header><main> <article>...</article></main><footer>...</footer>两段代码在浏览器中的显示效果可能完全相同，但对机器和人的意义截然不同。
为什么要语义化
语义化带来的好处覆盖多个层面：
| 维度 | 好处 |
|---|---|
| SEO | 搜索引擎更容易理解页面结构，提升排名 |
| 可访问性 | 屏幕阅读器能准确朗读内容，帮助视障用户浏览 |
| 可维护性 | 代码结构清晰，团队协作更高效 |
| 开发效率 | 减少 class 命名负担，CSS 选择器更简洁 |
🤔 实际场景：屏幕阅读器遇到 <nav> 会告诉用户”这是导航区域”，而 <div class="nav"> 只是一个普通容器，用户需要逐个链接听取才能理解这是导航。
文档结构标签
HTML5 定义了一套完整的文档结构标签：
┌─────────────────────────────────────────────────┐│ <header> ││ ┌─────────────────────────────────────────┐ ││ │ <nav> │ ││ └─────────────────────────────────────────┘ │└─────────────────────────────────────────────────┘┌─────────────────────────────────────────────────┐│ <main> ││ ┌──────────────────────┐ ┌──────────────┐ ││ │ <article> │ │ <aside> │ ││ │ ┌────────────────┐ │ │ │ ││ │ │ <section> │ │ │ 侧边栏 │ ││ │ └────────────────┘ │ │ │ ││ │ ┌────────────────┐ │ │ │ ││ │ │ <section> │ │ │ │ ││ │ └────────────────┘ │ │ │ ││ └──────────────────────┘ └──────────────┘ │└─────────────────────────────────────────────────┘┌─────────────────────────────────────────────────┐│ <footer> │└─────────────────────────────────────────────────┘<header> 页眉
表示页面或区块的头部，通常包含标题、logo、导航等：
<!-- 页面级 header --><header> <img src="logo.svg" alt="公司 Logo" /> <h1>网站名称</h1> <nav>...</nav></header>
<!-- 文章级 header --><article> <header> <h2>文章标题</h2> <p>作者：张三 | 发布于 2025-01-15</p> </header> <p>文章内容...</p></article>🔶 注意：<header> 不一定只出现一次，每个 <article> 或 <section> 都可以有自己的 <header>。
<nav> 导航
包含页面主要的导航链接：
<nav aria-label="主导航"> <ul> <li><a href="/">首页</a></li> <li><a href="/products">产品</a></li> <li><a href="/about">关于我们</a></li> <li><a href="/contact">联系我们</a></li> </ul></nav>🔶 注意：不是所有链接组都要用 <nav>，它只用于主要导航。页脚的次要链接可以直接用 <ul> 或 <footer>。
<main> 主内容
页面的主体内容区域，每个页面只能有一个：
<body> <header>...</header> <main> <!-- 页面核心内容 --> <h1>产品介绍</h1> <article>...</article> </main> <footer>...</footer></body>✅ 可访问性：屏幕阅读器用户可以通过快捷键直接跳转到 <main>，跳过重复的导航区域。
<article> 独立内容
表示可独立分发的完整内容单元，如博客文章、新闻报道、论坛帖子：
<article> <header> <h2>如何学习前端开发</h2> <time datetime="2025-01-15">2025年1月15日</time> </header> <p>前端开发是一个不断发展的领域...</p> <footer> <p>标签：前端, 学习</p> </footer></article>🤔 判断标准：如果这块内容被复制到其他网站仍然有意义（如 RSS 订阅），就应该用 <article>。
<section> 章节
表示文档中的一个主题分组，通常有标题：
<article> <h1>JavaScript 入门指南</h1>
<section> <h2>变量与数据类型</h2> <p>JavaScript 中有三种声明变量的方式...</p> </section>
<section> <h2>函数</h2> <p>函数是 JavaScript 的一等公民...</p> </section>
<section> <h2>对象与数组</h2> <p>对象是键值对的集合...</p> </section></article><aside> 侧边栏
表示与主内容相关但可以独立存在的辅助内容：
<main> <article> <h1>深入理解 React Hooks</h1> <p>React Hooks 是 React 16.8 引入的新特性...</p> </article>
<aside> <h2>相关文章</h2> <ul> <li><a href="#">React 组件设计模式</a></li> <li><a href="#">Vue 3 Composition API</a></li> </ul>
<h2>作者简介</h2> <p>张三，前端开发者，专注于...</p> </aside></main><footer> 页脚
表示页面或区块的底部，通常包含版权信息、联系方式等：
<footer> <nav aria-label="页脚导航"> <a href="/privacy">隐私政策</a> <a href="/terms">服务条款</a> </nav> <p>© 2025 公司名称. 保留所有权利.</p></footer>文本语义标签
除了结构标签，HTML5 还提供了丰富的文本语义标签：
<time> 时间
机器可读的日期/时间：
<p> 文章发布于 <time datetime="2025-01-15T10:30:00+08:00">2025年1月15日 上午10:30</time></p>
<p> 活动将在 <time datetime="2025-03-20">3月20日</time> 举行， 持续 <time datetime="PT2H30M">2小时30分钟</time>。</p>datetime 属性使用 ISO 8601 格式，便于搜索引擎和日历应用解析。
<mark> 高亮
表示与当前上下文相关的突出文本：
<p>搜索结果中包含关键词 "<mark>JavaScript</mark>" 的文章：</p>
<!-- 也可用于标注重要更新 --><p><mark>更新：</mark>该 API 已在 v2.0 中废弃。</p><abbr> 缩写
表示缩写或首字母缩略词：
<p> <abbr title="HyperText Markup Language">HTML</abbr> 是构建网页的基础语言。 学习 <abbr title="Cascading Style Sheets">CSS</abbr> 可以美化页面样式。</p>鼠标悬停时会显示完整含义，屏幕阅读器也会朗读 title 内容。
<cite> 引用来源
标注作品的标题（书籍、电影、论文等）：
<p>正如 <cite>JavaScript 高级程序设计</cite> 一书所说...</p>
<blockquote> <p>简单是终极的复杂。</p> <footer>—— <cite>达芬奇</cite></footer></blockquote><code> 与 <pre>
代码和预格式化文本：
<!-- 行内代码 --><p>使用 <code>console.log()</code> 输出调试信息。</p>
<!-- 代码块 --><pre><code>function greet(name) { return `Hello, ${name}!`;}</code></pre><figure> 与 <figcaption>
自包含的内容（图片、图表、代码示例等）及其标题：
<figure> <img src="chart.png" alt="2024年销售趋势图" /> <figcaption>图 1：2024年各季度销售额对比</figcaption></figure>
<figure> <pre><code>const sum = (a, b) => a + b;</code></pre> <figcaption>示例：ES6 箭头函数语法</figcaption></figure><address> 联系信息
表示联系信息（不仅限于地址）：
<address> 作者：<a href="mailto:author@example.com">张三</a><br /> 地址：北京市朝阳区 xxx 路 xxx 号</address><details> 与 <summary>
可展开/折叠的内容：
<details> <summary>查看更多信息</summary> <p>这里是展开后显示的详细内容...</p> <ul> <li>详情 1</li> <li>详情 2</li> </ul></details>
<!-- 默认展开 --><details open> <summary>常见问题</summary> <p>这里是默认展开的内容...</p></details>这是原生 HTML实现的折叠面板，无需 JavaScript！
🎯 实战：语义化重构
将一个”div 汤”页面重构为语义化结构：
重构前
<div class="wrapper"> <div class="header"> <div class="logo">TechBlog</div> <div class="nav"> <a href="/">首页</a> <a href="/articles">文章</a> <a href="/about">关于</a> </div> </div>
<div class="content"> <div class="main"> <div class="post"> <div class="post-header"> <div class="title">深入理解闭包</div> <div class="meta">2025-01-15 | 前端开发</div> </div> <div class="post-body"> <p>闭包是 JavaScript 中的核心概念...</p> </div> </div> </div>
<div class="sidebar"> <div class="widget"> <div class="widget-title">热门文章</div> <div class="widget-content">...</div> </div> </div> </div>
<div class="footer"> <div class="copyright">© 2025 TechBlog</div> </div></div>重构后
<body> <header> <a href="/" class="logo">TechBlog</a> <nav aria-label="主导航"> <a href="/">首页</a> <a href="/articles">文章</a> <a href="/about">关于</a> </nav> </header>
<main> <article> <header> <h1>深入理解闭包</h1> <p> <time datetime="2025-01-15">2025-01-15</time> | <span>前端开发</span> </p> </header> <p>闭包是 JavaScript 中的核心概念...</p> </article>
<aside> <section> <h2>热门文章</h2> <ul> ... </ul> </section> </aside> </main>
<footer> <p>© 2025 TechBlog</p> </footer></body>重构要点
| 原代码 | 语义化改进 | 原因 |
|---|---|---|
<div class="header"> | <header> | 明确表示页眉区域 |
<div class="nav"> | <nav aria-label="..."> | 表示导航，aria 增强可访问性 |
<div class="main"> | <main> | 页面主内容，便于跳转 |
<div class="post"> | <article> | 独立完整的内容单元 |
<div class="title"> | <h1> | 明确的标题层级 |
<div class="meta"> | <time> + <span> | 时间使用语义标签 |
<div class="sidebar"> | <aside> | 辅助内容区域 |
<div class="widget"> | <section> | 主题分组 |
语义化选择指南
🙋 不确定该用哪个标签？参考这个决策流程：
这块内容是什么？│├─ 页面头部（logo、导航）？ → <header>├─ 页面底部（版权、链接）？ → <footer>├─ 主导航链接？ → <nav>├─ 页面核心内容？ → <main>│├─ 独立完整的内容（可分发）？ → <article>├─ 主题分组（有标题）？ → <section>├─ 辅助/相关内容？ → <aside>│├─ 没有特殊语义？│ ├─ 需要块级容器 → <div>│ └─ 需要行内容器 → <span>│└─ 其他？→ 查阅 MDN 文档常见错误
❌ 滥用 <section>
<!-- 错误：仅作布局容器 --><section class="grid-3-col"> <div>...</div> <div>...</div> <div>...</div></section>
<!-- 正确：有主题分组意义 --><section> <h2>核心功能</h2> <div class="grid-3-col"> <div>...</div> <div>...</div> <div>...</div> </div></section>❌ 语义标签嵌套错误
<!-- 错误：main 不能嵌套在 article 中 --><article> <main>...</main></article>
<!-- 错误：header 中不能有 header --><header> <header>...</header></header>❌ 忽视标题层级
<!-- 错误：跳过 h2 直接用 h3 --><article> <h1>文章标题</h1> <h3>第一节</h3> <!-- 应该用 h2 --></article>
<!-- 正确 --><article> <h1>文章标题</h1> <h2>第一节</h2></article>参考资料
- MDN: HTML 元素参考
- HTML5 Doctor - 语义化标签使用指南
- WAI-ARIA 简介
- Google SEO 入门指南