<var> Variable

A variable in math or in code. Italic by default.

<var> marks the name of a variable in a math expression or a program, or a placeholder the reader should fill in. Browsers show it in italics.

It suits simple cases in running text. Real equations with fractions or roots need MathML and the <math> element.

The var element definition (opens in a new tab) covers variables in mathematics and programming, plus placeholders in prose. Full formulas are on the math element page.

Syntax

<var>x</var>

When to use it

A <var> holds a name that stands for a value: x in a math explanation, a variable name in prose about a program, or a placeholder in a command that readers replace with their own value, as in git clone url.

For a fixed identifier from real code, such as a function name you copy exactly, code is the better fit. For placeholders the reader types, var can sit inside code or kbd. For formulas with fractions or roots, use MathML, which has its own elements for variables.

Placeholders cause a typical mistake: readers type the placeholder word itself, or keep angle brackets that a guide used around it. Explain each var near the command, for example in a short list that says what to put in place of username. Also keep var for things that vary; a constant number like 3.14 is not a variable, so leave it as plain text.

Live example

Edit the code and watch the preview.

<p>The area of a rectangle is <var>w</var> &times; <var>h</var>.</p>

More examples

Placeholder in a command

A setup guide shows a command with a placeholder inside code. The var element marks the part the reader must replace, and the list below explains what to type instead.

<p>Run this command:</p>
<pre><code>mkdir <var>project-name</var></code></pre>
<ul>
  <li><var>project-name</var>: the folder name you want, for example my-site.</li>
</ul>

Physics formula

A short physics note uses var for each quantity in a formula and explains every symbol in a list. The multiplication sign is written as an entity. Readers who forget a symbol can find it below the formula.

<p><var>d</var> = <var>v</var> &times; <var>t</var></p>
<ul>
  <li><var>d</var> is the distance travelled.</li>
  <li><var>v</var> is the speed.</li>
  <li><var>t</var> is the time taken.</li>
</ul>

Tip: Anything beyond a simple expression should be written in MathML.

Browser support

Every browser supports var, which dates from HTML 2.0, and shows it in italics. For maths beyond simple expressions, MathML Core is now supported in current versions of Chrome, Edge, Firefox and Safari.

Accessibility

Screen readers read var as plain text, so explain unfamiliar symbols in words close by. Real equations belong in MathML, defined in MathML Core (opens in a new tab), which assistive technology can read as math.

Common mistakes

Wrong

<i>x</i> = 5

Right

<var>x</var> = 5

var tells readers and tools that x is a variable. Plain italics say nothing.

Frequently asked questions

What is the var tag in HTML?

It marks a variable. That can be a variable in a mathematical expression, as in <var>x</var> + 2, or in programming text, such as a parameter name. <var> can also mark a placeholder the reader should replace. Browsers display it in italics by default, following the convention explained in Wikipedia's article on variables in mathematics (opens in a new tab).

Should I use var or MathML for equations?

Both, for different jobs. A single variable in running text needs nothing more than <var>. Real equations with fractions, roots or exponents belong in MathML via the <math> element, which all modern browsers support and screen readers can read properly. Inside MathML, variables are written with <mi> instead of var.

Related text elements

<p>One paragraph of text.<br>Breaks the line inside text, as in a postal address or a poem.<hr>A change of topic between paragraphs, drawn as a horizontal line.<pre>Shows text exactly as typed, spaces and line breaks included.<blockquote>A longer quotation from another source, set apart as its own block.<div>A generic block box with no meaning, for grouping and styling.<span>A generic inline wrapper with no meaning, for styling part of a line of text.<strong>Text that is important, serious or urgent. Shown in bold by default.<em>Stress emphasis that changes what a sentence means. Italic by default.<b>Makes text stand out without adding importance, as with keywords. Bold by default.<i>Text in another voice: foreign words, terms, thoughts, ship names. Italic.<u>Text with an unspoken annotation, such as a flagged spelling error.<s>Content that is no longer accurate or relevant, drawn crossed out.<mark>Highlighted text, like a marker pen, showing relevance in the current context.<small>Side comments and fine print, like copyright lines or legal notes.<sub>Subscript text, set below the line, as in H2O.<sup>Superscript text, set above the line, as in exponents or 1st.<code>A fragment of computer code, set in a monospace font.<kbd>Keys or text the user should press or type.<samp>Sample output from a program or a computer system.<q>A short quotation inside a sentence. The browser adds the quote marks.<cite>The title of a creative work: a book, film, song, game or article.<abbr>An abbreviation or acronym, with an optional expansion in title.<dfn>Marks the term that the surrounding sentence or paragraph defines.<time>Marks a date, time or duration and gives it a machine-readable value.<data>Ties visible content to a machine-readable value.<del>Text that was removed from the document. Struck through by default.<ins>Text that was added to the document. Underlined by default.<wbr>A spot where the browser may break a long word if it has to.<bdi>Isolates text of unknown direction, such as user names.<bdo>Forces a text direction and overrides the normal bidi algorithm.<ruby>Small annotations above or beside text, mostly for East Asian pronunciation.<rt>The small reading or note in a ruby annotation.<rp>Fallback brackets around ruby text, shown only where ruby is unsupported.