HTML `<var>` Element: Semantic Markup for Variables in Code and Equations

Learn how to use the HTML `<var>` element to semantically mark up variables within code snippets and mathematical expressions. This tutorial explains its purpose, usage, and how to customize its appearance using CSS, improving code readability and the accessibility of your technical content.

Using the HTML <var> Tag to Define Variables

What is the <var> Element?

The HTML <var> tag (variable) is used to indicate variables within a program or mathematical expression. The text within the <var> tag is typically displayed in italics, making it visually distinct from surrounding text. While functional, using CSS offers more control over styling. The <var> tag is not deprecated, meaning it's still supported, but using CSS is often a more flexible approach.

Example:

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the height.</p>

Browser Support

The <var> element has good support across major browsers.

Styling with CSS

You can customize the appearance of the <var> element using CSS. For example, you can change the font style, color, or other properties. This often provides better control than the browser's default italic styling.

var {
  font-style: italic;
  font-weight: bold;
  color: navy;
}

Related Elements