应优先用 当内容有独立主题和标题，否则用 ； 影响大纲、seo 与可访问性，须配 等标题，无标题或仅样式需求时禁用。
用 <section></section> 还是 <div>？看语义要不要被浏览器和辅助工具“读懂”
<p>该用 <code><section></section> 还是 <div>，本质不是“哪个更高级”，而是“这段内容有没有独立主题”。<code><section></section> 告诉浏览器：“这里是一块有标题、有逻辑边界的文档片段”；<div> 只说：“我就是个容器，别多想”。
<p>常见错误现象：<br>– 用 <code><section></section> 包裹纯样式分组（比如轮播图的左右箭头容器）
– 在没有 <h1>–<h6></h6>
</h1> 的地方硬套 <section></section>，导致屏幕阅读器报“空章节”
– 把整个页脚写成 <section></section>，其实它更适合 <footer></footer>
-
<section></section> 应出现在大纲中：浏览器开发者工具的“文档结构”视图或 NVDA 等读屏软件会把它列为一个层级节点
<div> 永远不出现在语义大纲里，只用于布局、JS 挂载点或 CSS 作用域隔离
<li>没有标题的“区域”别用 <code><section></section> —— W3C 明确建议每个 <section></section> 应有 <h2></h2> 类标题元素
<section></section> 和 <div> 对 SEO 与可访问性的影响很实际
<p>搜索引擎和读屏软件依赖 HTML 语义推断内容重要性。一个没标题的 <code><section></section> 不仅不会提升 SEO，反而可能干扰大纲解析，让关键内容权重被稀释。
- Google 的 Lighthouse 会警告“
<section></section> 缺少标题”，影响“可访问性”评分
- 使用
<div role="region" aria-labelledby="xxx"> 能模拟语义，但不如原生 <code><section></section> 简洁可靠
<div> 在 JS 中更“安全”：比如 <code>document.querySelector('.sidebar') 不会意外匹配到语义化标签，避免重构时 DOM 查询漂移
哪些场景必须用 <section></section>，哪些坚决不能
不是“能用就用”，而是“该用才用”。判断依据非常具体：这块内容能否单独提取出来，还保持主题完整？
- ✅ 必须用：
<section></section> 包裹“用户评论列表”，且内部有 <h2>大家怎么说</h2>
- ✅ 必须用：
<section></section> 表示“技术参数表”，开头是 <h3>硬件配置</h3>
- ❌ 坚决不用：
<section></section> 仅为了给某几个 <p></p> 加统一 margin —— 用 <div class="spacing-group"> 更准确
<li>❌ 坚决不用：<code><section></section> 套 <nav></nav> 或 <aside></aside> —— 它们已有明确语义，嵌套反而混乱
兼容性与默认样式差异小，但真有坑
现代浏览器对 <section></section> 和 <div> 的默认样式几乎一致（都是 display: block），但老版本 IE（≤8）不识别 <code><section></section>，会当普通未知标签处理 —— 不渲染、不继承样式、JS 选不到。
- 如果项目还需支持 IE8，必须加
document.createElement('section') 或引入 html5shiv
- CSS 中写
section { margin-top: 1rem; } 在无 polyfill 的 IE8 下完全无效
- 用
<div> 则无此问题，但换来的是语义缺失 —— 这是个权衡，不是技术债，是设计选择
<p>真正容易被忽略的，是团队协作时对“语义”的理解偏差：有人把 <code><section></section> 当作“高级 <div>”，结果页面大纲层层嵌套却毫无逻辑。语义标签不是装饰，是契约 —— 写了 <code><section></section>，就得让它配得上那个标题。
<section></section> 应出现在大纲中：浏览器开发者工具的“文档结构”视图或 NVDA 等读屏软件会把它列为一个层级节点<div> 永远不出现在语义大纲里，只用于布局、JS 挂载点或 CSS 作用域隔离
<li>没有标题的“区域”别用 <code><section></section> —— W3C 明确建议每个 <section></section> 应有 <h2></h2> 类标题元素
<section></section> 和 <div> 对 SEO 与可访问性的影响很实际
<p>搜索引擎和读屏软件依赖 HTML 语义推断内容重要性。一个没标题的 <code><section></section> 不仅不会提升 SEO，反而可能干扰大纲解析，让关键内容权重被稀释。
- Google 的 Lighthouse 会警告“
<section></section> 缺少标题”，影响“可访问性”评分
- 使用
<div role="region" aria-labelledby="xxx"> 能模拟语义，但不如原生 <code><section></section> 简洁可靠
<div> 在 JS 中更“安全”：比如 <code>document.querySelector('.sidebar') 不会意外匹配到语义化标签，避免重构时 DOM 查询漂移
哪些场景必须用 <section></section>，哪些坚决不能
不是“能用就用”，而是“该用才用”。判断依据非常具体：这块内容能否单独提取出来，还保持主题完整？
- ✅ 必须用：
<section></section> 包裹“用户评论列表”，且内部有 <h2>大家怎么说</h2>
- ✅ 必须用：
<section></section> 表示“技术参数表”，开头是 <h3>硬件配置</h3>
- ❌ 坚决不用：
<section></section> 仅为了给某几个 <p></p> 加统一 margin —— 用 <div class="spacing-group"> 更准确
<li>❌ 坚决不用：<code><section></section> 套 <nav></nav> 或 <aside></aside> —— 它们已有明确语义，嵌套反而混乱
兼容性与默认样式差异小，但真有坑
现代浏览器对 <section></section> 和 <div> 的默认样式几乎一致（都是 display: block），但老版本 IE（≤8）不识别 <code><section></section>，会当普通未知标签处理 —— 不渲染、不继承样式、JS 选不到。
- 如果项目还需支持 IE8，必须加
document.createElement('section') 或引入 html5shiv
- CSS 中写
section { margin-top: 1rem; } 在无 polyfill 的 IE8 下完全无效
- 用
<div> 则无此问题，但换来的是语义缺失 —— 这是个权衡，不是技术债，是设计选择
<p>真正容易被忽略的，是团队协作时对“语义”的理解偏差：有人把 <code><section></section> 当作“高级 <div>”，结果页面大纲层层嵌套却毫无逻辑。语义标签不是装饰，是契约 —— 写了 <code><section></section>，就得让它配得上那个标题。
<section></section> 缺少标题”，影响“可访问性”评分<div role="region" aria-labelledby="xxx"> 能模拟语义，但不如原生 <code><section></section> 简洁可靠
<div> 在 JS 中更“安全”：比如 <code>document.querySelector('.sidebar') 不会意外匹配到语义化标签，避免重构时 DOM 查询漂移
哪些场景必须用 <section></section>，哪些坚决不能
不是“能用就用”，而是“该用才用”。判断依据非常具体：这块内容能否单独提取出来，还保持主题完整？
- ✅ 必须用：
<section></section>包裹“用户评论列表”，且内部有<h2>大家怎么说</h2> - ✅ 必须用：
<section></section>表示“技术参数表”，开头是<h3>硬件配置</h3> - ❌ 坚决不用：
<section></section>仅为了给某几个<p></p>加统一 margin —— 用<div class="spacing-group"> 更准确 <li>❌ 坚决不用：<code><section></section>套<nav></nav>或<aside></aside>—— 它们已有明确语义，嵌套反而混乱 - 如果项目还需支持 IE8，必须加
document.createElement('section')或引入 html5shiv - CSS 中写
section { margin-top: 1rem; }在无 polyfill 的 IE8 下完全无效 - 用
<div> 则无此问题，但换来的是语义缺失 —— 这是个权衡，不是技术债，是设计选择 <p>真正容易被忽略的，是团队协作时对“语义”的理解偏差：有人把 <code><section></section>当作“高级<div>”，结果页面大纲层层嵌套却毫无逻辑。语义标签不是装饰，是契约 —— 写了 <code><section></section>，就得让它配得上那个标题。
兼容性与默认样式差异小，但真有坑
现代浏览器对 <section></section> 和 <div> 的默认样式几乎一致（都是 display: block），但老版本 IE（≤8）不识别 <code><section></section>，会当普通未知标签处理 —— 不渲染、不继承样式、JS 选不到。
