Skip to content

HTML5 语义化：让页面更有意义

· 11 min
HTMLHTML5语义化SEO可访问性

翻开十年前的网页源码，你会看到满屏的 <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 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>
  <nav aria-label="页脚导航">
    <a href="/privacy">隐私政策</a>
    <a href="/terms">服务条款</a>
  </nav>
  <p>&copy; 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>&copy; 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>

参考资料#