65. 语义化布局概述

本节目标：理解为什么需要语义化布局，以及它带来的好处。

写网页就像盖房子。你可以用砖块随意堆，也可以按功能分区：客厅、卧室、厨房。

语义化布局就是”按功能分区”。

什么是语义化

“语义”就是”意义”。

语义化 HTML，就是让标签本身表达出内容的含义。

<!-- 无语义：只知道这是个"块" -->
<div class="header">网站标题</div>
<div class="nav">导航链接</div>
<div class="main">正文内容</div>
<div class="footer">版权信息</div>

<!-- 语义化：标签自己说明了含义 -->
<header>网站标题</header>
<nav>导航链接</nav>
<main>正文内容</main>
<footer>版权信息</footer>

两段代码看起来差不多。但对浏览器和搜索引擎来说，第二段有明确的结构信息。

div 不是万能的

以前没有语义标签，开发者全靠 <div> 加 class 来区分区域。

<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>

这能跑，但 div 本身没有任何语义。浏览器和搜索引擎只能靠猜 class 名的含义。

HTML5 引入了专门的语义标签，不再需要”猜”了。

常用的语义标签一览

标签	含义	常见用法
`<header>`	头部	页面标题、Logo、搜索框
`<nav>`	导航	菜单、目录
`<main>`	主内容	文章正文、核心信息
`<article>`	独立内容	博客、新闻、评论
`<section>`	主题分区	章节、功能模块
`<aside>`	侧边栏	相关链接、广告
`<footer>`	页脚	版权、联系方式

后面几章会逐一详细讲解每一个标签。这里先建立整体印象。

语义化的三个好处

1. SEO 友好

搜索引擎爬虫读你的 HTML 语义标签越多，越能理解页面结构。

<main> 里的内容比 <aside> 里的内容权重更高。搜索引擎会据此判断重点。

2. 可访问性

屏幕阅读器根据语义标签给用户”导航地图”。

用户可以直接跳到 <main> 主内容区，跳过 <nav> 导航。全用 div 的话就没这个能力。

3. 代码可读性

<!-- 新人接手：逐个看 class 名才能理解结构 -->
<div class="page-header"></div>
<div class="main-content"></div>

<!-- 新人接手：一眼看懂 -->
<header></header>
<main></main>

语义标签降低了团队协作成本。

语义化不等于不要 div

div 仍然有用。纯样式性的包裹、布局容器，用 div 完全没问题。

<!-- 布局容器用 div，内容区用语义标签 -->
<div class="wrapper">
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</div>

不要为了语义化而放弃 div。该用语义标签时用，纯装饰性的还是 div。

一个典型的页面结构

<body>
  <header>
    <h1>我的博客</h1>
    <nav>
      <a href="/">首页</a>
      <a href="/about">关于</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>文章标题</h2>
      <p>文章内容...</p>
    </article>
    <aside>
      <h3>相关链接</h3>
      <ul>...</ul>
    </aside>
  </main>

  <footer>
    <p>版权所有 2026</p>
  </footer>
</body>

这个结构清晰吗？搜索引擎能看懂，屏幕阅读器能看懂，开发者也能看懂。

这就是语义化布局的价值。