必须配真实标题（h2–h6），否则语义失效：屏幕阅读器跳过、seo无法识别、大纲工具忽略；无标题应改用或css容器；它不适用于按钮、轮播图等交互单元，而应专注可命名、可跳转的主题节。

没标题的 <section></section> 基本等于 <div> <p>浏览器会照常渲染，但语义完全失效：屏幕阅读器跳过它、SEO 工具无法提取主题、HTML5 Outliner 直接忽略该节点。你写 <code><section><p>点击下载</p></section>，和写 <div><p>点击下载</p></div> 在辅助技术眼里没有区别——只是多打了 7 个字符。

• 标题必须是真实的 <h2></h2>–<h6></h6>，不能用 <p class="title"></p> 或 CSS 伪元素模拟
• 标题可以视觉隐藏，比如 <h3 class="visually-hidden">用户反馈</h3>，但必须存在且为 heading 元素
• 多个连续无标题的 <section></section> 是典型信号：你其实想用的是 <div> 或 CSS Grid 容器 <h3> <code><section></section> 不是用来包按钮、轮播图或导航栏的

这些是交互/布局单元，不是「可命名、可跳转、可独立理解」的主题节。把轮播图外层套 <section></section>，相当于给一张海报贴上“第 3 章”的标签——它不构成章节。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 导航栏应使用 <nav></nav>，页脚用 <footer></footer>，侧边栏用 <aside></aside>
• 纯样式需求（如加背景色、触发动画）优先用 <div class="hero-banner"> <li>组件库中常见错误：<code><section class="card-grid"></section> 里面只有 <div class="card"> —— 这里没有主题，只有结构 <h3>嵌套时标题层级必须递进，不能全用 <code><h2></h2>

  父 <section></section> 用 <h2></h2>，子 <section></section> 就得用 <h3></h3>；如果子节还要再分，就用 <h4></h4>。全用 <h2></h2> 会让大纲工具显示为平铺列表，失去层级含义。

  • 正确：<section><h2>部署流程</h2> <section><h3>本地调试</h3></section><section><h3>生产发布</h3></section></section>
  • 错误：<section><h2>部署流程</h2> <section><h2>本地调试</h2></section></section>（第二层 <h2></h2> 被解析为同级新节）
  • 标题不必都视觉可见，但层级关系必须真实反映内容逻辑深度

  和 <article></article>、<main></main> 混用时，角色不能互换

  <section></section> 是组织者，不是内容主体。它不能替代 <article></article> 去包裹一篇博客，也不能替代 <main></main> 当整页内容容器。

  • <main></main> 只能出现一次，且不能是 <section></section> 的子元素
  • 一篇博文适合用 <article></article> 包裹，内部再用 <section></section> 分「背景」「实现」「测试」小节
  • 把整个 <main></main> 套进一个 <section></section>，反而模糊了主次——<main></main> 本身已是最高层级语义容器
  语义标签不会报错，但一旦写错，问题会藏在三个月后的无障碍测试里、藏在 SEO 报告的权重稀释中、藏在你自己回看代码时那句“这 <section id="block-12"></section> 到底是干啥的？”