必须将设为全页唯一、直接子元素且不可嵌套，因其语义是“上下文入口”而非视觉容器；dom顺序应严格为，错位会导致键盘导航失效、屏幕阅读器跳过、seo降权及js逻辑中断。
<main></main> 必须全页唯一、直接子元素、不可嵌套——这是性能、SEO 和无障碍访问的硬性前提，不是可选建议。
为什么 <main></main> 放错位置会导致键盘导航失效
浏览器和屏幕阅读器依赖 DOM 顺序与语义标签协同工作。<main></main> 被包裹在 <div class="container"> 或 <code><section></section> 里时，它就不再是“页面唯一主内容声明”，而降级为普通容器。Safari + VoiceOver 组合会跳过它，键盘 Tab 流直接从 <nav></nav> 落到 <footer></footer>，中间正文“消失”。
- ✅ 正确：
直接子节点中，<main></main>紧跟在<header></header>和<nav></nav>之后 - ❌ 错误：
<div><main>...</main></div>、<article><main>...</main></article>、<main></main>出现在<footer></footer>后面 - ⚠️ 注意：
document.querySelector('main')在错误结构下可能返回null，JS 逻辑意外中断
<header></header> 可以嵌套，但不能滥用为“顶部大盒子”
<header></header> 的语义是“上下文入口”，不是视觉上的“顶部横幅”。一个页面可以有多个 <header></header>：外层声明网站身份，内层声明文章上下文。混用会导致搜索引擎无法区分主次内容。
- ✅ 推荐：
<header>网站Logo+主导航</header><main><article><header><h2>博客标题</h2> <time>2026-06-20</time></header>正文...</article></main> - ❌ 常见错误：把登录框、广告位、多级下拉菜单全塞进最外层
<header></header>，稀释其语义权重 - ⚠️ 影响：Google 的 Page Experience 报告会标记“header 冗余”，间接影响搜索排名
DOM 顺序即内容优先级：<header></header> → <nav></nav> → <main></main> 不可颠倒
这个顺序不是样式约定，而是被辅助技术、爬虫和部分 JS 框架（如 React Server Components 的 hydration 逻辑）默认依赖的隐式契约。调换后，main 可能被跳过或延迟渲染。
- ✅ 自然流：
<header></header>定义我是谁 →<nav></nav>告诉你能去哪 →<main></main>展示你现在在哪、要看什么 - ❌ 反模式：
<main></main>提前出现，<nav></nav>放在底部；或用 CSSorder打乱真实 DOM 顺序 - ⚠️ 兼容陷阱：某些 SSR 框架（如 Next.js App Router）在 hydration 阶段会校验语义结构，顺序错乱触发 warning 或 layout shift
真正难的不是写对标签，而是克制——忍住不给每个区块都套 <div>，忍住不把 <code><main></main> 当样式容器用。语义一旦污染，后续加 ARIA、做 SEO 优化、适配新屏幕阅读器，全是补救成本。
