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.
| Content categories | Flow content, phrasing content, palpable content. |
| Permitted content | Phrasing content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | HTMLElement
|
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:
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
| Specification | Status | Comment |
|---|---|---|
| HTML Living StandardThe definition of '<var>' in that specification. | Living Standard | |
| HTML5The definition of '<var>' in that specification. | Recommendation |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
var
|
Chrome
Full support Yes |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support Yes |
Opera
Full support Yes |
Safari
Full support Yes |
WebView Android
Full support Yes |
Chrome Android
Full support Yes |
Firefox Android
Full support 4 |
Opera Android
Full support Yes |
Safari iOS
Full support Yes |
Samsung Internet Android
Full support Yes |
Legend
- Full support
- Full support
<var>: The Variable element by Mozilla Contributors is licensed under CC-BY-SA 2.5.