A08 语义化页面骨架

摘要：全用 div 也能做出任何页面，代价是结构信息丢失：标题层级只剩视觉大小，分区边界只剩背景色。语义化标签把「这是导航」「这是正文」「这是补充说明」写进结构本身，浏览器扩展、朗读软件与搜索引擎才能读出页面轮廓。本文给出七个区块标签的选择依据，并用一张图说明如何把一个页面拆成骨架。
关键词：语义化，页面骨架，大纲，header，main

所属：frontend/html / A-入门 ｜上一篇：A07-表单与输入控件 ｜下一篇：A09-实战拼一张个人主页

1 引言

语义化不是风格偏好，而是可观测的收益：浏览器阅读模式、屏幕朗读、搜索结果摘要、自动化抓取，都依赖标签语义。用 div 堆出的页面在这些场景下退化为一段连续文本。

本文先给出区块标签的职责边界，再给出一个页面的骨架拆解与完整代码。范围见表 1-1。

项	本文覆盖	本文不覆盖
区块标签	header、nav、main、article、section、aside、footer	更细的内容分区与微格式
内容标签	figure、time、address、mark	富媒体嵌入（video/iframe）
判定方法	大纲视角的骨架拆解	无障碍属性细节（C 阶段）

2 预备知识

项	要求	核对方式
环境	A02 的本地服务器	能访问 `localhost`
浏览器	Chrome 130+ / Edge 130+	地址栏 `about:version` 查看
前置	A03 至 A07	六类标签均可用
文件	`html-practice/skeleton.html`	后缀 `.html`，UTF-8

3 原理与实现

3.1 一个页面的骨架拆解

把页面按「谁在看、看什么」切开，骨架自然浮现，如图 3-1 所示。

flowchart TD
    B["body"] --> H["header<br/>站点标识与导航"]
    B --> M["main<br/>页面唯一主体"]
    B --> F["footer<br/>版权与备案"]
    M --> A1["article<br/>一篇完整内容"]
    M --> A2["section<br/>带标题的分组"]
    M --> AS["aside<br/>补充说明"]
    H --> N["nav<br/>链接组"]
    A1 --> FG["figure<br/>图与图注"]

图 3-1 语义化页面骨架

图上可见：main 全页只出现一次，article 与 section 的区别在于前者可独立成篇，后者只作为主体的一部分。

3.2 骨架代码

<!-- 运行环境：Chrome 130+；body 内结构示意，样式见 A09 -->
<body>
  <header>
    <p>李明的工作笔记</p>
    <nav aria-label="主导航">
      <ul>
        <li><a href="./index.html">首页</a></li>
        <li><a href="./about.html">关于</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>杭州的雨季</h1>
        <p>发布于 <time datetime="2026-06-18">2026 年 6 月 18 日</time></p>
      </header>

      <section>
        <h2>气候特征</h2>
        <p>雨季集中在 6 月至 7 月。</p>
        <figure>
          <img src="./assets/images/rain.jpg" alt="雨天街道，路面反光" width="640" height="360" />
          <figcaption>雨季街景</figcaption>
        </figure>
      </section>

      <section>
        <h2>记录方式</h2>
        <p>每日记录湿度与体感。</p>
      </section>
    </article>

    <aside>
      <h2>相关笔记</h2>
      <ul>
        <li><a href="./note-css.html">布局记录</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>联系：<a href="mailto:hello@example.com">hello@example.com</a></p>
    <address>杭州 · 2026</address>
  </footer>
</body>

七个区块标签的选择依据见表 3-1。

标签	职责	使用条件	常见误用
`header`	区块或页面的头部	可出现在 body 与 article 内	当成页头专用，正文内不使用
`nav`	主要导航链接组	链接数量成组且为主导航	给所有链接组都套 nav
`main`	页面唯一主体	全页仅一个	一个页面写两个 main
`article`	可独立分发的内容单元	能脱离页面单独成立	把整页内容塞进一个 article
`section`	带标题的主题分组	必须有标题	用 section 代替 div 做样式容器
`aside`	与主体相关但不属于主体	侧栏、延伸阅读、术语提示	把主内容放进 aside
`footer`	区块或页面尾部	版权、联系方式、备案	把分页导航单独放 footer 而不给 nav
`figure`	图、代码、表格等独立单元 + 图注	需要图注时	用 p 叠加说明文字
`time`	机器可读的时间	需 `datetime` 属性	只写外观文字，无 datetime
`address`	联系信息	与作者或站点相关	用于任意地址文本
`div`	无语义的通用容器	仅用于样式或脚本挂载	所有结构都用 div

判定规则三条：一个 section 内必须有一个标题（h2 至 h6）；article 与 section 不能空着——没有标题也没有内容时用 div；能用语义标签就不用 div，但需要纯样式容器时不必强行语义化。

4 验证与讨论

保存文件，浏览器打开，确认结构渲染正常。
打开开发者工具 Elements 面板，收起 head，从 body 展开，核对与图 3-1 一致。
打开 Chrome 的「阅读模式」或安装阅读模式扩展，确认能识别出正文区域。
执行 document.querySelectorAll('main').length，预期输出 1；执行 document.querySelectorAll('section').length，预期为 2。

检查项	预期结果	说明
主体唯一	`main` 数量为 1	全页只能有一个主体
分区有标题	每个 section 都有 h2	否则结构退化为 div
图注关联	图片与图注同属一个 figure	结构上成对
时间可读	time 的 datetime 为标准日期格式	便于程序解析
朗读顺序	头部 → 主体 → 补充 → 页脚	与源码顺序一致

讨论与局限。 语义标签不产生默认视觉差异（除少量默认边距），因此「看不出效果」是正常的，验证要回到 Elements 面板与阅读模式。另外 header 嵌套在 article 内时表示文章头部，与页面头部不是同一层级，这是初学者最常见的层级误读。

5 常见问题

现象	原因	处理
阅读模式识别不到正文	主体内容放在 div 中，没有 main	用 main 包裹主体
大纲里出现空节点	section 没有标题	补标题，或改用 div
页面出现两个主体区域	复制模板时重复 main	只保留一个 main
figure 内图片溢出	未给宽高或宽度超出容器	补 width/height，样式由 CSS 处理
nav 被朗读为「导航」多次	多个 nav 未用 aria-label 区分	为主导航补 `aria-label`

6 结论

序号	结论	依据
1	语义标签的价值在结构与辅助技术，不在外观	4 节步骤 3
2	`main` 全页唯一，`section` 必须有标题	表 3-1
3	`article` 可独立成篇，`section` 只作分组	图 3-1
4	`div` 只用于样式与脚本挂载	表 3-1

参考文献

[1] MDN Web Docs · HTML 文档与网站架构，https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure（访问于 2026-10-29）
[2] HTML Living Standard · Sections，WHATWG，https://html.spec.whatwg.org/multipage/sections.html（访问于 2026-10-29）