main 必须唯一且直接作为 body 子元素，因其是辅助技术和搜索引擎定位主内容的唯一语义锚点；嵌套在 section 或 div 中会导致可访问性失效和 SEO 误判。
页面大纲不是靠手动编号或注释凑出来的，而是由 main、article、section、header 这些标签的嵌套关系和标题层级自动生成的。
为什么 main 必须唯一且不能嵌套
浏览器、屏幕阅读器和搜索引擎都依赖 main 定位用户真正要读的内容。一旦它被包在 div、section 或 article 里，辅助技术会误判主内容范围，SEO 也可能把导航栏当正文索引。
- ✅ 正确写法：
<main><h1>产品详情</h1><p>…</p></main>，直接作为<body>的子元素 - ❌ 错误写法：
<section><main>…</main></section>或<div class="wrapper"><main>…</main></div> - ⚠️ 注意：
main内可以有多个article，但article里不能再放main—— 否则语义冲突，相当于说“子内容比父内容还核心”
article 和 section 怎么选：删掉周围还能不能懂
这不是风格偏好问题，而是机器可识别的结构信号。RSS 抓取、打印预览、屏幕阅读器跳转都靠这个判断。
- 用
article：博客正文、新闻条目、商品卡片、用户评论——单独复制出来，标题+时间+正文依然完整可读 - 用
section：“安装步骤”“API 列表”“常见问题”这类逻辑分组，本身没标题就失去意义，必须配<h2>才构成有效大纲节点 - 别用
section包空白占位符、装饰性分割线或纯图标——那该用div
标题层级怎么对齐结构，而不是只调字号
h1–h6 是大纲锚点，不是样式开关。跳级或乱用会直接让屏幕阅读器丢失导航路径，也让搜索引擎无法建模内容权重。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 全页通常只一个
h1，放在main或顶级article里，含核心关键词（比如<h1>React 语义化组件库 v2.3</h1>） -
section和article内部从h2开始，逐级向下；禁止h1后直接h3 - 纯视觉 banner 大字 slogan 改用
div+ CSS，别占h2坑位——否则文档树出现“悬空节点”
nav、aside、header 这些标签怎么不“漂移”
它们不是按位置命名的，而是按职能定义的。错用会让语义失效，甚至关闭无障碍快捷通道。
-
nav只包主导航链接：顶部菜单、左侧栏目树；页脚一堆友情链接、文章末尾“上一篇/下一篇”，一般不用nav -
aside不等于“在右边”，而是指与当前main或article相关但可分离的信息，比如“相关推荐”“作者简介”；广告横幅不算 -
header和footer可多次出现，但每次都要服务其直接父级：页面级header含 logo + 主导航；article内的header就只该有标题 +<time datetime="2026-08-25">
最常被忽略的一点是：main 里塞了登录框、搜索栏或广告位，表面看只是布局混杂，实际后果是屏幕阅读器跳过整个 main，用户得手动滚动才能找到正文——结构一错，可访问性就断了第一环。
