<var>标签不是数学公式变量的语义化工具,仅用于标注程序代码或文本中被操作的变量名;数学公式应使用MathML的<mi>或KaTeX等专业方案。

<var> 标签确实存在,但它**不是用来“标记数学公式中的变量”的语义化工具**——这是个常见误解。它的实际用途是表示程序代码、用户输入或可变内容中的变量名,和数学公式(比如 LaTeX 风格的表达式)没有直接关系。
为什么 <var> 不适合数学公式
HTML 的 <var> 是纯语义标签,浏览器不会给它默认的斜体样式(虽然很多浏览器会渲染成斜体,但这只是 UA stylesheet 的副作用,不可依赖)。更重要的是:<var> 不参与数学排版逻辑,不与 <math>、<mi> 等 MathML 元素协作,也无法被屏幕阅读器识别为数学变量。
- 在纯 HTML 文本中写 “速度
<var>v</var> = <code><var>s</var>/<code><var>t</var>” 是合法的,但仅表示“这里有个叫 v 的变量”,不传达“v 是斜体物理量符号”这一数学惯例</li> <li>若混入 MathML(如 <code><math><mi>v</mi></math>
),<var>不能嵌套其中,且<mi>本身已专用于标识数学标识符 - 用
<var>替代<em>或 CSSfont-style: italic来“假装”是数学变量,会导致语义错位和可访问性问题
真正该用什么:MathML 的 <mi> 和 CSS 控制
标准做法是使用 MathML(原生支持或通过 polyfill),其中 <mi>(math identifier)才是专为数学变量设计的元素。它默认斜体,且被辅助技术正确识别为数学符号。
<math xmlns="http://www.w3.org/1998/Math/MathML"> <mi>v</mi> <mo>=</mo> <mi>s</mi> <mo>/</mo> <mi>t</mi> </math>
-
<mi>自动处理字体、间距、大小等数学排版细节;<var>完全不参与这些 - 现代浏览器(Chrome/Firefox/Safari)对基础 MathML 支持良好;Edge 也已支持
- 若需兼容旧环境,可用
mathjax或katex渲染 LaTeX 字符串,它们内部会生成正确的<mi>结构
如果坚持用 HTML + CSS 模拟,该怎么写
当项目完全不用 MathML(比如简单文档、邮件模板、CMS 富文本限制),可用语义更准确的组合:用 <span> 加 role 和 CSS,而非 <var>。
立即学习“前端免费学习笔记(深入)”;
<p>速度 <span role="math" aria-label="v equals s divided by t"><span class="math-var">v</span> = <span class="math-var">s</span>/<span class="math-var">t</span></span></p>
- CSS 中定义
.math-var { font-style: italic; },确保视觉一致 -
role="math"和aria-label提供基本可访问性,比裸<var>更可靠 - 避免用
<var>套<sub>或<sup>,因为下标/上标在数学中属于整体符号的一部分(如v₀),应统一用<msub>(MathML)或<span class="math-sub">(CSS 方案)
真正棘手的不是怎么加标签,而是要不要让变量名参与计算上下文——比如一个 <var> 里写的 x,如果后面 JS 要读取它的值,就得额外绑定 data 属性或 DOM 引用。而 MathML 或 KaTeX 渲染出的 <mi>x</mi> 是只读展示层,边界清晰。这点容易被忽略,但直接影响后续是否要混合交互逻辑。



















