还在用满屏的＜div＞构建页面？是时候拥抱语义化标签了！本文将深入探讨HTML5语义化标签的正确使用场景，让你的代码不仅对机器友好，更能提升SEO、可访问性和团队协作效率。

前言

在HTML5之前，我们习惯用＜div＞来划分页面区块，通过id或class赋予其含义。这种方式虽然灵活，但缺乏标准化的语义，导致搜索引擎、辅助技术（如屏幕阅读器）难以准确理解页面结构。HTML5引入了一系列语义化标签，旨在用更具描述性的元素替代通用容器，让网页“自己说话”。

今天，我们就来系统梳理这些标签，并通过实际案例，掌握它们的正确打开方式。

一、什么是语义化标签？

语义化标签是指标签本身能够表达其内容的含义和结构。例如，＜header＞表示页眉，＜nav＞表示导航，＜footer＞表示页脚。与之相对的是＜div＞和＜span＞这类无语义标签，它们只作为容器，需要额外的属性来说明用途。

语义化标签的价值体现在：

• SEO优化：搜索引擎能更准确识别页面重点内容，提升关键词排名。
• 可访问性：屏幕阅读器可基于标签含义导航，帮助视障用户理解页面。
• 代码可维护性：团队新成员能快速理解页面结构，减少沟通成本。
• 未来兼容：遵循标准的代码更容易适应浏览器新特性。

二、核心语义化标签详解

1. ＜header＞：页眉或区块头部

正确场景：放置页面或某个区块的引导性内容，如logo、网站标题、搜索框、导航链接等。一个页面可以有多个＜header＞，但通常每个＜article＞或＜section＞也可以有自己的＜header＞。

常见错误：将＜header＞当作唯一顶部栏，忽略内部区块的头部；或在＜header＞内放置主要内容。

＜!-- 正确：页面级header --＞
＜header＞
＜img src="logo.png" alt="网站logo"＞
＜nav＞＜!-- 导航 --＞＜/nav＞
＜/header＞

＜!-- 正确：文章内的header --＞
＜article＞
＜header＞
    ＜h1＞文章标题＜/h1＞
    ＜p＞发布时间：＜time datetime="2026-03-11"＞2026-03-11＜/time＞＜/p＞
＜/header＞
＜p＞文章内容...＜/p＞
＜/article＞

2. ＜nav＞：导航链接区域

正确场景：包含主要导航链接的区块，如网站主导航、目录、分页等。通常一个页面只有一个主＜nav＞，但侧边栏的“相关文章”链接也可以使用＜nav＞（辅助导航）。

注意：并非所有链接组都要用＜nav＞，如页脚的友情链接可以用＜footer＞内的＜ul＞，是否用＜nav＞取决于其是否为主要导航块。

＜nav aria-label="主导航"＞
  ＜ul＞
    ＜li＞＜a href="/"＞首页＜/a＞＜/li＞
    ＜li＞＜a href="/blog"＞博客＜/a＞＜/li＞
    ＜li＞＜a href="/about"＞关于＜/a＞＜/li＞
  ＜/ul＞
＜/nav＞

3. ＜main＞：页面主要内容

正确场景：文档的核心内容，每个页面只能有一个＜main＞，且不应包含侧边栏、导航、版权信息等重复内容。它直接包含页面的独有内容。

注意：＜main＞不能是＜article＞、＜aside＞、＜header＞、＜footer＞、＜nav＞的后代。

＜main＞
  ＜h1＞最新文章＜/h1＞
  ＜article＞＜!-- 文章列表 --＞＜/article＞
＜/main＞

4. ＜article＞：独立可复用的内容块

正确场景：表示一个独立、完整的内容单元，如博客文章、新闻条目、用户评论、论坛帖子。它理论上可以被单独分发或复用（如RSS订阅）。

常见误区：将整个页面都包在一个＜article＞里。只有当页面主体是一个独立内容时才使用，比如一篇博客详情页。如果页面是文章列表，列表中的每篇文章才用＜article＞。

＜article＞
  ＜h2＞如何学习HTML5语义化＜/h2＞
  ＜p＞语义化是前端开发的基础...＜/p＞
  ＜footer＞
    ＜span＞作者：kyriewen＜/span＞
    ＜span＞阅读量：9999+＜/span＞
  ＜/footer＞
＜/article＞

5. ＜section＞：通用的内容分区

正确场景：对页面内容进行分组，通常带有标题。例如，文章的多个章节、产品详情页的“规格参数”与“用户评价”区域。当某个区块在文档大纲中应该有一个标题时，就应该用＜section＞。

原则：如果内容可以单独成为＜article＞，就不要用＜section＞；如果只是为了样式或脚本，请用＜div＞。

＜article＞
  ＜h1＞HTML5指南＜/h1＞
＜section＞
    ＜h2＞第一部分：语义化标签＜/h2＞
    ＜p＞内容...＜/p＞
＜/section＞
＜section＞
    ＜h2＞第二部分：表单增强＜/h2＞
    ＜p＞内容...＜/p＞
＜/section＞
＜/article＞

6. ＜aside＞：侧边栏或补充内容

正确场景：表示与主内容间接相关的部分，如侧边栏、广告、相关链接、作者简介、引述框。通常用于放置次要信息。

＜article＞
  ＜p＞文章内容...＜/p＞
  ＜aside＞
    ＜h3＞关于作者＜/h3＞
    ＜p＞前端工程师，热爱技术分享。＜/p＞
  ＜/aside＞
＜/article＞

7. ＜footer＞：页脚或区块尾部

正确场景：包含其所在区块的元信息，如版权声明、联系信息、相关链接、文档创建日期。每个＜article＞或＜section＞都可以有自己的＜footer＞。

注意：＜footer＞不能包含＜header＞或另一个＜footer＞。

＜footer＞
  ＜p＞© 2026 kyriewen. All rights reserved.＜/p＞
  ＜nav＞
    ＜a href="/privacy"＞隐私政策＜/a＞ |
    ＜a href="/terms"＞使用条款＜/a＞
  ＜/nav＞
＜/footer＞

三、其他实用语义化标签

• ＜figure＞ 与 ＜figcaption＞：用于图表、插图、代码片段等独立内容，＜figcaption＞为其标题。

  ＜figure＞
    ＜img src="architecture.jpg" alt="系统架构图"＞
    ＜figcaption＞图1：前端工程化架构＜/figcaption＞
  ＜/figure＞
  

• ＜mark＞：高亮显示与上下文相关的文本，如搜索结果中的关键词。

• ＜time＞：表示时间或日期，可配合datetime属性便于机器解析。

  ＜time datetime="2026-03-11"＞2026年3月11日＜/time＞
  

• ＜details＞ 与 ＜summary＞：创建可展开/折叠的交互部件。

  ＜details＞
    ＜summary＞点击展开详情＜/summary＞
    ＜p＞这里是隐藏的内容...＜/p＞
  ＜/details＞
  

• ＜address＞：提供联系信息，如作者、公司联系方式，通常出现在＜footer＞中。

四、实战：构建一个语义化博客页面

假设我们要构建一个博客首页，包含头部、导航、文章列表、侧边栏和底部。传统做法可能是一堆＜div＞，而语义化版本如下：

＜!DOCTYPE html＞
＜html lang="zh-CN"＞
＜head＞
＜meta charset="UTF-8"＞
＜title＞我的技术博客＜/title＞
＜/head＞
＜body＞
＜header＞
    ＜h1＞＜a href="/"＞kyriewen＜/a＞＜/h1＞
    ＜nav＞
      ＜ul＞
        ＜li＞＜a href="/"＞首页＜/a＞＜/li＞
        ＜li＞＜a href="/articles"＞文章＜/a＞＜/li＞
        ＜li＞＜a href="/about"＞关于＜/a＞＜/li＞
      ＜/ul＞
    ＜/nav＞
＜/header＞

＜main＞
    ＜h2＞最新文章＜/h2＞
    ＜article＞
      ＜header＞
        ＜h3＞＜a href="/article1"＞HTML5语义化实战＜/a＞＜/h3＞
        ＜p＞发布日期：＜time datetime="2026-03-10"＞03-10＜/time＞＜/p＞
      ＜/header＞
      ＜p＞语义化标签能够提升SEO和可访问性...＜/p＞
      ＜footer＞
        ＜a href="/article1"＞阅读全文＜/a＞
      ＜/footer＞
    ＜/article＞

    ＜article＞
      ＜header＞
        ＜h3＞＜a href="/article2"＞CSS Grid布局指南＜/a＞＜/h3＞
        ＜p＞发布日期：＜time datetime="2026-03-11"＞2026-03-11＜/time＞＜/p＞
      ＜/header＞
      ＜p＞Grid布局彻底改变了我们对页面的控制...＜/p＞
      ＜footer＞
        ＜a href="/article2"＞阅读全文＜/a＞
      ＜/footer＞
    ＜/article＞
＜/main＞

＜aside＞
    ＜section＞
      ＜h3＞关于博主＜/h3＞
      ＜p＞前端工程师，专注技术分享。＜/p＞
    ＜/section＞
    ＜section＞
      ＜h3＞热门标签＜/h3＞
      ＜ul＞
        ＜li＞＜a href="/tag/html"＞HTML＜/a＞＜/li＞
        ＜li＞＜a href="/tag/css"＞CSS＜/a＞＜/li＞
        ＜li＞＜a href="/tag/js"＞JavaScript＜/a＞＜/li＞
      ＜/ul＞
    ＜/section＞
＜/aside＞

＜footer＞
    ＜p＞© 2026 kyriewen. 保留所有权利。＜/p＞
    ＜address＞
      联系邮箱：＜a href="mailto:193577746@qq.com"＞193577746@qq.com＜/a＞
    ＜/address＞
＜/footer＞
＜/body＞
＜/html＞

这个结构清晰明了，搜索引擎能轻松提取主内容、导航和补充信息，屏幕阅读器用户也能通过快捷键在各区域间跳转。

五、常见误区与注意事项

1. 滥用＜section＞标签：并非所有带标题的块都用＜section＞，如果只是为了样式，仍然应该用＜div＞。＜section＞意味着该内容在文档大纲中占据一个章节。
2. 忽略标题层级：在使用＜section＞或＜article＞时，确保内部标题层级合理（如从h1开始逐级下降），不要破坏文档大纲。
3. ＜main＞唯一性：确保页面只有一个＜main＞，并且不要把它放在＜article＞等内部。
4. 过度嵌套：合理使用，避免不必要的深层嵌套，保持结构简洁。
5. 可访问性增强：结合aria-label、aria-labelledby等属性，为没有标题的区块提供标签，如＜nav aria-label="页面导航"＞。

六、总结

HTML5语义化标签不是简单的“div替换游戏”，而是对网页内容进行意义标注的过程。正确使用它们，不仅能让你的代码更专业，还能在SEO、可访问性和团队协作上带来实实在在的好处。从今天起，在每一个项目中践行语义化，让你的网页成为机器和人都能读懂的“好公民”。

阅读原文：原文链接