← Back to All Tags

<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.

Tip: The <var> tag is often used in combination with mathematical expressions using <sub>, <sup>, or within <code> blocks.
Note: While <var> is typically rendered in italics, always use it for semantic meaning rather than just styling. Use CSS for visual styling instead.

Browser Support

The <var> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

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>
Best Practice: Use the most semantically appropriate tag. For example, in <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

var {
  font-style: italic;
}

Related Tags

  • <code>

    Defines computer code text

  • <kbd>

    Defines keyboard input

  • <samp>

    Defines sample output

  • <sub>

    Defines subscript text

  • <sup>

    Defines superscript text

  • <pre>

    Defines preformatted text