应优先用<section>当内容有独立主题和标题，否则用<div>；<section>必须含<h2>–<h6>标题才具语义，影响大纲、SEO与可访问性，无标题时等同<div>且造成误导。
section 和 div 功能上都能装内容、加样式、绑事件，但浏览器、搜索引擎和读屏器“理解”它们的方式完全不同：一个在说“这是有主题的一节”，另一个只说“这里我划了个框”。选错不卡页面，但会悄悄影响可访问性、SEO 和长期维护成本。
看有没有标题——语义成立的硬门槛
一个 <section> 没有 <h2>～<h6>，就等于没身份证。它不会被读屏器识别为可跳转章节，大纲工具也提取不出结构，实际效果和 <div> 一样，还多一层误导。
- ✅ 正确：
<section><h3>用户反馈</h3><p>“响应很快！”</p></section></li> <li>❌ 错误：<code><section><p>正在加载中…</p></section>
→ 应改用<div> - ⚠️ 隐藏标题也可行：用
<h3 class="visually-hidden">评论区</h3>配合 CSS 隐藏，语义保留，视觉不干扰
看内容是否自成一节——逻辑独立性是关键
这段内容能不能单独拎出来，让人一眼知道它讲什么？是否在文档大纲里天然占一节？满足这个，才轮到 <section> 出场。
- 适合
<section>：产品页的「技术参数」「售后服务」「客户案例」——每个都有明确主题、自带标题、可被链接或摘要 - 不适合
<section>：轮播图容器、下拉菜单外层、表单分组字段 —— 它们是交互或布局单元，不是内容主题 - 注意嵌套：子
<section>也必须有自己的标题，不能靠父级标题“代管”
看用途是不是纯技术需求——div 的不可替代性
<div> 不是旧标签，而是唯一明确声明“此处无语义”的精准工具。当目的只是样式控制、JS 操作钩子或布局分块，它就是最诚实的选择。
立即学习“前端免费学习笔记（深入）”；
- 该用
<div>：CSS Grid/Flex 的直接父容器、模态框根节点、data-chart-id挂载点、带 class 的侧边栏包装器 - 不该硬换：把导航栏包成
<section>（应为<nav>），或把整篇正文塞进<div class="article">（应为<article>或<main>） - 判断小技巧：删掉这个标签，内容还能自然分段吗？不能，说明它不该是
<section>
别混淆分工——它们不是升级关系，而是各司其职
<section> 不是“高级版 <div>”，<article> 也不是“更强版 <section>”。三者定位清晰：
-
<section>：有主题、有标题、可纳入大纲的内容区块（如“使用说明”“常见问题”） -
<article>：可独立发布、复用或 RSS 推送的内容单元（如一篇博客、一条新闻） -
<div>：无语义，纯为样式、脚本或布局服务的通用容器
混用或强行替换，反而让结构更难懂。语义标签的价值不在“看起来规范”，而在让机器和人都能更快读懂页面骨架。
