Vanilla Breeze

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

  • For emphasis — use <em>
  • For code identifiers (function names, classes) — use <code>
  • For keyboard input — use <kbd>
  • For program output — use <samp>

Examples

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

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 (shared var(--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
↑