html语义化标签是强制契约：唯一且不可嵌套，需带标题而可独立分发，表弱相关内容，错误嵌套将破坏无障碍、seo及css行为。
<header></header>、<nav></nav>、<main></main>、<section></section>、<article></article>、<aside></aside>、<footer></footer> 这些标签不是“可选装饰”，而是页面结构的强制契约——用错或漏用，会直接破坏屏幕阅读器导航、SEO抓取逻辑，甚至影响某些 CSS 选择器（如 :has()）的行为。
为什么 <main></main> 只能出现一次且不能嵌套在 <header></header> 里
浏览器和辅助技术依赖 <main></main> 精确定位核心内容。若重复使用，屏幕阅读器可能跳过后续 <main></main>；若嵌套在 <header></header> 或 <footer></footer> 中，语义冲突会导致 ARIA 标准校验失败（例如 axe 测试报 region-missing-label）。
- 正确写法：
<header>...</header><main>...</main><footer>...</footer> - 错误写法：
<header><main>...</main></header>或两个并列<main></main> - 例外场景：单页应用（SPA）中，路由切换时需动态替换
<main></main>内容，但 DOM 中仍只能存在一个实例
<section></section> 和 <article></article> 的关键区别在哪
<section></section> 是逻辑分组容器，必须有标题（<h2></h2>–<h6></h6>）才成立；<article></article> 是可独立分发的内容单元，自带隐式语义边界（比如 RSS 订阅、打印时自动分页）。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
<section></section>：产品功能介绍区、FAQ 列表、用户评论区（整体作为一块） - 用
<article></article>：每一条博客文章、新闻条目、用户发布的帖子 - 常见误用：
<section></section>里没标题 → 应改用<div>；把整页博客列表包进一个 <code><article></article>→ 应用<section></section>包裹，每个条目用单独<article></article><aside></aside>不只是“侧边栏”，它代表关联性弱的内容<aside></aside>的语义本质是“与当前上下文相关但非必需”，位置无关——它可以出现在<main></main>内部、<article></article>旁边，甚至文档末尾（如术语注释）。浏览器不会强制渲染为右侧浮动。- 适合放：作者简介（在文章末尾）、术语解释（配合
<details></details>）、广告、相关推荐（但仅当推荐与当前<article></article>弱相关） - 不适合放：主导航菜单（该用
<nav></nav>）、网站全局搜索框（该用<header></header>内<form></form>） - 注意：如果
<aside></aside>出现在<article></article>外但属于同一页面主题（如整站“热门标签”），应放在<main></main>后、<footer></footer>前，而非塞进<header></header>
最容易被忽略的是嵌套层级的语义退化：比如在
<article></article>里再套一层<section></section>却不加标题，或把<nav></nav>放进<footer></footer>当“友情链接”——此时<nav></nav>依然有效，但语义权重下降，部分爬虫可能降权处理。结构对了，语义才立得住。 - 适合放：作者简介（在文章末尾）、术语解释（配合
