<section>本质是语义化区块，需有明确主题和标题，助读屏器与搜索引擎理解结构；<div>是无语义容器，专用于布局、JS锚点等无需语义的场景。
section 和 div 的本质区别：语义有没有，搜索引擎和读屏器看不看得懂
根本区别就一条：<section> 告诉浏览器“这里是一块有主题的内容”，<div> 只说“这里我随便划了个框”。前者能被屏幕阅读器识别为逻辑章节，能帮 Google 理解你的页面结构；后者对语义解析器来说等于透明——它只认 class、id 或 ARIA 属性。
- 用
<section>时，必须有明确的主题，且最好带一个<h2>～<h6>标题（W3C 明确建议） - 用
<div>时，你完全可以不写标题，甚至里面塞一堆按钮、图标、动画容器都没问题 - SEO 不会因为多几个
<section>直接给你加权，但结构混乱的页面（全用<div>套娃）会让爬虫更难提取核心内容
什么时候非得用 section，不能用 div？
不是“能用就用”，而是“该用才用”。判断标准很实在：这段内容能不能单独拎出来，让人一眼看懂它在讲什么？
- ✅ 适合
<section>：<section><h3>客户评价</h3><p>“产品响应超快！”</p></section>—— 主题清晰、自带标题、可独立成块 - ✅ 也适合
<section>：<section><h2>技术栈</h2><ul><li>React 18</li><li>TypeScript</li></ul></section>—— 是文档中一个逻辑分组 - ❌ 别硬套
<section>：<section><div class="loading-spinner"></div></section>—— 没主题、没标题、纯 UI 容器，用<div>更诚实 - ❌ 别滥用嵌套：
<section><section><section>…</section></section></section>—— 三层<section>很可能说明你该用<article>或重构层级
div 还没过时？它现在最不可替代的用途是什么
<div> 不是“老古董”，而是“万能挂钩”。它唯一不可替代的价值，就是当你**不需要语义，只需要一个可控的块级盒子**时。
- 做 CSS Grid / Flex 布局的直接父容器：
<div class="grid-container"><div class="item">A</div></div>—— 语义无关，纯为样式服务 - 作为 JS 操作锚点：
<div id="modal-root"></div>、<div data-chart-id="sales-2025"></div>—— 语义不重要，hook 才重要 - 包裹 SVG、Canvas、WebGL 渲染区 —— 这些本就不属于文档语义流，用
<section>反而误导辅助技术 - 微前端子应用挂载点：
<div id="micro-app-payment"></div>—— 语义由子应用自己定义，主壳不越界
容易被忽略的兼容性与实操细节
别以为写了 <section> 就万事大吉。有些坑，只有上线后被读屏器念错、或被 Lighthouse 报“结构性问题”才意识到。
立即学习“前端免费学习笔记（深入）”；
- 每个
<section>应该有且仅有一个“显式标题”（<h2>–<h6>），不能靠 CSS 视觉模拟标题（比如<div class="section-title">）—— 辅助设备压根不认 - 不要用
<section>替代<header>/<footer>/<nav>—— 它们语义更精确，优先级更高 - 旧版 IE（IE8 及以下）不支持
<section>，但现代项目基本不用考虑；若需兼容，用 HTML5 Shiv 加 polyfill 即可，不影响语义设计决策 - Lighthouse 的“Document structure”审计项会检查
<section>是否缺失标题，这是最容易被漏掉的硬性提示
<!-- ✅ 合规示例 --> <section> <h2>我们的团队</h2> <p>由 12 名全栈工程师组成</p> </section> <p><!-- ❌ Lighthouse 会警告：section missing heading --> <section> <p>由 12 名全栈工程师组成</p> </section>
语义标签不是装饰，是给机器读的说明书。写 <section> 前，先问一句：这段内容，脱离上下文还能自证身份吗？不能，就老实用 <div>。
