必须全页唯一且为直接子元素；需含h2–h6标题才具语义；仅用于可独立订阅或转发的内容。

直接说结论：<main></main> 必须全页唯一、不能嵌套；<section></section> 没标题就是无效语义；<article></article> 不是“内容多就用它”，而是“能单独被 RSS 订阅或转发才配用它”。

为什么 <main></main> 不能嵌套在 <header></header> 或 <footer></footer> 里

浏览器和辅助技术（如屏幕阅读器）把 <main></main> 当作“用户真正要读的那一块”，它的语义是排他性的。一旦嵌套，相当于告诉机器：“这部分既是页头，又是主要内容”——逻辑冲突。

• 实际错误现象：document.querySelector('main') 可能返回 null，尤其在 SSR 渲染或某些旧版 Safari 中
• 兼容性影响：IE 完全不识别 <main></main>，但现代框架（如 React/Vue）若在服务端渲染时误嵌套，会导致 hydration 失败
• 正确写法：它必须是 的直接子元素之一，且只出现一次

<section></section> 必须带 <h2></h2>–<h6></h6> 才算有效

<section></section> 的本质是“有明确主题的内容分组”，不是样式容器。没有标题，机器无法判断它讲的是“安装步骤”还是“用户反馈”，语义就塌了。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

• 常见错误：用 <section class="hero"></section> 包轮播图——这是视觉需求，该用 <div> 或 <code><header></header>
• SEO 影响：Google 的文档大纲解析器会跳过无标题的 <section></section>，相关内容权重被弱化
• 替代方案：如果真需要分组但没自然标题，优先考虑 <div> + ARIA <code>role="region"，比硬塞一个 <h2></h2> 更诚实

  <article></article> 和 <section></section> 别混用：关键看能否独立存在

  区分标准非常具体：能不能被单独抓取、RSS 推送、或转发到其他平台（比如微信公众号嵌入一篇博客）？能，就用 <article></article>；只是主内容里的一个模块（比如“评论区”“相关推荐”），就该用 <section></section> 或 <aside></aside>。

  • 典型误用：把整页博客列表用一个 <article></article> 包住——错，每篇才是独立 <article></article>，列表本身是 <main></main> 下的普通结构
  • 可访问性影响：屏幕阅读器对 <article></article> 会播报“文章开始/结束”，对 <section></section> 则只读标题，混淆会打断用户流
  • 性能提示：多个 <article></article> 建议加 id，方便锚点跳转和分享链接定位（如 #post-123）

  <header></header> 和 <footer></footer> 可以嵌套，但别滥用

  它们不是页面专属，每个 <article></article>、<section></section> 都能有自己的 <header></header> 和 <footer></footer>。但前提是：这块内容确实有自己独立的“头”或“尾”。

  • 合理场景：<article></article> 里的 <header></header> 放标题+作者+<time></time>；<section></section> 末尾的 <footer></footer> 放参考资料链接
  • 高频踩坑：给每个 <div class="card"> 都套 <code><header></header>——除非卡片真有标题、副标题、时间等元信息，否则纯属冗余
  • 小技巧：<time datetime="2026-08-25">今天</time> 必须放在 <header></header> 或 <footer></footer> 内才构成完整语义链

  最容易被忽略的一点：语义化不是“标签越多越好”，而是“每个标签都承担不可替代的角色”。删掉一个 <section></section> 后，如果大纲结构依然成立、辅助设备仍能准确导航，那它大概率不该存在。