轻量级公式排版：HTML 的 sub 标签其实被低估了

在编写技术文档或者科普文章时，遇到化学式、物理变量下标几乎是家常便饭。很多人下意识的反应是截图贴上去，或者干脆引入庞大的 MathJax 库来渲染公式。其实对于简单的下标需求，HTML 原生的 <sub> 标签才是最高效的解法。它不仅加载零成本，还能保持文字的可复制性和可搜索性，这在纯文本阅读体验上远胜于静态图片。

基础语法与语义表达

直接使用非常直观。假设你要写水分子式，只需将需要下标的数字或字母包裹在标签内：H<sub>2</sub>O。浏览器渲染后，“2”会自动变成左下角的下标状态，无需额外设置。

<p>这里展示的是 H<sub>2</sub>O，氧气则是 O<sub>2</sub></p>

这种写法最大的优势在于语义明确。搜索引擎爬虫能准确识别这是“下标”修饰关系，而非普通的文本噪音。相比于把公式做成图片，这不仅利于 SEO 收录，对视障用户使用的屏幕阅读器来说，也能正确读出上下文含义，符合现代 Web 无障碍标准。

视觉微调避免“突兀感”

默认情况下，不同浏览器对 <sub> 的字号缩小比例和基线垂直位置处理略有差异。有时候下标会显得过小看不清，或者位置过低，跟主文格格不入。这时候就需要一点点 CSS 介入来优化视觉层级。

你可以全局控制它的样式，让下标不至于喧宾夺主：

sub {
  font-size: 0.8em; 
  line-height: 1;
  vertical-align: sub;
}

重点调整vertical-align属性。有些老旧模板里，下标可能会下沉过多，通过明确指定为 sub 或调整基线值，能让整体行高更和谐，不会破坏段落的呼吸感。同时注意line-height，防止下标所在行的间距突然变大，影响阅读流畅度。

适用场景的边界拓展

除了化学元素，这个标签在数学逻辑里同样灵活。比如数列中的通项 $a_n$，代码写作 a<sub>n</sub>；或者是在描述数组索引时，用 arr<sub>i</sub> 来指代特定元素。

这种细粒度的语义标记，能让阅读者一眼分清变量名和下标逻辑，减少认知负担。甚至在某些版本记录中，用 v2.0 这种小字号变体虽然不是严格语法，但利用 <small> 配合 <sub> 也能实现类似的视觉效果，保持页面整洁。

什么时候该停下来？

工具虽好，也得看场合。如果你需要处理复杂的分式、积分符号或者行列式，硬用 <sub> 拼凑只会让代码变得难以维护，效果也惨不忍睹。例如想画一个分数，试图用多个标签模拟线条和上下层，那简直是灾难。

涉及到多行公式或复杂运算结构时，请果断切换到 KaTeX 或 MathML。<sub> 只适合处理单字符级别的简单下标。强行用它解决复杂问题，后期修改代码时会让你怀疑人生，且移动端适配往往会出现错位。

总结

做内容排版，本质上是在寻找美观与效率的平衡点。对于日常遇到的 H2O、CO2 或者简单的变量下标，原生标签是性价比之王。它不需要额外的脚本支持，几行代码就能解决问题，还兼顾了无障碍阅读的标准。

下次编辑文章时，别再急着截图了。尝试回归原生 HTML 标签，你会发现网页内容的结构反而变得更加清晰轻盈。技术选型没有绝对的高低，只有适不适合当下的场景，用对的地方就是好工具。