WinddSnow

HTML5-Semantic-Sectioning-Elements

HTML 可访问性 语义化 区块标签 SEO
字数统计: 4.8k阅读时长: 20 min
2026/04/15

第9课：HTML5 语义区块标签

在 HTML5 之前，开发者只能使用 <div> 来划分页面的各个区域，通过 id 或 class 赋予其含义（如 <div id="header">）。HTML5 引入了一套全新的语义区块标签，让页面的结构具有内在的含义。这些标签不仅让代码更具可读性，更是搜索引擎优化（SEO）和可访问性（a11y）基础设施的核心。本节课将逐一剖析 <header>、<footer>、<main>、<article>、<section>、<aside> 和 <nav> 的精确语义、使用场景以及常见的滥用误区。

1. <header>：介绍性内容容器

<header> 表示一组介绍性内容或导航链接。它通常出现在页面、文章或区块的顶部，但不限于顶部。

1
2
3
4
5
6
7
<article>
  <header>
    <h2>深入理解 JavaScript 闭包</h2>
    <p>发表于 <time datetime="2026-04-15">2026年4月15日</time>，作者：张三</p>
  </header>
  <p>闭包是 JavaScript 中最强大的特性之一...</p>
</article>

1.1 语义定义与限制

  • 可以出现多次：一个页面可以有多个 <header>，例如全局页头、文章页头、区块页头。
  • 不能嵌套在另一个 <header> 或 <footer> 内部，也不能是 <address> 元素的子元素。
  • 通常包含：标题（<h1>～<h6>）、Logo、作者信息、发布日期、导航菜单（<nav>）。

1.2 <header> 与 <h1> 的关系

  • <header> 是容器，<h1> 是内容。
  • 在全局 <header> 中，<h1> 应代表整个页面的核心主题。
  • 在文章 <header> 中，标题通常是 <h2> 或更低级别，以维护页面的标题层级。
1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
  <header>
    <h1>前端大师课</h1>  <!-- 页面主标题 -->
    <nav>...</nav>
  </header>
  <main>
    <article>
      <header>
        <h2>第9课：语义区块标签</h2>  <!-- 文章标题 -->
      </header>
    </article>
  </main>
</body>

1.3 常见误用

1
2
3
4
5
6
7
8
9
10
<!-- ❌ 错误：仅为了包裹一组导航链接而使用 header -->
<header>
  <nav>...</nav>
</header>
<!-- 若没有介绍性内容，<nav> 本身已足够 -->

<!-- ❌ 错误：将 header 等同于页面顶部装饰条 -->
<div class="page-top-banner">
  <header>...</header>  <!-- 多余的嵌套 -->
</div>

<footer> 表示最近祖先区块（article、section、body 等）的页脚。它通常包含版权信息、作者、相关链接、文档附录等。

1
2
3
4
5
6
7
8
<article>
  <h2>文章标题</h2>
  <p>正文内容...</p>
  <footer>
    <p>© 2026 前端大师课。本文章遵循 CC BY 4.0 协议。</p>
    <address>联系作者：<a href="mailto:author@example.com">author@example.com</a></address>
  </footer>
</article>

2.1 语义与多重实例

  • 与 <header> 类似，<footer> 也可在页面内多次出现（页面级页脚、文章级页脚、区块级页脚）。
  • 其内容通常与其所在的分段内容元素相关，而非整个页面的版权声明专属。
  • 不应再嵌套 <header> 或另一个 <footer>。
  • 不应包含新的主要内容区块（如将 <section> 放入 <footer> 是错误的）。

2.3 与 <address> 的配合

<address> 表示最近祖先 article 或 body 的联系信息。将其放在 <footer> 内是常见的语义组合。

1
2
3
4
5
<footer>
  <address>
    如有疑问，请联系 <a href="mailto:support@example.com">支持团队</a>。
  </address>
</footer>

3. <main>：页面的核心内容

<main> 表示文档 <body> 中的主要、独特的内容区域。每个页面应仅有一个 <main>。

1
2
3
4
5
6
7
8
9
<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <h2>当前页面专有内容</h2>
    <p>这里放置页面的核心信息，而非侧边栏、导航或版权声明。</p>
  </main>
  <footer>...</footer>
</body>

3.1 关键约束

规则 说明
唯一性 一个文档中最多只能有一个 <main> 元素（除非其他 <main> 设置了 hidden 属性）。
不能嵌套 <main> 不能是 <article>、<aside>、<footer>、<header> 或 <nav> 的子元素。
与 role="main" 的关系 ARIA 地标（Landmark）中，<main> 自动映射为 role="main"，无需额外添加。

3.2 可访问性价值

屏幕阅读器用户可以通过快捷键直接跳转到 <main> 区域，跳过重复的导航栏和侧边栏，快速访问核心内容。这对于键盘和辅助技术用户至关重要。

3.3 常见误用

1
2
3
4
5
6
7
8
9
10
11
<!-- ❌ 错误：将侧边栏也包裹在 main 中 -->
<main>
  <article>主要内容</article>
  <aside>相关推荐</aside>  <!-- 侧边栏不应属于核心独特内容 -->
</main>

<!-- ✅ 正确：main 仅包含页面专属内容 -->
<main>
  <article>主要内容</article>
</main>
<aside>相关推荐</aside>

4. <article>：独立、可分发的内容块

<article> 表示独立的、完整的、可独立分发或重用的内容块。例如一篇博客文章、一个论坛帖子、一条新闻评论、一个交互式小部件。

1
2
3
4
5
6
7
8
9
10
<article>
  <header>
    <h2>如何优化 React 应用的首屏加载性能</h2>
    <p>发布于 2026-04-15</p>
  </header>
  <p>首屏加载性能是衡量用户体验的关键指标...</p>
  <footer>
    <p>标签：<a href="#">React</a> <a href="#">性能优化</a></p>
  </footer>
</article>

4.1 判断标准：“独立发布测试”

一个简单的心智模型：如果将该内容块从当前页面剥离，发布到其他页面或 RSS 阅读器中，是否依然完整且有意义？ 若是，则应使用 <article>。

4.2 <article> 的嵌套

<article> 可以嵌套，用于表示与父文章相关联的子内容，例如博客文章的评论区。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<article>
  <h2>博客正文</h2>
  <p>...</p>
  <section>
    <h3>评论区</h3>
    <article>
      <h4>用户 A</h4>
      <p>写得太好了！</p>
    </article>
    <article>
      <h4>用户 B</h4>
      <p>受益匪浅，感谢分享。</p>
    </article>
  </section>
</article>

4.3 何时不用 <article>

  • 仅为了包裹一组样式块而使用 <article> 是错误的，应使用 <div>。
  • 如果内容不具备“独立完整性”，只是页面的一个分区，应使用 <section>。

5. <section>：主题分组

<section> 表示文档或应用中一个主题性的内容分组，通常需要包含一个标题（<h1>～<h6>）。

1
2
3
4
5
6
7
8
9
10
11
<article>
  <h2>Web 前端性能优化指南</h2>
  <section>
    <h3>1. 资源加载优化</h3>
    <p>使用懒加载、代码分割、CDN 加速...</p>
  </section>
  <section>
    <h3>2. 渲染性能优化</h3>
    <p>避免强制同步布局、使用 CSS contain 属性...</p>
  </section>
</article>

5.1 <section> 与 <article> 的核心区别

对比项 <section> <article>
独立性 通常依赖上下文，脱离后意义不完整。 完全独立，可单独发布。
标题要求 强烈建议包含标题，以形成文档大纲。 通常包含标题，但非强制。
典型场景 长文章分章节、首页的功能分区（热门商品、新闻动态）。 博客列表中的每篇文章、RSS 条目、评论、产品卡片。
嵌套关系 可以包含 <article>（如首页的“最新文章”区块，内含多个 <article>）。 可以包含 <section>（如将长文章分章节）。

5.2 警告：勿滥用 <section>

一个常见的反模式是用 <section> 替代 <div> 作为样式钩子或脚本容器。

1
2
3
4
5
6
7
8
9
<!-- ❌ 错误：无标题、无主题分组的含义 -->
<section class="wrapper">
  <div>...</div>
</section>

<!-- ✅ 正确：使用 div -->
<div class="wrapper">
  <div>...</div>
</div>

6. <aside>：附属内容

<aside> 表示与周围内容只有间接关联的内容，通常表现为侧边栏、引用、广告、相关链接等。

1
2
3
4
5
6
7
8
9
10
11
<article>
  <h2>JavaScript 异步编程</h2>
  <p>正文内容...</p>
  <aside>
    <h3>相关资料</h3>
    <ul>
      <li><a href="#">MDN 异步 JavaScript</a></li>
      <li><a href="#">事件循环可视化工具</a></li>
    </ul>
  </aside>
</article>

6.1 两种典型使用模式

位置 含义 示例
在 <article> 内部 与文章内容相关但非核心的补充信息（如术语解释、引用来源）。 文内插入的名词解释框。
在 <article> 外部 与整个页面相关的侧边栏内容（如导航菜单、广告、作者简介）。 全局侧边栏、相关文章推荐。

6.2 可访问性映射

<aside> 自动映射为 ARIA complementary 地标角色，屏幕阅读器可据此快速定位辅助内容区域。

7. <nav>：导航链接集合

<nav> 表示页面中的主导航链接区块。并非所有链接组都需用 <nav> 包裹——仅用于主要导航结构。

1
2
3
4
5
6
7
<nav aria-label="主导航">
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/courses">课程</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

7.1 常见导航类型与 aria-label

一个页面可能有多个 <nav>，此时应使用 aria-label 或 aria-labelledby 区分其用途，帮助辅助技术用户理解。

1
2
3
<nav aria-label="主导航">...</nav>
<nav aria-label="面包屑导航">...</nav>
<nav aria-label="页脚链接">...</nav>

7.2 何时不用 <nav>

  • 友情链接区块（若为非核心导航，可用 <footer> 内的普通链接列表）。
  • 文章内的脚注链接列表。
  • 分页控件（虽然也是导航，但通常用 <nav> 包裹是合适的）。

8. 综合示例：典型博客页面的语义结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>语义区块标签综合示例</title>
</head>
<body>
  <header>
    <h1>前端架构师之路</h1>
    <nav aria-label="主导航">
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/blog">博客</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h2>深入理解 HTML5 语义化标签</h2>
        <p>发表于 <time datetime="2026-04-15">2026年4月15日</time></p>
      </header>
      
      <section>
        <h3>什么是语义化？</h3>
        <p>语义化是指使用正确的 HTML 标签表达内容的含义...</p>
      </section>
      
      <section>
        <h3>为什么要使用语义标签？</h3>
        <p>语义标签对 SEO、可访问性、代码可维护性都有巨大价值...</p>
      </section>
      
      <aside>
        <h4>推荐阅读</h4>
        <ul>
          <li><a href="#">HTML5 规范导读</a></li>
          <li><a href="#">Web 可访问性指南</a></li>
        </ul>
      </aside>
      
      <footer>
        <p>作者：张三 | 分类：<a href="#">HTML</a></p>
      </footer>
    </article>
  </main>

  <aside>
    <h3>关于作者</h3>
    <p>张三，资深前端架构师，拥有 10 年 Web 开发经验。</p>
    <nav aria-label="社交链接">
      <a href="#">GitHub</a> | <a href="#">Twitter</a>
    </nav>
  </aside>

  <footer>
    <p>&copy; 2026 前端架构师之路。保留所有权利。</p>
    <nav aria-label="法律信息">
      <a href="#">隐私政策</a> | <a href="#">使用条款</a>
    </nav>
  </footer>
</body>
</html>

课后练习

一、概念自测（选择题 / 填空题）

  1. （单选） 以下哪个标签最适合表示一篇独立的博客文章？
    A. <section>
    B. <article>
    C. <div>
    D. <main>

  2. （单选） 关于 <main> 元素，下列说法正确的是？
    A. 一个页面可以有多个 <main> 元素，只要它们位于不同的 <section> 内。
    B. <main> 可以嵌套在 <article> 内部。
    C. <main> 自动映射为 ARIA role="main"，辅助技术可直接跳转。
    D. <main> 应该包含页面的所有内容，包括侧边栏和导航。

  3. （填空） 要表示文章内部与主题相关但非核心的补充信息（如术语解释框），应使用 ______ 标签。

  4. （判断） <header> 元素在一个页面中只能出现一次，且必须位于页面顶部。
    A. 正确
    B. 错误

二、AI 编程任务：编写面向 AI 的提示词

场景：你需要为一个技术文档网站编写文章详情页的 HTML 结构。要求如下：

  • 页面需包含全局页头（网站 Logo + 主导航）、页面主体、全局页脚。
  • 主体部分使用 <main> 包裹一篇 <article>。
  • <article> 内部包含：
    • 文章标题和元数据（作者、发布日期）放在 <header> 中。
    • 文章正文分为三个 <section>，每个 <section> 有一个 <h3> 标题。
    • 文内插入一个 <aside>，显示“本文涉及的关键术语”列表。
    • 文章末尾使用 <footer> 显示版权声明和文章标签。
  • 页面右侧使用全局 <aside> 放置“相关文章推荐”列表（至少 3 篇）。
  • 所有语义标签必须正确使用，不得滥用 <div> 替代。

任务要求：请写出一段完整的中文提示词，发送给 AI，使其生成符合上述要求的完整 HTML 文档结构。提示词中应明确指定各语义标签的嵌套关系和内容要求。

三、面试真题与参考答案

题目（美团前端面试题）：

请阐述 HTML5 中 <section> 和 <article> 的区别，并说明各自的适用场景。如果页面中一个内容区块既有独立完整性，又是某个主题的分组，应如何选择？

参考答案：

1. 核心区别：

对比维度 <section> <article>
独立性 内容依赖上下文，脱离后意义可能不完整。 内容完全独立，可被单独聚合、分发、重用。
语义定位 文档或应用的主题性分组，通常需要标题。 独立的、完整的内容单元。
文档大纲 是文档大纲的一部分，帮助构建层级结构。 也是文档大纲的一部分，但其内部的标题层级可以重新开始（HTML5 大纲算法）。
RSS 聚合 不适合被 RSS 阅读器单独抓取。 是 RSS 阅读器抓取的基本单元。

2. 适用场景举例：

  • <section> 典型场景：

    • 将一篇长文分为“第一章”、“第二章”。
    • 首页的“热门商品”、“最新资讯”功能区（各区内含多个 <article>）。
    • 页脚的“联系我们”、“关于我们”栏目分组。

  • <article> 典型场景：

    • 博客文章、新闻报道、论坛帖子。
    • 评论列表中的每条评论。
    • 产品列表中的每个独立产品卡片。

3. 模糊边界的处理原则：

当一个内容块既像一个独立单元（可被分享），又像是页面的一个主题分组（有标题和段落），应按“独立发布测试”决策：

  • 若该内容块可以被完整地摘录到另一个页面、电子邮件或 RSS 中而不失其意义，则使用 <article>。
  • 若摘录后显得突兀、不完整（如“第一章”脱离了整本书），则使用 <section>。

进阶讨论：在 HTML5 大纲算法中，<article> 内部可以重新开始 <h1> 层级。但鉴于主流浏览器和辅助工具对此支持不佳，实践中仍建议在整站范围内保持唯一的 <h1>，在 <article> 内使用 <h2> 开始。

课后练习答案

一、概念自测答案

  1. B

    • 解析：<article> 专门用于表示独立、可分发的内容单元，如博客文章。

  2. C

    • 解析：<main> 自动映射为 role="main"，是屏幕阅读器的重要地标。A 错，页面只能有一个可见 <main>；B 错，<main> 不能嵌套在分段内容中；D 错，<main> 仅包含页面专有核心内容。

  3. <aside>

    • 解析：<aside> 表示与周围内容间接相关的附属信息。

  4. B（错误）

    • 解析：<header> 可在页面中多次出现（如全局页头、文章页头），且不限于页面顶部。

二、AI 编程任务参考答案（提示词示例）

示例提示词：
“请使用 HTML5 语义标签生成一个技术文档网站的文章详情页完整结构。要求：

  • 全局 <header> 包含网站标题（如 技术文档中心）和 <nav> 主导航（首页、文档、关于）。
  • 页面使用 <main> 包裹核心内容。
  • <main> 内部为一篇 <article>，包含：
    • <header>：文章标题 <h2>、作者和发布日期的 <p>。
    • 三个 <section>，每个带有 <h3> 标题和若干段落文本（可用占位文本）。
    • 一个 <aside>，包含一个“关键术语”列表（如 HTML、CSS、JavaScript）。
    • <footer>：包含版权说明文字和文章标签链接。
  • 在 <main> 外部、页面右侧，使用全局 <aside> 放置“相关文章推荐”列表（至少 3 个链接）。
  • 页面底部使用全局 <footer> 包含版权信息和法律链接。
  • 代码需整洁，语义准确。请直接输出完整 HTML。”

原文作者：WinddSnow

原文链接：https://winddsnow.github.io/2026/04/15/HTML5-Semantic-Sectioning-Elements/

发表日期：April 15th 2026, 1:00:00 pm

更新日期：April 14th 2026, 6:10:56 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 第9课：HTML5 语义区块标签
    1. 1.1. 1. <header>：介绍性内容容器
      1. 1.1.1. 1.1 语义定义与限制
      2. 1.1.2. 1.2 <header> 与 <h1> 的关系
      3. 1.1.3. 1.3 常见误用
    2. 1.2. 2. <footer>：页脚与附属信息
      1. 1.2.1. 2.1 语义与多重实例
      2. 1.2.2. 2.2 <footer> 内不应包含的内容
      3. 1.2.3. 2.3 与 <address> 的配合
    3. 1.3. 3. <main>：页面的核心内容
      1. 1.3.1. 3.1 关键约束
      2. 1.3.2. 3.2 可访问性价值
      3. 1.3.3. 3.3 常见误用
    4. 1.4. 4. <article>：独立、可分发的内容块
      1. 1.4.1. 4.1 判断标准：“独立发布测试”
      2. 1.4.2. 4.2 <article> 的嵌套
      3. 1.4.3. 4.3 何时不用 <article>
    5. 1.5. 5. <section>：主题分组
      1. 1.5.1. 5.1 <section> 与 <article> 的核心区别
      2. 1.5.2. 5.2 警告：勿滥用 <section>
    6. 1.6. 6. <aside>：附属内容
      1. 1.6.1. 6.1 两种典型使用模式
      2. 1.6.2. 6.2 可访问性映射
    7. 1.7. 7. <nav>：导航链接集合
      1. 1.7.1. 7.1 常见导航类型与 aria-label
      2. 1.7.2. 7.2 何时不用 <nav>
    8. 1.8. 8. 综合示例：典型博客页面的语义结构
    9. 1.9. 课后练习
      1. 1.9.1. 一、概念自测（选择题 / 填空题）
      2. 1.9.2. 二、AI 编程任务：编写面向 AI 的提示词
      3. 1.9.3. 三、面试真题与参考答案
    10. 1.10. 课后练习答案
      1. 1.10.1. 一、概念自测答案
      2. 1.10.2. 二、AI 编程任务参考答案（提示词示例）
Total : 76
2026
2025
2024
2023
2022
2021
2020
2019
2018
1970
年终总结 碎语 HTML 可访问性 ARIA 键盘导航 屏幕阅读器 Java ELK 分布式搜索引擎 elasticsearch Logstash kibana 最佳实践 Web标准 W3C WHATWG 代码验证 DOCTYPE 文档结构 标准模式 表单 input label select textarea fieldset 表单验证 语义化 区块标签 SEO Head 元数据 Open Graph 原理 超链接 导航 rel属性 图像 多媒体 srcset 响应式图片 多线程 42 集合 JVM 基础 并发 面试题 数组基础 数据结构 WEB 数据库 MySql Mybatis Spring SpringMVC SpringBoot SpringCloud Dubbo Zookeeper MongoDB Kafka JWT token Markdown 掘金 列表 表格 MySQL OpenClaw 微信 ClawBot 安装部署 聊天机器人 RabbitMQ 消息队列 虚拟化 Proxmox VE Redis 缓存 Ribbon debug调试 spring springcloud 微服务 分享 文本标签 vim 编辑器之神 前端 Yapi 接口管理 保罗·格雷厄姆（Paul Graham） helloworld iframe 安全性 跨域通信 嵌入内容 数据库操作 nginx http服务器 高并发 计算机的世界
生活 前端基础 个人生活 编程中间件 编程 面试 工具用法 技术教程 计算机基础架构 读后感 指引 编程与数据库