HTML var Tag - Learn HTML

The <var> tag describes variable in a mathematical expression or a programming context. Its content is usually presented in an italicized version of the current typeface.

Other elements that are used for describing technical parts of the documents in the contexts in which <var> is generally used include:

the <code> tag which defines a piece of computer code,
the <samp> tag which defines sample output from a script or computer program,
the <kbd> tag which defines keyboard output.

If there is a code where the <var> tag is mistakenly used for stylistic purposes and not for semantic ones, you must use either a  with appropriate CSS, or an appropriate semantic tag among the following: <q>, , .

The <var> tag is not deprecated, but you can achieve better effects with CSS.

Syntax

The <var> tag comes in pairs. The content is written between the opening (<var>) and closing (</var>) tags.

Example of the HTML `<var>` tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    Example <var>This is a variable</var>
  </body>
</html>

Try it Yourself »

When to use `<var>`

Use <var> for the name of a variable — a placeholder that stands in for a value. It fits two contexts:

Mathematical expressions. The letters that represent unknown or changing quantities, such as x and y in an equation.
Programming. The name of a variable referenced in prose, such as count or userName.

It is easy to confuse <var> with neighbouring semantic tags. Choose by meaning, not by how the text looks:

Tag	Use it for	Example
`<var>`	A variable name or placeholder	"Let `n` be the number of users."
`<code>`	A fragment of computer code	"Call `getName()` to read it."
`<i>`	Text set off for non-semantic reasons (a foreign phrase, a thought)	"the Voyager probe"

If you only want italic styling with no special meaning, reach for  or a styled  instead of <var>.

Example: variables in an equation

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>The equation <var>x</var> + <var>y</var> = 10 has many solutions.</p>
    <p>If <var>x</var> is 4, then <var>y</var> must equal 6.</p>
  </body>
</html>

Result

Styling the `<var>` tag with CSS

Browsers render <var> in italic by default. Because it is a real semantic element, you can restyle it freely without changing its meaning — for example, remove the italics and give variables a distinct color so they stand out in technical text:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      var {
        font-style: normal;
        font-family: monospace;
        color: #0d6efd;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <p>Solve for <var>x</var> when <var>y</var> = 12.</p>
  </body>
</html>

Result

Accessibility

The <var> element has no implicit ARIA role, so assistive technologies do not announce its content as a "variable" — to a screen reader the text reads the same as surrounding text. The element communicates meaning to authors and styling tools, not to users directly. Make sure the variable's role is clear from the surrounding wording so the sentence still makes sense when read aloud.

Attributes

The <var> tag supports the Global attributes and the Event Attributes.

Practice

Which statement about the HTML var tag is true?

It represents the name of a variable in a mathematical expression or a programming context.It always renders its text in bold.It marks a fragment of computer code, like a function call.It carries an implicit ARIA role that makes screen readers announce 'variable'.