HTML 语义化标签

语义化就是用有含义的标签来描述内容，而不是把所有东西都用 <div> 包起来。HTML5 新增了大量语义化标签来覆盖常见的内容模式。

为什么需要语义化

<div>, id 方式（无语义）：

html 
<div id="header">
  <div id="nav">……</div>
</div>
<div id="content">
  <div class="post">……</div>
</div>
<div id="footer">……</div>

语义化方式：

html 
<header>
  <nav>……</nav>
</header>
<main>
  <article>……</article>
</main>
<footer>……</footer>

语义化的好处：

  • 搜索引擎更好地理解页面结构，提升 SEO
  • 屏幕阅读器能识别内容区域，帮助障碍用户高效导航
  • 开发者一眼就能看懂页面骨架，降低维护成本

HTML5 语义化标签速查

标签含义
<header>页面或区块的头部
<nav>导航链接组
<main>文档主体（唯一）
<article>独立可分发的内容
<section>文档中的章节
<aside>侧边/补充内容
<footer>页面或区块的底部
<figure>插图、图表、代码块（带标题）
<figcaption><figure> 的标题
<time>日期/时间
<mark>高亮/标记
<details> + <summary>折叠展开区块

<figure> 与 <figcaption>

html 
<figure>
  <img src="chart.png" alt="季度销售图表">
  <figcaption>图 1：2026 年 Q1 销售数据，同比增长 15%</figcaption>
</figure>

<figure>
  <pre><code>console.log('Hello');</code></pre>
  <figcaption>示例 1：一段简单的 JavaScript 代码</figcaption>
</figure>

<time> — 时间标注

html 
<p>本文发布于 <time datetime="2026-06-02">2026 年 6 月 2 日</time>。</p>
<p>会议安排在 <time datetime="2026-06-05T14:00">下周四下午两点</time>。</p>

datetime 属性提供机器可读的时间格式，而标签内的文字是给人看的。

<details> + <summary> — 原生折叠

html 
<details>
  <summary>点击展开查看详情</summary>
  <p>这里是隐藏的详细内容，默认折叠。</p>
  <p>可以包含多个段落、图片等任意内容。</p>
</details>

默认折叠，点击 <summary> 展开。可使用 open 属性默认展开：

html 
<details open>
  <summary>常见问题</summary>
  <p>这里是回答……</p>
</details>

<address> — 联系信息

html 
<address>
  邮箱：<a href="mailto:hello@example.com">hello@example.com</a><br>
  地址：上海市浦东新区<br>
  电话：<a href="tel:+862111111">021-11111</a>
</address>

<address> 只用于当前页面或文章的联系方式，不是随便一个地址都能用它。