var
Represents a variable in mathematics or programming, visually distinguished with italic style and accent color.
Description
The <var> element represents a variable in a mathematical expression or programming context. VB styles it with italic text and var(--color-interactive) to visually distinguish it from general italic text like <em>. It is part of VB's code-family and is automatically protected from machine translation via the i18n system.
When to Use
- Mathematical variables: x, y, n, π in equations
- Programming variables: Variable names referenced in prose
- Placeholders: User-supplied values in instructions (e.g., your-api-key)
When NOT to Use
Examples
Mathematical variables
<p>The area of a circle is <var>A</var> = <var>π</var><var>r</var><sup>2</sup>.</p><p>Pythagorean: <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></p>
Programming variables
<p>Set <var>maxRetries</var> to the desired number of attempts.</p><p>The function returns <var>result</var> after processing.</p>
Placeholder values
<p>Replace <var>your-api-key</var> with the key from your dashboard.</p><p>Navigate to <code>https://example.com/users/<var>id</var></code></p>
var vs em vs code
All three render distinctly in VB:
| Element | Rendering | Use Case |
|---|---|---|
<var> |
Italic + --color-interactive |
Variables, placeholders |
<em> |
Italic only | Stress emphasis |
<code> |
Monospace + background | Code identifiers, inline code |
CSS Reference
var CSS
var { font-style: italic; color: var(--color-interactive);} /* var is never machine-translated */code, kbd, samp, pre, var { translate: no;}
The accent color makes variables scannable in technical prose without the visual weight of <code>'s background. The translate: no prevents machine translation from mangling variable names.
Accessibility
- Screen readers do not announce
<var>differently from surrounding text - The accent color is a visual cue only — context should make the variable clear
- For complex math where variables are critical, consider MathML or
aria-label
Related
<code>— Code identifiers and inline code (sharedvar(--font-mono))<kbd>— Keyboard input<samp>— Sample program output<em>— Emphasis (not variables)<sup>— Exponents alongside variables<sub>— Subscripts for indexed variables- Internationalization — Translation protection for code-family elements