HTML下标标签使用方法详解

本文深入解析了HTML中`<sub>`标签的正确使用方法与不可替代性，强调在化学式（如H₂O、Ca₃(PO₄)₂）、数学公式及脚注编号等需语义准确、视觉精确定位和无障碍访问的场景中，必须优先采用原生``标签而非CSS模拟——它不仅由浏览器内置排版逻辑保障下标与字体基线的自动适配，还能确保屏幕阅读器正确朗读“sub”语义，避免CSS方案常见的定位漂移、缩放失衡和可访问性失效问题；同时详述了常见误用陷阱（如单标签闭合、错误嵌套、手动设置font-size）及复杂分子式的结构化书写技巧，助你写出语义清晰、跨设备一致、真正符合Web标准的高质量标记。</sub>

直接用 标签最稳妥，浏览器原生支持、语义正确、无需额外样式。CSS 的 vertical-align: sub 虽然也能实现视觉下移，但缺乏语义，对屏幕阅读器不友好，也不适用于需要精确对齐的化学式（比如 H₂O 中的 “2” 必须紧贴 O 左下方）。

什么时候必须用 而不是 CSS 模拟？

化学式、数学公式、脚注编号这类有明确语义的场景， 是唯一推荐方式。例如写 CO₂，若只靠 vertical-align，可能因字体度量差异导致数字位置偏高或过低；而 会触发浏览器内置的下标排版逻辑，自动匹配当前字体的基线与下标偏移量。

常见错误现象：
– 用 span + font-size: 75%; vertical-align: -0.2em 写 H₂SO₄，结果 “2” 和 “4” 高度不一致
– 在不同字体（如系统默认 sans-serif vs 网页加载的 Roboto）下，CSS 下标位置漂移明显
– 屏幕阅读器读出 “H two S O four”，而非 “H sub 2 S O sub 4”

的基础写法和注意事项

语法极简，但几个细节容易踩坑：

• 必须成对使用：₂ 正确，₂ 单标签会导致后续所有文本被误判为下标
• 不能嵌套其他行内元素（如 ）在 里——虽然多数浏览器能渲染，但 HTML 规范不鼓励，且某些严格解析器会降级处理
• 不要给 加 font-size：浏览器已按比例缩放（通常为 75%），手动设值会破坏默认比例，导致与上文文字基线错位
• 多个连续下标要分开包裹：CO₂ 不等于 CO₂（后者是正确写法），更不能写成 CO₂（这是无效 HTML）

遇到复杂分子式（含括号、多级下标）怎么办？