HTML 语义化简介

Begindev 编辑部 March 25, 2026

语义化 HTML (Semantic HTML) 的核心在于赋予你的网页内容以意义，使其对于浏览器和开发者来说都更易于理解。

不仅仅是告诉浏览器如何显示某物（这是 CSS 的工作），你是在告诉它这个东西是什么。这会带来更好的无障碍性 (Accessibility)、搜索引擎优化 (SEO) 和代码的可维护性。本质上，它是关于“在正确的地方使用正确的 HTML 元素”。

1. 理解语义含义

语义化 HTML 使用描述其包含内容含义的标签。这与非语义化元素（如 <div> 和 <span>）形成对比，后者只是通用的容器，本身并不描述其中的内容。

1.1 语义化元素示例

以下是一些常见的语义化元素及其代表的含义：

<article>：代表文档、页面、应用或网站中一个独立的组成部分，旨在可以独立分发或复用（例如：论坛帖子、杂志或报纸文章、博客文章）。
<aside>：代表文档的一部分，其内容与文档的主要内容仅间接相关。<aside> 通常表现为侧边栏或标注框。
<details>：代表一个详情控件，用户可以从中获取更多信息或控制权（通常可展开/收起）。
<figcaption>：代表其父元素 <figure> 内容的标题或说明。
<figure>：代表独立的内容单元（如图像、图表、代码块等），通常带有可选的标题，并作为一个整体被引用。
<footer>：代表文档或章节的页脚。页脚通常包含关于章节作者的信息、版权数据或相关文档的链接。
<header>：代表介绍性内容，通常是一组介绍性或导航辅助工具。它可能包含标题、Logo、搜索表单等。
<main>：代表文档 <body> 的主要内容。主要内容区域由与文档中心主题直接相关的内容组成。（注意：一个页面通常只能有一个 <main>）。
<nav>：代表页面中提供导航链接的部分（链接到其他页面或页面内的其他部分）。
<section>：代表内容的一个主题分组，通常带有一个标题。

1.2 非语义化元素示例

<div>：流内容的通用容器。它没有语义意义（用于块级布局）。
<span>：短语内容的通用内联容器。它没有语义意义（用于文本样式）。

2. 为什么要使用语义化 HTML？

无障碍性 (Accessibility)：屏幕阅读器和其他辅助技术依赖语义化 HTML 来理解网页的结构和内容，从而为残障用户提供更好的体验。例如，屏幕阅读器可以直接跳转到 <nav> 或 <main>，而面对一堆 <div> 时则无法做到。
SEO (搜索引擎优化)：搜索引擎使用语义化 HTML 来更好地理解网页内容的权重和上下文，这有助于提高搜索排名。
可维护性 (Maintainability)：语义化 HTML 使代码更易于阅读和理解。看到 <article> 比看到 <div class="post"> 更直观，这使得维护和更新变得更容易。
可读性 (Readability)：语义元素清晰地定义了网页不同部分的用途，使代码对于开发者来说更具可读性。

3. 实战示例

让我们看一些如何使用语义化 HTML 的例子。

3.1 示例 1：博客文章

与其全都使用 <div> 元素，我们可以使用语义化元素来构建博客文章：

<article>
  <header>
    <h1>我的精彩博客文章</h1>
    <p>发布于 <time datetime="2024-01-01">2024年1月1日</time> 作者：John Doe</p>
  </header>
  
  <section>
    <h2>简介</h2>
    <p>这是我博客文章的介绍部分。</p>
  </section>
  
  <section>
    <h2>主要内容</h2>
    <p>这是我博客文章的核心内容。</p>
  </section>
  
  <footer>
    <p>欢迎评论！</p>
  </footer>
</article>

解析：

<article>：代表整篇博客文章。
<header>：包含标题和发布信息。
<section>：将文章划分为逻辑章节。
<footer>：包含关于评论的脚注信息。
<time>：代表特定的时间段或日期，机器可读。

3.2 示例 2：网站页眉

不要用 <div> 来做页眉，使用 <header> 元素：

<header>
  <img src="logo.png" alt="我的网站 Logo">
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">关于</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">联系我们</a></li>
    </ul>
  </nav>
</header>

解析：

<header>：代表网站的页眉区域。
<nav>：代表导航菜单。

3.3 示例 3：侧边栏

使用 <aside> 元素来放置与主要内容相关但不属于核心理解路径的内容：

<aside>
  <h3>相关文章</h3>
  <ul>
    <li><a href="#">文章 1</a></li>
    <li><a href="#">文章 2</a></li>
    <li><a href="#">文章 3</a></li>
  </ul>
</aside>

3.4 示例 4：主要内容区域

使用 <main> 元素包裹页面的主要内容。每个页面只应有一个 <main> 元素。

<body>
  <header>...</header>
  <main>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>

4. 假设场景：电商产品页面

想象一个销售电子产品的电商网站。一个产品页面可以在语义上构建如下：

<article>
  <header>
    <h1>超级新款手机</h1>
    <p>品牌: <cite>PhoneCo</cite></p>
  </header>
  
  <section>
    <h2>产品描述</h2>
    <p>这款手机拥有惊人的功能...</p>
  </section>
  
  <aside>
    <h3>客户评价</h3>
    <p>这手机太棒了！ - John</p>
    <p>我很喜欢它！ - Jane</p>
  </aside>
  
  <footer>
    <p>价格: $999</p>
  </footer>
</article>

解析：

<article>代表整个产品信息单元。
<header> 包含产品名称和品牌。
<section> 包含详细描述。
<aside> 显示客户评价（辅助信息）。
<footer> 显示价格（总结信息）。

5. 何时使用 `<div>` 和 `<span>`

虽然首选语义化元素，但 <div> 和 <span> 仍有一席之地。在以下情况使用它们：

没有合适的语义化元素能准确代表该内容。
你需要一个通用的容器仅用于样式设计 (CSS) 或脚本控制 (JS) 目的。

<div class="highlight">
  这段文字被高亮显示。
</div>

<p>
  这是一些带有 <span class="keyword">关键词</span> 的文本。
</p>

在这些例子中，<div> 和 <span> 仅用于应用 CSS 类来进行样式设置。

1. 理解语义含义

1.1 语义化元素示例

1.2 非语义化元素示例

2. 为什么要使用语义化 HTML？

3. 实战示例

3.1 示例 1：博客文章

3.2 示例 2：网站页眉

3.3 示例 3：侧边栏

3.4 示例 4：主要内容区域

4. 假设场景：电商产品页面

5. 何时使用 <div> 和 <span>

5. 何时使用 `<div>` 和 `<span>`