2.3 文档骨架与分区元素
2.3 文档骨架与分区元素
本节摘要：分区元素是 HTML5 给整页结构立的标准词汇：header、nav、main、article、section、aside、footer 各管一种结构角色。本节逐一给出精确含义与嵌套规则，用一份完整的博客页骨架把七者串起来，并对照"同一页面的 div 版"看信息量差在哪里。
学习目标
阅读完本节，你应当能够：
- 准确说出七个分区元素各自的结构角色；
- 搭出一份 header/nav/main/aside/footer 齐备且合法的页面骨架；
- 判断内容该进 article 还是 section，并说明判别问题；
- 列出 main 的唯一性约束与 aside 的两种典型位置；
- 把一份 div 流页面改写成语义骨架而不改动任何内容。
七个元素，七种角色
先给每个元素一句不含糊的定义。
header： introductory content，导入性内容区——页首的标题、标语、搜索框，或 article 开头的标题作者行。它不是"页面顶部的横条"（位置无关，角色有关），一个页面里 header 可以出现多次（页面级一个、每篇文章里再各一个）。
nav：导航链接集合——一组"站内跳转"链接。判别标准不是"放在哪"，而是"这组链接是不是在帮用户在站点或文档间移动"。页脚那排法律条款链接算不算 nav？通常不算——它们不是主要导航，放进 footer 直接写 a 即可。nav 里的链接对读屏用户价值极高，他们会直接跳到导航，所以只把真正承担导航职责的链接集放进来。
main：页面主内容，每页一个，且不得嵌进 article、aside、nav、header、footer 里。它是整页的"正文保护区"——读屏软件提供"跳到主内容"快捷键，跳的就是 main。这条唯一性约束是七个元素里最硬的规矩。
article：独立成篇的内容单元——离开上下文仍然完整可读、可被单独订阅或转发。判别问题是："这段内容放进阅读器单独展示，成立吗？"博客文章、新闻、评论、商品卡片，都是。
section：主题分组——按主题把相关内容聚在一起，通常配一个标题。判别问题是："这一块是在讲一个小主题吗？"article 与 section 的分界：article 看独立性，section 看主题性。一篇博文是 article；博文里"安装步骤""常见问题"两小节是 section；评论区整体是 section（评论们的集合），每条评论又是 article——嵌套使用完全合法。
aside：与主内容间接相关的内容——侧栏推荐、术语解释、相关链接。两种位置对应两种解读：在 main 之外是页面级侧栏；嵌在 article 内是"与这段内容相关的补充"（如边注、拉出的引语）。
footer：结语性内容——版权、作者信息、相关链接。与 header 对称，同样一页可多次出现（页脚一个、每篇文章末尾一个）。
一份完整的页面骨架
概念落到代码。一份典型的"博客首页 + 一篇文章"骨架：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>结构示范：一篇技术博客</title> </head> <body> <header> <h1>造页手记</h1> <p>一个关于网页结构与标准的博客</p> <nav aria-label="主导航"> <ul> <li><a href="#home">首页</a></li> <li><a href="#archive">归档</a></li> <li><a href="#about">关于</a></li> </ul> </nav> </header> <main> <article> <header> <h2>为什么 main 元素每页只能有一个</h2> <p>发布于 <time datetime="2026-01-12">1月12日</time> · 作者：阿页</p> </header> <section id="install"> <h3>背景</h3> <p>正文段落……</p> </section> <section id="faq"> <h3>常见疑问</h3> <aside> <h4>术语：文档大纲</h4> <p>由标题层级隐式生成的目录结构。</p> </aside> <p>正文段落……</p> </section> <footer> <p>本篇归档于 HTML 结构分类。</p> </footer> </article> <aside aria-label="推荐阅读"> <h2>猜你想读</h2> <ul> <li><a href="#a1">语义化三问</a></li> </ul> </aside> </main> <footer> <p>© 2026 造页手记 · <a href="#feed">RSS 订阅</a></p> </footer> </body> </html>
数一数结构事实：header 出现两次（页面级与文章级）、footer 两次、main 恰好一次且在最外层、article 内嵌 section 与 aside、time 标记发布时间。这份骨架可以直接当项目模板，注释删掉就是生产代码。
同一页面的两个版本
div 版与语义版的差别用图最直观——机器从两种写法里各能读到什么：
嵌套规则速查
分区元素的内容模型决定了合法嵌套。硬约束几条：main 不进任何分区元素；header 与 footer 不嵌自身（header 里不能再来一个 header）；article 与 section 可互相嵌套、可自嵌；nav 里只放导航性质的链接组。另外两条软规则：section 没有标题时多数情况下该用 div；aside 若是整页侧栏，放 main 外，若是文内补充，放 article 内。
容易写错的三处：把 nav 包住整个 header（nav 应只包链接集，header 里还有标题等内容）；在 footer 里再放一个完整内容区（footer 是结语不是"底部大杂烩"）；一条评论一个 article 却忘了评论列表整体用 section 包裹（列表与条目是两层语义）。
article 与 section：一次彻底的分野
这对元素是分区体系里最难的一组，值得用一整节内容反复敲打。先把判别问题钉死——article 问独立性，section 问主题性。"独立成篇"的检验方法是思想实验：把这段内容复制到阅读器、邮件正文或另一个网站里单独展示，读者能不能不依赖本页上下文看懂？能，就是 article。"主题分组"的检验方法是看结构：这一块是不是围绕一个小主题组织起来、并且通常配一个标题？是，就是 section。
用一组实例练判断：
<!-- 新闻站点首页：每条新闻都是独立成篇的 --> <main> <article> <h2>浏览器发布新版本</h2> <p>……完整报道……</p> </article> <article> <h2>标准委员会公布草案</h2> <p>……完整报道……</p> </article> </main> <!-- 产品说明书页：一整篇文档是 article，内部按主题切 section --> <article> <h1>空气净化器使用手册</h1> <section> <h2>开箱清单</h2> <p>……</p> </section> <section> <h2>日常维护</h2> <p>……</p> </section> </article>
两段代码的关键差别：新闻列表里每条报道是并列的独立作品，各自 article；说明书是一个整体作品（单独转发仍然成立），内部小节只是主题切片，不独立，所以外层 article 内层 section。第三种常见形态是嵌套混合：评论区整体是 section（评论的集合，主题是"大家的讨论"），每条评论是 article（独立表达一个观点，单独引用成立）。判断做多了会形成条件反射，判断错了回头用两个检验问题复盘即可。
还有一种实战折衷要交代：真实项目里"卡片流"页面（商品列表、动态列表）的每张卡片通常做成 article——卡片会被单独分享、单独收藏，独立性强。但如果卡片本身只是跳转入口、没有实质内容（只有标题和缩略图的纯引流位），div 加语义类名反而更诚实：里面没有"篇"，硬套 article 是语义注水。
地标角色：读屏用户的世界地图
分区元素在无障碍领域有个正式名字——地标。读屏软件会把页面里的 header、nav、main、footer 列成一张"地标清单"，视障用户按快捷键在地标之间跳转，相当于明眼用户扫一眼版面就知道导航在哪、正文在哪。这张地图的质量完全取决于分区元素用得对不对：main 缺失，"跳到正文"失效；nav 滥用（页面七八个 nav），地标清单变成噪音；全 div 页面，地图干脆是空的，视障用户只能从页面顶部线性听下来。
多个同类地标并存时，用 aria-label 给它们起可区分的名字——上文骨架里 nav 与 aside 都写了 aria-label，读屏用户听到的就是"主导航""推荐阅读"而不是两个无名的 nav。这条实践成本一行代码，是分区元素与第 4 章可访问性的衔接点。
骨架模板与团队约定
把骨架沉淀成模板是团队效率的关键一步。我建议每个项目维护一份"页面骨架基线"，写清四件事：第一，main 由布局层唯一提供，内容页填充它；第二，页面级 header 与 footer 放布局层，业务页不重复写；第三，每页 h1 由页面自己声明，组件里最高只到 h2，避免组件复用时打乱层级；第四，需要多个 nav 或 aside 时必须带 aria-label 区分。这四条约定把本章的全部规则变成了可执行的团队纪律，新人拿到模板就站在了正确结构之上。
模板之外再配一条评审口令："这个 div 问过那句话了吗"。代码评审遇到新增的 div，就问一句"有没有现成的语义元素"——回答得出来（确实没有），放行；回答不出来，回去查对照表。语义化在团队里的落地，靠的不是每个人的觉悟，而是这种低成本的习惯装置。
动手改造：div 流到语义骨架
给一段典型的旧代码做改造练习：
<!-- 改造前 --> <div class="page"> <div class="top-bar"> <div class="site-name">造页手记</div> <div class="menu"><a href="#">首页</a> <a href="#">归档</a></div> </div> <div class="body-area"> <div class="main-col"> <div class="post"> <div class="post-title">为什么 main 每页一个</div> <div class="post-meta">2026-01-12</div> <div class="post-body">正文……</div> </div> </div> <div class="side-col"> <div class="side-title">推荐</div> <a href="#">语义化三问</a> </div> </div> <div class="bottom-bar">© 2026</div> </div>
按"标题→分区→细节"三步走。第一步扶正标题：site-name 是页面的 h1，post-title 是文章的 h2。第二步换分区：top-bar 里站点名加 menu 分成 header 与 nav；main-col 的主内容用 main 包裹、post 换 article；side-col 是 aside；bottom-bar 是 footer。第三步抠细节：post-meta 里的日期换 time 加 datetime 属性。改造后的代码就是上文骨架的缩略版，内容零改动，机器可读性从零到满。
💡 关键直觉：分区元素的判别永远是"问内容一个问题"——独立成篇吗（article）、同一主题吗（section）、间接相关吗（aside）、帮人跳转吗（nav）。位置和长相都不参与判断。
高频疑问四则
问：header 里必须放 h1 或标题吗？
规范说 header"通常"包含标题，不是硬性要求。页面级 header 放站点名（h1 或仅 Logo）加导航很常见；article 的 header 放标题加作者时间。反过来，标题不必须在 header 里——一个只有一句 h2 的区块，直接写 h2 就够，包一层空 header 反而是噪音。
问：侧栏内容用 aside 还是 section？
看它与主内容的关系：推荐阅读、热门排行这类"离了主内容也独立成立、但属于陪衬"的用 aside；如果侧栏其实承载着核心功能（比如文档站的章节目录，用户高频使用），用 nav（目录本质是文档内导航）更准确。元素选择始终跟着内容角色走，不跟着屏幕位置走。
问：一行新闻列表，用 ul 还是多个 article？
两个层面可以叠加：列表容器用 ul 表达"这是并列清单"，每个 li 内部再放 article 表达"每条是独立作品"。不必二选一——ul 管并列关系，article 管独立性，它们回答不同的问题。
问：模板引擎循环输出卡片，main 怎么办？
main 由页面级模板提供且只出现一次，循环卡片渲染进 main 内部的列表容器。框架项目里最常见的违规是"每个路由组件都自带一份 main"——切换路由后页面出现多个 main。约定俗成的做法是把 main 提升到布局层，路由组件只填充 main 的内容。
一个学习建议
本章的每个元素都配了完整的两两对比或真实页面案例，读的时候先自己给出判断，再看文中答案，判断出错的地方才是真正要学的位置。
本节要点回顾
（分区元素的最佳记忆法不是背定义，而是把两个判别问题背熟：独立成篇吗、同一主题吗——问题在手，元素自来。）
（骨架模板值得复制进自己的笔记，每个新项目从它起手，结构质量从第一行就有保障。）
- 七元素各管一种角色：header 导入、nav 导航、main 主内容、article 独立成篇、section 主题分组、aside 间接相关、footer 结语；除 main 外均可一页多次。
- main 的唯一性是最硬约束：每页一个，不进任何分区元素，是读屏"跳到正文"的锚点。
- article 对 section 的判别问题：单独拿出来还完整吗——是则 article，只按主题聚合则 section。
- aside 双位置双含义：main 外是页面侧栏，article 内是文内补充。
- 改造三步法：先扶正标题层级，再换分区容器，最后抠 time、figure 等细节。
文字骨架立完，下一节讲内容的两个特殊分支——声音画面与图形。