<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.
Browser | Chrome | Edge | Safari | Firefox | Opera | Internet Explorer |
---|---|---|---|---|---|---|
Support | Yes | Yes* | Yes* | Yes | Yes* | Yes* |