main 必须唯一且直接作为 body 子元素，因其是辅助技术和搜索引擎定位主内容的唯一语义锚点；嵌套在 section 或 div 中会导致可访问性失效和 seo 误判。

页面大纲不是靠手动编号或注释凑出来的，而是由 main、article、section、header 这些标签的嵌套关系和标题层级自动生成的。

为什么 main 必须唯一且不能嵌套

浏览器、屏幕阅读器和搜索引擎都依赖 main 定位用户真正要读的内容。一旦它被包在 div、section 或 article 里，辅助技术会误判主内容范围，SEO 也可能把导航栏当正文索引。

• ✅ 正确写法：<main><h1>产品详情</h1> <p>…</p></main>，直接作为 的子元素
• ❌ 错误写法：<section><main>…</main></section> 或 <div class="wrapper"><main>…</main></div>
• ⚠️ 注意：main 内可以有多个 article，但 article 里不能再放 main —— 否则语义冲突，相当于说“子内容比父内容还核心”

article 和 section 怎么选：删掉周围还能不能懂

这不是风格偏好问题，而是机器可识别的结构信号。RSS 抓取、打印预览、屏幕阅读器跳转都靠这个判断。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 用 article：博客正文、新闻条目、商品卡片、用户评论——单独复制出来，标题+时间+正文依然完整可读
• 用 section：“安装步骤”“API 列表”“常见问题”这类逻辑分组，本身没标题就失去意义，必须配 <h2></h2> 才构成有效大纲节点
• 别用 section 包空白占位符、装饰性分割线或纯图标——那该用 div

标题层级怎么对齐结构，而不是只调字号

h1–h6 是大纲锚点，不是样式开关。跳级或乱用会直接让屏幕阅读器丢失导航路径，也让搜索引擎无法建模内容权重。

• 全页通常只一个 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"></time>

最常被忽略的一点是：main 里塞了登录框、搜索栏或广告位，表面看只是布局混杂，实际后果是屏幕阅读器跳过整个 main，用户得手动滚动才能找到正文——结构一错，可访问性就断了第一环。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！