HTML5页面结构必须严格按逻辑流顺序排列：header→nav→main→aside→footer，main须唯一且为body直接子元素，否则屏幕阅读器将因语义链断裂而跳过关键内容。
HTML标签顺序错乱会导致屏幕阅读器跳过关键内容
语义结构不是靠单个标签决定的，而是靠标签之间的嵌套与顺序共同构成文档大纲。如果 <header> 放在 <main> 后面，或 <nav> 嵌在 <footer> 里，屏幕阅读器会按 DOM 顺序播报，结果就是用户先听到页脚再听导航——逻辑断裂，无障碍树直接失效。
常见错误现象：
-
<main>出现在<header>和<nav>之前 -
<article>外层没包<main>，却塞进了<aside>和<footer> - 用
<section>包裹整个页面，里面再嵌<header>、<main>、<footer>—— 这会让<section>成为“最外层主题”，而实际页面主体反而被降级
正确顺序应严格遵循内容逻辑流：从上到下是用户预期的信息优先级。W3C 明确建议页面骨架顺序为：<header> → <nav> → <main> → <aside>（可选）→ <footer>。其中 <main> 必须唯一且不能被 <article> 或 <section> 包裹。
嵌套层级过深会让 CSS 选择器和 JS 查询变得脆弱
写成 <div><section><article><header><h1> 这种五层嵌套，表面看“更语义”，实则把样式和逻辑绑死在结构上。一旦某层被动态移除（比如 CMS 隐藏了 <section>），所有依赖 section > article > header 的 CSS 就全失效。
立即学习“前端免费学习笔记（深入）”；
使用场景中真正需要的，往往只是明确的模块边界：
- 用
data-module="product-list"替代<section><div class="list">，JS 可靠锚定，不惧结构微调 -
<article>内部必须有<header>或<h1>才算完整语义单元；若只有纯段落，直接用<div role="article">更轻量 - 多个同级
<section>必须各自带<h2>，否则它们在大纲中无法被区分，等于白写
Chrome DevTools 里右键节点选 “Break on → Attribute modifications”，能快速暴露哪些嵌套层正被 JS 频繁 patch——这些往往是维护黑洞的起点。
标题层级断裂会让 SEO 和辅助技术同时掉链子
<h1> 到 <h6> 不是字号开关，而是文档大纲的锚点。如果页面开头是 <h2>，中间突然跳 <h1>，再出 <h4>，搜索引擎和屏幕阅读器都会认为结构异常，可能降权或跳过后续标题。
参数差异容易被忽略：
-
<h1>应全页唯一，且通常位于<main>内部，代表页面核心主题 -
<section>和<article>可以各自拥有独立的<h1>（HTML5 允许），但前提是它们被正确嵌套——即<article>在<main>里，而非平级并列 - 用
<h2>开头的<section>，其子<section>必须用<h3>，不能跳级或回退
axe 工具检测到 heading-order 错误时，不只是提示“写法不对”，它意味着你的内容主次关系对机器不可信——这比样式错位更难调试，因为问题不出现在视觉层。
main 标签位置错误会直接破坏页面 Landmark 结构
<main> 是 W3C 定义的“顶级 Landmark”，浏览器和读屏软件靠它快速定位页面主体。但它一旦被嵌进 <section> 或 <article>，就会变成“某个区块的主体”，而非“整页主体”——这个语义降级无法通过 CSS 或 JS 补救。
容易踩的坑：
- SSR 渲染时模板拼接出两个
<main>，客户端 hydrate 后未清理，导致无障碍树出现双主干 - 用
<main>包裹侧边栏广告（误以为“主要展示内容”），实际应归入<aside> - SPA 路由切换时，旧
<main>未销毁，新<main>直接追加，DOM 中残留多个
验证方式很简单：打开 Chrome DevTools → Lighthouse → Accessibility 报告，搜索 landmark-is-top-level。只要报这个错误，就说明 <main> 的位置或数量已脱离规范——这不是风格问题，是结构性缺陷。
