直接用<header>和<main>两个标签就能立住页面语义骨架；<header>必须为<body>首个直接子元素且含引导性内容，<main>必须唯一、裸露、不可被任何语义标签包裹，二者按序出现即构成基础可导航流。
直接用 header 和 main 两个标签，就能立住页面语义骨架。它们不是“可选装饰”，而是机器识别内容主次的最小必要信号——header 告诉爬虫和屏幕阅读器“这是入口”，main 则明确宣告“这里才是用户真正要读的东西”。其他标签可以后续补，但这俩必须先到位。
header：只放引导性内容，且位置必须靠前
header 应作为 body 的第一个直接子元素，里面放网站 Logo、主标题、全局搜索框或主导航入口。它不负责装正文、广告或侧边栏。一个页面可以有多个 header（比如 article 里也能有自己的 header），但最外层那个必须紧贴 body 开头，且内部至少含一个有意义的标题（h1–h6）或导航结构。
- ✅ 正确：<body><header><h1>我的博客</h1><nav>…</nav></header>
- ❌ 错误：<body><div class="header">…</div>（class 不被机器识别）
- ❌ 错误：<body><section><header>…</header></section>（嵌套削弱语义权重）
main：唯一、裸露、不可包裹
main 必须是 body 的直接子元素，全页只能出现一次，且不能被任何其他语义标签包裹。它不是容器盒子，而是内容可信度声明——Google 把它当主索引区，屏幕阅读器用它做“跳转到主要内容”的锚点。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅ 正确：<body><header>…</header><main><article>…</article></main><footer>…</footer>
- ❌ 错误：<body><div id="app"><main>…</main></div>（被 div 包裹即失效）
- ❌ 错误：<article><main>…</main></article>（main 不能嵌套在 article 内）
二者配合，自然形成可导航流
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 下第一层是否有且仅有一个 <header> 和一个 <main>
- 确认 main 标签没有父级语义标签（如 article、section、nav、footer）
- 用 W3C 验证器跑一遍，报错 “Element main not allowed as child of element…” 就说明嵌套违规
