div和span均无语义，是W3C定义的通用容器：div为块级流容器，span为行内容器，仅用于分组内容以支持CSS样式或JS操作，不传达结构含义。
div 和 span 的语义定义就是“无语义”
W3C 规范明确将 div 和 span 定义为“通用流容器”和“通用内联容器”，不携带任何结构含义。它们存在的唯一目的是分组内容，方便 CSS 样式或 JS 操作——不是为了告诉浏览器“这是导航栏”或“这是强调文字”，而是“请把这段包起来，我要动它”。这不是设计缺陷，是刻意为之的兜底机制。
屏幕阅读器和搜索引擎只认原生语义标签
当你写 <div class="nav">Home</div>，屏幕阅读器读出来只是“Home”，不会加“导航区域开始”提示；搜索引擎也不会把它当导航信号抓取。而换成 <nav>Home</nav>，两者立刻识别其角色。常见错误现象包括：
- 用
div模拟button：没role、没键盘焦点、按空格/回车不触发 click - 用
span包h2或p：HTML 解析器自动闭合span，DOM 结构断裂，document.querySelector('span h2')返回null - 把整段商品描述塞进
span：语义上它该是<section>或至少<article>，否则辅助技术无法建立内容层级
display 属性改不了语义，只改视觉表现
CSS 的 display: flex 或 display: grid 能让 span 看起来像布局容器，但它的 HTML 内容模型没变：span 仍只能包含 phrasing content（如文本、a、em），不能合法嵌套 div 或 p。实际后果包括：
-
span设width/height失效——因为它是 inline 元素，规范禁止对 inline 元素应用盒模型尺寸 - 强行用
display: block改span显示行为，它在 DOM 中仍是span，无障碍 API 仍不把它当区块处理 -
div加display: inline后，视觉上并排了，但屏幕阅读器仍朗读为“分区”，不是“行内文本片段”
什么时候必须用 div/span，而不是语义标签？
不是所有场景都有现成语义标签可用。以下情况 div 和 span 是合理选择：
立即学习“前端免费学习笔记（深入）”；
- 纯样式包裹：比如给某几个字加 tooltip，用
<span class="tooltip">API</span>，不涉及结构或功能 - JS 动态插入的临时容器：如 Vue/React 渲染时需要一个挂载点，
<div id="app"></div>是标准做法 - 语义标签尚未覆盖的抽象区域：比如仪表盘里一个“实时数据卡片组”，没有
<card-group>这种原生标签，此时<div class="card-group">合理
关键在于：先查有没有语义标签能表达你的意图（header、time、mark、aside…），没有再退到 div/span。别把“能用”当成“该用”。
