<var>: The Variable element

The HTML Variable element (<var>) represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Attributes

This element only includes the global attributes.

Usage notes

Related elements

Other elements that are used in contexts in which <var> is commonly used include:

• <code>: The HTML Code element
• <kbd>: The HTML Keyboard input element
• <samp>: The HTML Sample Output element

If you encounter code that is mistakenly using <var> for style purposes rather than semantic purposes, you should either use a <span> with appropriate CSS or, an appropriate semantic element among the following:

• <em>
• <i>
• <q>

Default style

Most browsers apply font-style to "italic" when rendering <var>. This can be overridden in CSS, like this:

var {
  font: bold 15px "Courier", "Courier New", monospace;
}

Examples

Basic example

Here's a simple example, using <var> to denote variable names in a mathematical equation.

<p>A simple equation:
  <var>x</var> = <var>y</var> + 2 </p>

The output:

Overriding the default style

Using CSS, you can override the default style for the <var> element. In this example, variable names are rendered using bold Courier if it's available, otherwise it falls back to the default monospace font.

CSS

var {
  font: bold 15px "Courier", "Courier New", monospace;
}

HTML

<p>The variables <var>minSpeed</var> and <var>maxSpeed</var> control
   the minimum and maximum speed of the apparatus in revolutions
   per minute (RPM).</p>

This HTML uses <var> to enclose the names of two variables.

Result

Specifications

Browser compatibility