必须用仅当内容有可命名主题且出现在文档大纲中；它必须含–标题，否则损害可访问性与SEO；无标题的语义断裂，应改用。
<section></section> 不是带样式的 <div>，它只在内容天然有独立主题、能被命名并出现在文档大纲里时才该用；没标题的 <code><section></section> 语义断裂，反而干扰 SEO 和可访问性。
什么时候必须用 <section></section> 而不是 <div>
<p>判断依据只有一个：这块内容是否自带可命名的主题，且会出现在浏览器“文档结构”视图或读屏软件的大纲导航中。</p>
<ul>
<li>产品页里的「核心功能」「客户案例」「技术参数」——每个都该是 <code><section></section>，因为它们各自有 <h2></h2> 标题，且可被单独链接或摘要
<article></article>，整个“最新文章”容器才是 <section></section>
<div> + <code>class 更准确
<section></section> 却一时想不出标题，大概率说明它不该是 <section></section>
<section></section> 必须配 <h2></h2>–<h6></h6> 吗？
是的。W3C 明确建议每个 <section></section> 应含标题元素；没有标题的 <section></section> 在辅助技术中基本等于隐身。
- NVDA / VoiceOver 不会把它列为导航节点
- 自动大纲提取工具无法识别该区域的语义边界
- Google Lighthouse 会报 “
<section></section>缺少标题”，直接拉低“可访问性”评分 - CSS 选择器如
section h3失效——因为结构锚点（标题）不存在
为什么用 <div> 反而更“安全”？
<p>在 JS 操作和样式隔离场景下，<code><div> 的无语义性是优势，而非缺陷。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>
<code>document.querySelector('.sidebar') 不会意外匹配到语义化标签（比如误抓 <section class="sidebar"></section>），避免重构时 DOM 查询漂移
<section></section>，会导致屏幕阅读器报“空章节”<section></section> 是典型误用——它更适合 <footer></footer>
<div role="region" aria-labelledby="xxx"> 能模拟语义，但不如原生 <code><section></section> 简洁可靠
真正难的不是记住规则，而是每次写标签前停半秒：这段内容，有没有一个自然浮现的标题？如果没有，就别碰 <section></section> —— 它不负责布局，也不提供默认样式，只负责说清“这是什么”。
