这些HTML5语义标签是结构解析、无障碍访问和SEO的关键依据；article用于可独立分发的内容，section仅需主题与标题；main必须全局唯一且不可嵌套于其他容器；nav仅限主要站点导航链接组；标题层级须严格匹配语义容器。
header、nav、main、article、section、aside、footer 这些标签不是“可选装饰”，而是浏览器解析页面结构、屏幕阅读器构建大纲、搜索引擎提取主内容的直接依据。用错一个，就可能让 main 被忽略、article 无法被 RSS 抓取、nav 不被辅助设备识别。
什么时候该用 article 而不是 section
article 的核心判据是“可独立分发”：整块 HTML 复制出去，仍能被理解为一篇完整内容（比如发到微博、推送到邮件、导入 RSS 阅读器）。博客正文、新闻稿、用户评论、产品卡片都符合这个条件。
-
section只需满足“有主题+带标题”，比如“技术方案”“性能对比”“用户反馈”，但不保证能脱离上下文存在 - 把整页内容包进一个
article是常见错误——它不是“文章区域”的同义词，而是语义上的“独立发布单元” -
article内部可以嵌套section，但反过来不行；section里放h2合理，article里没h1或h2就等于缺失标题，辅助技术会跳过
main 和 section 嵌套时的边界问题
main 必须是全局唯一、且不能出现在 article、aside、section 内部。它的作用不是“视觉居中”，而是标记“对用户最有价值的内容区块”。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 错误写法：
<section><main>...</main></section>—— 浏览器会忽略内部main，SEO 权重归零 - 正确结构：
<main><article>...</article><section>...</section></main> - 如果页面有多个“主要内容流”（如双栏新闻列表），不要硬塞进一个
main；应只用一个main包裹最核心的那部分，其余用section或article
nav 的判定标准比“有链接”更严格
不是所有带链接的容器都该用 nav。W3C 明确要求：nav 必须包裹“主要导航链接组”，即帮助用户在站点内跳转的路径集合。
立即学习“前端免费学习笔记（深入）”；
- 面包屑、分页、筛选项、标签云、社交分享按钮——这些都不算主导航，建议用
div+aria-label（如aria-label="breadcrumb"）替代 -
nav内部必须含至少两个有意义的链接；单个“返回首页”按钮不构成导航 - 侧边栏里的“相关文章链接”属于内容延伸，不是站点导航，用
aside更合适
最容易被忽略的是标题层级与语义容器的绑定关系：article 没 h2、section 用 h4 开头、main 里直接跟 p 而无任何标题——这些都会让大纲树断裂，屏幕阅读器无法建立有效导航路径。语义化不是加对标签就结束，而是让每个标签都承担起它该有的结构责任。
