The <var>
HTML element 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.
<var>: The Variable element
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Try it
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-style: normal; }
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>
Result
Overriding the default style
Using CSS, you can override the default style for the <var>
element. In this example, variable names are rendered in bold, using 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
Technical summary
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 |
Specifications
Specification |
---|
HTML Standard # the-var-element |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | ||
var |
1 | 12 | 1 | 15 | ≤4 | 18 | 4 | 14 | ≤3.2 | 1.0 | 4.4 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var