直接用和两个标签就能立住页面语义骨架；必须为首个直接子元素且含引导性内容，必须唯一、裸露、不可被任何语义标签包裹，二者按序出现即构成基础可导航流。
直接用 header 和 main 两个标签，就能立住页面语义骨架。它们不是“可选装饰”，而是机器识别内容主次的最小必要信号——header 告诉爬虫和屏幕阅读器“这是入口”，main 则明确宣告“这里才是用户真正要读的东西”。其他标签可以后续补，但这俩必须先到位。
header：只放引导性内容，且位置必须靠前
header 应作为 body 的第一个直接子元素，里面放网站 Logo、主标题、全局搜索框或主导航入口。它不负责装正文、广告或侧边栏。一个页面可以有多个 header（比如 article 里也能有自己的 header），但最外层那个必须紧贴 body 开头，且内部至少含一个有意义的标题（h1–h6）或导航结构。
- ✅ 正确：
我的博客
- ❌ 错误：…（class 不被机器识别）
- ❌ 错误：
…
main：唯一、裸露、不可包裹
main 必须是 body 的直接子元素，全页只能出现一次，且不能被任何其他语义标签包裹。它不是容器盒子，而是内容可信度声明——Google 把它当主索引区，屏幕阅读器用它做“跳转到主要内容”的锚点。
- ✅ 正确：
… … - ❌ 错误：（被 div 包裹即失效）
… - ❌ 错误：
…
二者配合，自然形成可导航流
header 和 main 按顺序出现在 DOM 中，就构成了最基础的内容流逻辑：用户从顶部入口进入，紧接着抵达核心内容区。这种顺序本身已被辅助技术默认支持——JAWS、NVDA 等工具会按此顺序播报，Lighthouse 的“Landmark 元素”检测项也会直接通过。
- 无需额外 ARIA 属性，header 默认 role="banner"，main 默认 role="main"
- 跳过链接（skip link）可指向 main 的 id，键盘用户按 Tab 即可直达主体
- Search Console 结构化数据测试工具能立即识别出这两个区块，为后续加 article 或 section 打下基础
常见踩坑点与快速自查
检查当前 HTML 是否符合底线要求，只需三步：
- 打开浏览器开发者工具，查看 body 下第一层是否有且仅有一个
和一个 - 确认 main 标签没有父级语义标签（如 article、section、nav、footer）
- 用 W3C 验证器跑一遍，报错 “Element main not allowed as child of element…” 就说明嵌套违规
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
