应仅在无更合适语义标签时用，如纯样式或事件绑定；误用如应改用，且每页不宜超3次。
什么时候该用 <span></span> 而不是新语义标签
<span></span> 是纯容器，不带任何语义。它只在「没有更合适语义标签」时才该出现——比如给一段文字加样式、绑定 JS 事件，但这段文字本身不构成时间、人名、代码、变量等可命名的语义单元。
常见误用：
– 用 <span class="date">2024-03-15</span> 表示日期 → 应改用 <time datetime="2024-03-15">2024-03-15</time>
– 用 <span class="author">张三</span> 标注作者 → 没有对应行内语义标签，但若在引用上下文中，可用 <cite></cite>（注意：它本意是作品名，不是人名）；更稳妥的是保持 <span></span> + role="author"（仅当需辅助技术识别）
- 优先查 MDN 的「Text-level semantics」列表，确认有没有匹配的行内元素
-
<span></span>不应出现在 HTML 源码里超过 3 次/页——高频出现说明语义建模没想清楚 -
搜索引擎和屏幕阅读器基本忽略
<span></span>，它的存在对 SEO 和可访问性无增益
<time></time>、<mark></mark>、<data></data> 这些新行内标签的实际约束
HTML5 新增的行内语义标签不是“装饰品”，它们有明确的数据契约和渲染默认行为，乱用会破坏语义或触发意外样式。
-
<time></time>必须含datetime属性（即使显示格式不同），否则只是普通文本；值必须是合法机器可读格式（如2024-03-15、13:45、2024-03-15T13:45），不能是"昨天"或"下周二" -
<mark></mark>表示「上下文中的高亮引用」，不是强调色块工具。浏览器默认黄色背景，且部分屏幕阅读器会读作「已标记」——别用它替代background-color实现设计高亮 -
<data></data>必须带value属性，用于关联机器可读值与人类可读内容，例如：<data value="10023">订单 #10023</data>
。没有value就不该用
哪些旧习惯必须改掉：被误认为“行内”的块级标签混用
开发者常把 <div> 塞进段落里假装是行内元素，或给 <code><p></p> 加 display: inline 来“内联化”——这在 HTML5 中属于结构错误，会破坏文档大纲和可访问性树。
立即学习“前端免费学习笔记（深入）”；
<div> 是流内容容器，**永远不能**作为 <code><p></p>的子元素（HTML5 规范明确禁止）-
<p></p>是段落级元素，设display: inline后视觉上可能连成一行，但语义仍是段落，会导致屏幕阅读器停顿、SEO 权重异常分配 - 真正需要包裹多段文字做统一操作？用
<span></span>+ CSSdisplay: inline-block或 flex 容器更安全 -
<time datetime="2024-03-15">今天</time>→ 浏览器向辅助技术报告为「时间：2024年3月15日」，而非「今天」 -
<data value="USD">美元</data>→ 可被数据提取工具识别为键值对，但普通用户看不到value -
<abbr title="HyperText Markup Language">HTML</abbr>→ 屏幕阅读器会朗读全称（前提是title存在且非空）
辅助技术如何感知这些行内语义标签
语义标签的价值不在视觉，而在 DOM 暴露的 ARIA role 和属性。例如：
测试方法：用 Chrome 开发者工具打开「Accessibility」面板，选中元素看「Computed Properties」里的 role 和 value 字段；或用 NVDA / VoiceOver 实际朗读验证。
最容易被忽略的是：所有这些标签都依赖属性值的**正确性和完整性**。少一个 datetime、空一个 title、错写 value 格式，语义就坍缩回 <span></span> ——而你根本不会收到报错提示。
