<var>
Defines a variable in mathematical or programming context
Definition and Usage
The <var> tag is used to define a variable in a
mathematical expression or a programming context.
The content inside is typically displayed in italic by default. Variables can represent mathematical quantities, programming variables, function parameters, or any placeholder value that can vary.
The <var> tag is semantic, meaning it conveys
meaning about the type of content rather than just styling.
<var> tag is often
used in combination with mathematical expressions using
<sub>, <sup>, or within
<code> blocks.
<var> is typically
rendered in italics, always use it for semantic meaning rather
than just styling. Use CSS for visual styling instead.
Browser support and standards
Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.
Read the MDN element referenceAttributes
The <var> tag supports the
Global Attributes in HTML.
The <var> tag also supports the
Event Attributes in HTML.
Examples
Basic Variable
Use the <var> tag to define a simple variable:
Example
<p>The value of <var>x</var> is 10.</p>Mathematical Expression
Define variables in a mathematical equation:
Example
<p
>The formula for area of a circle is <var>A</var> = π<var
>r</var
><sup>2</sup></p
>
<p
>In the equation <var>E</var> = <var
>mc</var
><sup>2</sup
>, <var>E</var> represents energy.</p
>Programming Variables
Use <var> in programming documentation:
Example
<p
>To assign a value to <var>count</var>, use: <code><var>count</var> = 5;</code></p
>
<p>The function returns the value of <var>result</var> after processing.</p>Function Parameters
Document function parameters using <var>:
Example
<p
>The function <code>calculateTotal(<var>price</var>, <var>quantity</var>)</code>
multiplies <var>price</var> by <var>quantity</var> to get the total.</p
>Variables with Subscripts
Combine <var> with <sub> for
indexed variables:
Example
<p
>The points are represented as (<var>x</var
><sub>1</sub>, <var>y</var
><sub>1</sub>)
and (<var>x</var
><sub>2</sub>, <var>y</var
><sub>2</sub>).</p
>
<p
>The sum is <var>S</var> = <var
>a</var
><sub>1</sub> + <var
>a</var
><sub>2</sub> + ... + <var
>a</var
><sub>n</sub></p
>Styled Variables
Style variables with CSS for better visibility:
Example
<style>
var {
font-style: italic;
color: #745af2;
font-weight: 600;
background: rgba(116, 90, 242, 0.1);
padding: 2px 6px;
border-radius: 4px;
}
</style>
<p>The equation <var>y</var> = <var>mx</var> + <var>b</var> represents a linear function.</p>Try it Yourself
Interactive Example
See how variables are displayed:
The Pythagorean theorem: a2 + b2 = c2
In programming:
total =
price ×
quantity
Distance formula: d = √((x2 - x1)2 + (y2 - y1)2)
Semantic Comparison: <var> vs <code> vs <kbd> vs <samp>
| Tag | Purpose | Example Usage |
|---|---|---|
| <var> | Represents a variable or placeholder value |
Mathematical variables, function parameters:
The value of <var>x</var>
|
| <code> | Represents computer code |
Code snippets, function names:
<code>console.log()</code>
|
| <kbd> | Represents keyboard input |
Keyboard shortcuts:
Press <kbd>Ctrl</kbd> +
<kbd>C</kbd>
|
| <samp> | Represents sample output from a program |
Program output:
<samp>Error: File not found</samp>
|
<code><var>x</var> = 5;</code>, use <var> for the variable within the
<code> block.
Common Use Cases
- Mathematical Documentation: Define variables in formulas and equations
- Programming Documentation: Document function parameters and variables
- Technical Writing: Explain algorithms and computational processes
- Educational Content: Teach mathematics and programming concepts
- API Documentation: Describe placeholder values in API calls
Best Practices
-
Use
<var>for its semantic meaning, not just for italic styling -
Combine with
<sub>and<sup>for mathematical notation -
Nest
<var>inside<code>for programming variables - Use descriptive variable names that are meaningful to readers
- Apply CSS styling to enhance visibility without losing semantic meaning
- Ensure variables are clearly distinguished from surrounding text
- Use consistent naming conventions for variables throughout your documentation
Default CSS Settings
Most browsers will display the <var> element
with the following default values:
Default CSS
Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.
var {
font-style: italic;
}