<section>必须含且仅含一个h2–h6标题，用于逻辑自洽、可命名、可锚点跳转的内容块；否则应使用<div>或其他语义化标签。
没标题的 <section> 就是废标签
浏览器不会报错，但语义链彻底断裂：屏幕阅读器跳过、Lighthouse 报 heading-level 错误、SEO 提取不到主题意图。它渲染出来和 <div> 一模一样，只是多敲了 17 个字符。
-
<section>必须含且仅含一个<h2>–<h6>（不能是<h1>，也不能多个） - 标题可以视觉隐藏，比如
<h3 class="visually-hidden">客户案例</h3>，但元素必须存在 - 如果内容只有一句话+按钮，比如
<p>点击下载 SDK</p><button>下载</button>，别硬套<section>——那是<div class="cta-block">的活
<section> 和 <div> 到底怎么选
不看样式、不看嵌套深度，只问一句：这块内容删掉后，剩下部分是否仍逻辑自洽？它能不能被别人单独链接或引用？
- 能起名字、进大纲、被锚点跳转 → 用
<section>：<section id="deployment"><h2>部署流程</h2>...</section> - 只为加 margin / 触发动画 / 给 JS 找个钩子 → 用
<div>：<div class="card-grid js-lazy-load"> - 已有更具体语义标签 → 优先用它们：
<nav>、<aside>、<footer>都不该被<section>包裹
嵌套 <section> 时标题层级必须递进
父级用 <h2>，子级就得用 <h3>；全用 <h2> 会让文档大纲扁平化，浏览器自动生成的结构树里看不出从属关系。
- 正确：
<section><h2>核心功能</h2><section><h3>实时同步</h3></section></section> - 错误：
<section><h2>核心功能</h2><section><h2>实时同步</h2></section></section> - 同级多个
<section>应逻辑并列，比如「技术原理」「代码示例」「测试验证」，不是「步骤1→步骤2→步骤3」这种线性流程（后者更适合用<ol>）
容易被忽略的维护成本：三个月后你还认得清 id="sec-4" 是干啥的吗
真正难的不是写对标签，而是写之前想清楚：这段内容有没有资格出现在文档大纲里？如果连自己都说不出它的主题名，那就别用 <section>。
IE8 不识别它，但那不是大问题；问题是人——当你回看 <section id="block-7"> 却没标题时，得花两分钟猜它是「用户反馈」还是「售后政策」。语义一旦模糊，就再也无法靠工具自动修复。
