HTML 语义化标签完全指南：为什么 div 不能解决所有问题？

满屏 div 有什么问题

打开浏览器开发者工具，审查很多网页的 HTML，会看到这样的结构：

<div class="header">
  <div class="nav">
    <div class="nav-item">首页</div>
  </div>
</div>
<div class="main">
  <div class="article">
    <div class="title">文章标题</div>
    <div class="content">正文内容...</div>
  </div>
</div>
<div class="footer">版权信息</div>

从视觉上看，这没什么问题——浏览器会正常渲染。但对于搜索引擎爬虫和屏幕阅读器来说，这是一团没有意义的盒子。它们无法判断哪部分是导航、哪部分是主要内容、哪部分是页脚。

HTML 语义化就是为了解决这个问题。

什么是语义化 HTML

语义化 HTML 是指用能够表达内容含义的标签来组织页面结构，而不仅仅用 div 和 span 充当纯布局容器。

HTML5 引入了大量语义标签，让标签本身就能告诉浏览器、搜索引擎和辅助技术"这块内容是什么"。

语义化带来三个直接好处：

1. SEO：搜索引擎能更准确理解页面结构，判断内容的重要性和相关性，有助于提升排名。

2. 无障碍访问（Accessibility）：屏幕阅读器依赖语义标签为视觉障碍用户导航，<nav> 让他们快速跳转到导航，<main> 让他们直接跳到主内容。

3. 代码可维护性：看到 <article> 就知道这是独立文章内容，比看到第 47 个 <div class="box"> 直观得多。

核心语义标签详解

`<header>`：页眉

表示页面或区块的头部区域，通常包含 Logo、标题、主导航。

<header>
  <img src="logo.png" alt="网站Logo">
  <h1>网站名称</h1>
  <nav>...</nav>
</header>

注意：<header> 不只能用于页面顶部，<article> 和 <section> 内部也可以有自己的 <header>。

`<nav>`：导航

专门用于导航链接区域，主菜单、面包屑、分页都适合用它。

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

不是页面里所有链接都要放进 <nav>，只有作为主要导航功能的链接集合才用它。

`<main>`：主内容

页面的核心内容区域，每个页面只能有一个 <main>，且不应该嵌套在 <header>、<footer>、<nav>、<aside> 内。

<body>
  <header>...</header>
  <nav>...</nav>
  <main>
    <!-- 页面核心内容放这里 -->
  </main>
  <footer>...</footer>
</body>

屏幕阅读器用户通过快捷键直接跳到 <main>，跳过重复的导航和页眉。

`<article>`：独立内容

表示页面中可以独立存在、可以被单独分发的内容块，如博客文章、新闻条目、论坛帖子、评论。

判断标准：这块内容脱离页面上下文，单独出现是否仍然有意义？如果是，就用 <article>。

<main>
  <article>
    <header>
      <h2>文章标题</h2>
      <time datetime="2024-04-06">2024年4月6日</time>
    </header>
    <p>文章正文...</p>
    <footer>
      <p>作者：张三</p>
    </footer>
  </article>
</main>

`<section>`：主题分区

表示文档中的一个主题性分组，通常有自己的标题。<section> 和 <div> 的区别在于：<section> 有明确的主题，<div> 只是布局容器。

<article>
  <section>
    <h2>背景介绍</h2>
    <p>...</p>
  </section>
  <section>
    <h2>核心功能</h2>
    <p>...</p>
  </section>
</article>

常见误用：把每个 <div> 换成 <section> 并不是语义化，只有内容真正有主题分组时才用。

`<aside>`：侧边内容

与主内容相关但非核心的内容，如侧边栏、相关文章推荐、广告、作者简介。

<main>
  <article>主文章内容</article>
  <aside>
    <h3>相关文章</h3>
    <ul>
      <li><a href="#">文章A</a></li>
      <li><a href="#">文章B</a></li>
    </ul>
  </aside>
</main>

`<footer>`：页脚

页面或区块的底部区域，通常包含版权信息、联系方式、备案号、友情链接等。

<footer>
  <p>© 2024 toolshu.com 版权所有</p>
  <nav aria-label="页脚导航">
    <a href="/about">关于我们</a>
    <a href="/privacy">隐私政策</a>
  </nav>
</footer>

和 <header> 一样，<footer> 也可以出现在 <article> 内部。

`<figure>` 和 `<figcaption>`：图文组合

表示独立的图片、图表、代码示例等，配合说明文字使用。

<figure>
  <img src="architecture.png" alt="系统架构图">
  <figcaption>图1：系统整体架构示意图</figcaption>
</figure>

`<time>`：时间

标记日期或时间，datetime 属性提供机器可读的格式。

<p>发布于 <time datetime="2024-04-06T10:30:00+08:00">2024年4月6日</time></p>

`<address>`：联系信息

表示最近的 <article> 或 <body> 的联系信息，不是通用地址标签。

<address>
  作者：<a href="mailto:hello@example.com">张三</a><br>
  北京市朝阳区
</address>

语义化 vs 非语义化：对比一眼看懂

场景	非语义写法	语义写法
页眉区域	`<div class="header">`	`<header>`
导航菜单	`<div class="nav">`	`<nav>`
主内容区	`<div class="main">`	`<main>`
博客文章	`<div class="post">`	`<article>`
内容分区	`<div class="section">`	`<section>`
侧边栏	`<div class="sidebar">`	`<aside>`
页脚区域	`<div class="footer">`	`<footer>`
图片说明	`<div class="img-wrap">`	`<figure>` + `<figcaption>`

几个常见误区

误区1：<section> 是升级版 <div>

不是。只有内容有明确主题归属时才用 <section>，纯布局容器仍然用 <div>。

误区2：<article> 只能放文章

不对。评论、论坛帖子、产品卡片、小工具（widget）都可以是 <article>，只要它能独立存在。

误区3：语义化会影响样式

不会。语义标签默认没有特殊样式（除了少数如 <address> 是斜体），用 CSS 可以随意定制外观，和 <div> 完全一样。

误区4：用了语义标签 SEO 就一定好

语义化只是 SEO 的基础之一，内容质量、页面速度、外链等因素同样重要。但语义化是成本最低、收益最稳的基础优化，没有理由不做。

动手验证

写完一段 HTML 想看实际渲染效果？直接粘到 toolshu.com 的 HTML 在线编辑器，支持语法高亮、格式化和实时预览，不用搭本地环境。

HTML 语义化标签完全指南：为什么 div 不能解决所有问题？

满屏 div 有什么问题

什么是语义化 HTML

核心语义标签详解

<header>：页眉

<nav>：导航

<main>：主内容

<article>：独立内容

<section>：主题分区

<aside>：侧边内容

<footer>：页脚

<figure> 和 <figcaption>：图文组合

<time>：时间

<address>：联系信息