HTML5 语义化标签详解：让搜索引擎读懂你的页面

小飞兽 HTML/CSS 93 次阅读 2026-06-23

Introduction

语义化 HTML（Semantic HTML）指使用恰当含义的标签来描述页面内容，而非全用 div + class 堆砌。正确使用语义化标签可以让搜索引擎更好地理解页面结构，提升 SEO 效果；同时让屏幕阅读器准确朗读页面内容，提升可访问性（Accessibility）。HTML5 新增的 article、section、nav、aside、figure、time 等标签都是为了解决语义缺失问题而设计的。

新增的结构标签

<header>   <!-- 页面顶部区域，或 article 的标题区 -->
<nav>      <!-- 导航链接，一个页面可有多处 nav -->
<main>     <!-- 主内容区，每个页面唯一 -->
<article>  <!-- 独立可分发的内容块 -->
<section>  <!-- 文档章节，通常带标题 -->
<aside>    <!-- 与主内容相关的侧边信息 -->
<footer>   <!-- 页面底部或区块底部 -->
<figure>   <!-- 独立内容单元，配 figcaption 说明 -->
<figcaption>配图说明文字</figcaption>
<!-- 示例结构 -->
<body>
  <header><nav>...导航链接...</nav></header>
  <main>
    <article>
      <header><h1>文章标题</h1><time datetime="2026-08-02">2026年8月2日</time></header>
      <section><p>段落1...</p></section>
      <section><p>段落2...</p></section>
    </article>
    <aside>相关推荐</aside>
  </main>
  <footer>版权信息</footer>
</body>

行内语义标签

<time datetime="2026-08-02">2026年8月2日</time>
<mark>高亮显示的文字</mark>
<abbr title="HyperText Markup Language">HTML</abbr>
<details>
    <summary>点击展开更多</summary>
    折叠内容...
</details>
<meter value="75" min="0" max="100">75%</meter>
<progress value="60" max="100">已完成 60%</progress>

section vs article vs div 怎么选

<!-- article：内容可独立分发 -->
<article>
  <h2>Python 教程第1章</h2>
  <p>正文...</p>
  <section><h3>1.1 安装Python</h3>...</section>
  <section><h3>1.2 第一个程序</h3>...</section>
</article>
<!-- section：文档的主题分组，必须带标题 -->
<section>
  <h2>安装步骤</h2>
  <p>按以下步骤安装...</p>
</section>
<!-- div：纯样式/脚本容器，无语义含义 -->
<div class="modal-overlay">...</div>

常见问题

一个页面可以用多个 <header> 吗：可以，<header> 标签可以用在页面顶部，也可以用在 <article> 内部。

<section> 必须有标题吗：是的，W3C 规范要求 section 应该包含标题。
SEO 影响：语义化标签对排名有正向影响，但不是决定性因素。