<var>

Overview

The <var> element is used to mark the names of variables for mathematical or programming expressions. As per the HTML specification, this could include a constant identifier, a symbol identifying a physical quantity, function parameters, or a placeholder term within prose. The content inside the <var> tags is commonly rendered in italics, but this can vary depending on the browser, and the default styling can be controlled using CSS.

Examples and Usage

Used in various contexts, <var> can indicate variables in mathematical formulas, denote specific variables in code, or serve as a placeholder in written content. Let's review some practical examples to grasp its versatility.

Imagine you're illustrating a simple programming concept:

<p>
    The variable <var>x</var> can be defined in JavaScript as <code>let x = 5;</code>
</p>

In this instance, the <var> emphasizes the variable x which will be typically rendered in italics. However, with CSS, this default style can be customized using properties like font-style. Also, the <code> tags are used to denote the actual JavaScript code.

Similarly, this could involve explaining a widely recognized scientific principle:

<p>
  <var>E</var> = <var>m</var><var>c</var><sup>2</sup> is the world's most famous equation.
</p>

This snippet highlights variables in Einstein's energy-mass equivalence equation. The variables E, m, and c are emphasized with <var>, while the <sup> tag captures the exponent. By default, these variables would appear in italics.

If the primary intent is styling without the variable semantics, using a <span> with tailored CSS is advisable. In addition, elements like <em>, though visually similar, serve different semantic roles such as stress emphasis.

Attribute Breakdown

The <var> element doesn't have any specific attributes; it inherits global attributes common to all HTML elements.

Accessibility Aspects

The <var> element doesn't possess specific accessibility considerations. It doesn't correlate with any particular ARIA role, though it does allow any global aria-* attributes applicable to allowed roles.

Associated Elements

• <code>
• <kbd>
• <output>
• <pre>
• <samp>

Additional Notes

• <var> is related to other elements that can represent code within a document, such as <code>, <kbd>, <output>, <pre>, and <samp>. Each of these elements has a specific semantic meaning, making them suitable for different aspects of code representation. They can also be used in combination, as we saw in the JavaScript example above.

• For more complex mathematical expressions, MathML (Mathematical Markup Language) is an appropriate choice. However, the <var> element can still be used for specific variables within MathML expressions.

• In HTML, elements are categorized into different content models like flow, phrasing, and palpable content. The <var> element falls into these categories, making it a flexible element that can be used within various structural and text-level contexts.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: var

The HTML Living Standard Specification: var