HTML5布局语义化实践：内容分区逻辑转化为标签结构

语义化标签结构由header、nav、main、section、article、aside、footer七个核心标签构成：header表页眉或章节头，nav专指主导航，main为唯一且直接子于body的内容主体，article包裹可独立分发内容，section需带标题并围绕同一主题，aside放附属信息，footer用于页面或article底部元信息。

把内容分区逻辑转成标签结构，核心是让每个区块“自己会说话”——用浏览器和辅助工具能直接识别的标签，而不是靠 class 名猜意思。

先理清页面骨架：七个关键标签各司其职

最简也最稳的结构就是这七个标签搭出主干：header、nav、main、section、article、aside、footer。它们不是样式工具，而是语义信标。

• header 表示页眉或章节头部，不只出现在页面顶部，也能用在 article 里做文章标题区
• nav 专指主导航链接集合，比如顶部菜单或侧边栏目导航，不是所有带链接的区域都适用
• main 必须是 body 的直接子元素，且全页只能有一个；它代表用户真正要读的内容，搜索引擎和读屏软件都盯这儿
• article 包裹可独立分发的内容，比如一篇博文、一条新闻、一个论坛帖，删掉页面其他部分它依然成立
• section 是主题性分组，必须带标题（h1–h6），比如“产品特性”“用户评价”这类有明确主题的模块
• aside 放附属信息，如相关链接、作者简介、广告位，内容与主文有关联但非主线
• footer 不只是页面底部，也可用于 article 内部，标注发布时间、编辑者等元信息

别用 div 模拟语义：class 名对机器无效

写 <div class="header">，浏览器和读屏软件只会当它是普通容器，不会识别为页眉，也不会触发 role="banner"。SEO 也抓不到结构权重——Google 明确把 main 内容视为主索引区，而 <div class="main"> 就是普通文本块。

常见问题包括：

立即学习“前端免费学习笔记（深入）”；

• NVDA 报 “no landmark found”
• Lighthouse 在 “Landmark elements” 条目扣分
• DevTools 的 Accessibility 面板显示 computed role 是 generic，不是 banner 或 main

解决方法很简单：删掉 class，直上 header、main 等原生标签。样式照写，语义自动带上。

嵌套有规矩：main 不能套、section 要有题、article 可复用

结构错位会让语义失效，不是写出来就行，得按规范来。

• main 必须是 body 的直接子元素，嵌在 div 或 section 里就等于没写
• section 必须有标题，且内容要围绕同一主题；纯为了布局留白或调整间距，就该用 div
• article 可以嵌套 section，也可以被 section 包裹，但多个 article 并列时不能互相嵌套
• 单页应用切换 tab 时，不要动态插入新 main，应复用原有 main 并替换内容

标题层级要连贯，别跳级也别空缺

每个 section 和 article 都该有标题，而且 h1–h6 要按逻辑顺序使用。比如 article 用 h1，里面的小节用 h2，再往下是 h3。跳过级别（如 h2 后接 h4）会让大纲混乱，影响读屏体验和 SEO。

标题不只是给用户看的，它参与生成文档结构树。W3C Validator 会检查这个，错误提示常是 “Heading level should be sequential”。