必须且只能作为的直接子元素，否则会丧失语义身份，导致可访问性、seo和屏幕阅读器识别失效；强调独立复用，强调逻辑归属；/是区块级而非页面级语义；标题层级须严格对应嵌套关系。

<main></main> 必须且只能出现一次，且必须是 的直接子元素——这是语义化结构的硬性底线，绕不开，也妥协不了。

为什么 <main></main> 不能嵌套在 <div> 或 <code><section></section> 里

浏览器和辅助技术（如 NVDA、VoiceOver）靠标签名识别 landmark 区域。<main></main> 是 ARIA 定义的 main role 的原生映射，一旦被包裹在 <div class="wrapper"> 或 <code><section></section> 中，它就降级为普通内容节点，失去“页面主体”这一语义身份。

常见错误现象包括：

• Lighthouse 报告 “Multiple main landmarks” 或 “Main landmark not found”
• 屏幕阅读器跳过 <main></main>，或把它读作“section”而非“main”
• SEO 工具无法准确提取核心内容区块，影响摘要生成与排名权重分配

正确写法只有一种：<header>…</header><main>…</main><footer>…</footer>。中间不能插任何非语义容器。

<article></article> 和 <section></section> 到底怎么选

两者都用于分组内容，但语义意图完全不同：一个强调“可独立复用”，一个强调“逻辑归属”。选错会导致大纲混乱、可访问性下降。

<article></article> 适用场景：

• 博客文章、新闻条目、论坛帖子（能单独 RSS 订阅或转发）
• 卡片式内容单元（如产品卡片、用户评价），自带完整标题与元信息
• 嵌套使用合理：<main><article><header><h2>标题</h2> <time datetime="2026-04-29">…</time></header>…</article></main>

<section></section> 适用场景：

• 同一主题下的多个子模块，如“功能介绍”“技术参数”“用户反馈”，必须配 <h2></h2>–<h6></h6>
• 不能脱离上下文存在——删掉父级 <main></main> 或 <article></article>，它就失去意义
• 反例：<section class="grid-cols-3"></section> —— 纯布局用途，该用 <div> <h3> <code><header></header> 和 <footer></footer> 可以多次出现，但有隐含规则

  它们不是“页面顶部/底部”的视觉定位标签，而是“区块头部/尾部”的语义角色。一个 <article></article> 内部完全可以有自己的 <header></header>（含 <h2></h2> 和 <time></time>），一个 <section></section> 也能带 <footer></footer>（如“本节数据来源”）。

  

  anything-to-html

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

  下载

  但要注意两个关键约束：

  • <header></header> 不能作为 <main></main> 的子元素再包一层 <div> —— 这会破坏 sectioning root 层级，让大纲生成器误判 <li> <code><footer></footer> 出现在 <article></article> 末尾时，不应包含全站版权信息（那是 级 <footer></footer> 的事）

  典型安全结构：<article><header><h2>标题</h2></header><p>正文…</p> <footer><small>作者：张三</small></footer></article>

  标题层级（<h1></h1>–<h6></h6>）不是样式开关，是结构锚点

  很多开发者用 <h2></h2> 仅因为“看起来比 <p></p> 大”，这会让整个语义骨架坍塌。标题层级必须严格对应内容嵌套关系。

  核心原则：

  • 每个 <article></article> 或 <section></section> 应从 <h2></h2> 开始（<h1></h1> 理论上只属于整个页面，实际中常由 CMS 控制）
  • 子章节用 <h3></h3>，子子章节用 <h4></h4>，禁止跳跃（如 <h2></h2> 后直接 <h5></h5>）
  • 不要用 <h1></h1> 做 logo 文字 —— 那是 <header></header> 里的 <img alt="品牌名"> 或 <span></span> 的事

  工具验证建议：用浏览器扩展 “HeadingsMap” 或 Lighthouse 的 “Document structure” 审计项，一眼看出是否断裂或越级。

  真正难的不是记住每个标签怎么写，而是每次敲下 <div> 前，先问一句：这个容器有没有不可替代的语义？如果没有，它就不该存在。</div>