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