<var> - The Variable Element

The `<var>` Element

Inline HTML 2.0

The variable element represents a variable in a mathematical expression, programming context, or any placeholder value. It’s typically rendered in italic.

Quick Example

<p>The formula is <var>E</var> = <var>mc</var><sup>2</sup></p>
<p>Let <var>x</var> = 10 and <var>y</var> = 20</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The formula is <var>E</var> = <var>mc</var><sup>2</sup></p>
<p>Let <var>x</var> = 10 and <var>y</var> = 20</p>

Syntax

<var>variable name</var>

The <var> element marks text that represents a variable or placeholder.

Common Use Cases

Mathematical Variables

<p>If <var>a</var> = 5 and <var>b</var> = 3, then <var>a</var> + <var>b</var> = 8</p>
<p>Pythagorean theorem: <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>If <var>a</var> = 5 and <var>b</var> = 3, then <var>a</var> + <var>b</var> = 8</p>
<p>Pythagorean theorem: <var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></p>

Programming Variables

<p>Assign <var>userName</var> to store the user's name</p>
<p>The value of <var>counter</var> increments by 1</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Assign <var>userName</var> to store the user's name</p>
<p>The value of <var>counter</var> increments by 1</p>

Function Parameters

<p>The function takes two parameters: <var>width</var> and <var>height</var></p>
<p>Returns <var>result</var> as a boolean value</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>The function takes two parameters: <var>width</var> and <var>height</var></p>
<p>Returns <var>result</var> as a boolean value</p>

Placeholders in Documentation

<p>Replace <var>YOUR_API_KEY</var> with your actual API key</p>
<p>Set <var>DATABASE_URL</var> to your database connection string</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Replace <var>YOUR_API_KEY</var> with your actual API key</p>
<p>Set <var>DATABASE_URL</var> to your database connection string</p>

Equations and Formulas

<p>Quadratic formula: <var>x</var> = (-<var>b</var> ± √(<var>b</var><sup>2</sup> - 4<var>ac</var>)) / 2<var>a</var></p>
<p>Area of circle: <var>A</var> = π<var>r</var><sup>2</sup></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Quadratic formula: <var>x</var> = (-<var>b</var> ± √(<var>b</var><sup>2</sup> - 4<var>ac</var>)) / 2<var>a</var></p>
<p>Area of circle: <var>A</var> = π<var>r</var><sup>2</sup></p>

Constants and Parameters

<p>Where <var>π</var> ≈ 3.14159</p>
<p>Speed of light <var>c</var> = 299,792,458 m/s</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Where <var>π</var> ≈ 3.14159</p>
<p>Speed of light <var>c</var> = 299,792,458 m/s</p>

Technical Elements Comparison

<!-- Variables in math/programming -->
<p>Let <var>x</var> = 5</p>

<!-- Computer code -->
<p>Use <code>console.log()</code></p>

<!-- Keyboard input -->
<p>Press <kbd>Enter</kbd></p>

<!-- Program output -->
<p>Output: <samp>Success</samp></p>

Real-World Examples

API Documentation

<article>
<h3>GET /users/<var>id</var></h3>
<p>Retrieves a user by their unique <var>id</var>.</p>

<h4>Parameters</h4>
<ul>
  <li><var>id</var> (integer): The user's unique identifier</li>
</ul>

<h4>Response</h4>
<p>Returns a user object with <var>name</var>, <var>email</var>, and <var>createdAt</var>.</p>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h3>GET /users/<var>id</var></h3>
<p>Retrieves a user by their unique <var>id</var>.</p>

<h4>Parameters</h4>
<ul>
  <li><var>id</var> (integer): The user's unique identifier</li>
</ul>

<h4>Response</h4>
<p>Returns a user object with <var>name</var>, <var>email</var>, and <var>createdAt</var>.</p>
</article>

Mathematical Tutorial

<div class="tutorial">
<h4>Solving for <var>x</var></h4>
<ol>
  <li>Given: 2<var>x</var> + 5 = 15</li>
  <li>Subtract 5: 2<var>x</var> = 10</li>
  <li>Divide by 2: <var>x</var> = 5</li>
</ol>
<p>Therefore, <var>x</var> = 5</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="tutorial">
<h4>Solving for <var>x</var></h4>
<ol>
  <li>Given: 2<var>x</var> + 5 = 15</li>
  <li>Subtract 5: 2<var>x</var> = 10</li>
  <li>Divide by 2: <var>x</var> = 5</li>
</ol>
<p>Therefore, <var>x</var> = 5</p>
</div>

Configuration Guide

<section>
<h4>Environment Variables</h4>
<dl>
  <dt><var>PORT</var></dt>
  <dd>The port number for the server (default: 3000)</dd>

  <dt><var>DATABASE_URL</var></dt>
  <dd>Connection string for the database</dd>

  <dt><var>API_KEY</var></dt>
  <dd>Your API authentication key</dd>
</dl>
</section>

Result

Interactive code playground requires JavaScript. Here's the code:

<section>
<h4>Environment Variables</h4>
<dl>
  <dt><var>PORT</var></dt>
  <dd>The port number for the server (default: 3000)</dd>

  <dt><var>DATABASE_URL</var></dt>
  <dd>Connection string for the database</dd>

  <dt><var>API_KEY</var></dt>
  <dd>Your API authentication key</dd>
</dl>
</section>

Command Line Examples

<div class="cli-docs">
<p>Usage: <code>npm install <var>package-name</var></code></p>
<p>Example: <code>git clone <var>repository-url</var></code></p>
<p>Format: <code>docker run -p <var>host-port</var>:<var>container-port</var> <var>image</var></code></p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="cli-docs">
<p>Usage: <code>npm install <var>package-name</var></code></p>
<p>Example: <code>git clone <var>repository-url</var></code></p>
<p>Format: <code>docker run -p <var>host-port</var>:<var>container-port</var> <var>image</var></code></p>
</div>

Styling

Customize variable appearance:

<style>
var {
  font-style: italic;
  color: #6f42c1;
  font-weight: 600;
}
</style>

<p>The equation <var>E</var> = <var>mc</var><sup>2</sup> is Einstein's famous formula.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
var {
  font-style: italic;
  color: #6f42c1;
  font-weight: 600;
}
</style>

<p>The equation <var>E</var> = <var>mc</var><sup>2</sup> is Einstein's famous formula.</p>

Code-Like Style

<style>
var {
  font-family: 'Courier New', monospace;
  font-style: normal;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 3px;
  color: #d73a49;
}
</style>

<p>Set <var>username</var> and <var>password</var> in the config file.</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
var {
  font-family: 'Courier New', monospace;
  font-style: normal;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 3px;
  color: #d73a49;
}
</style>

<p>Set <var>username</var> and <var>password</var> in the config file.</p>

In Code Examples

<p>JavaScript example:</p>
<pre><code>function calculate(<var>x</var>, <var>y</var>) {
return <var>x</var> + <var>y</var>;
}

let <var>result</var> = calculate(5, 10);</code></pre>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>JavaScript example:</p>
<pre><code>function calculate(<var>x</var>, <var>y</var>) {
return <var>x</var> + <var>y</var>;
}

let <var>result</var> = calculate(5, 10);</code></pre>

Mathematical Expressions

<div class="math">
<p>Linear equation: <var>y</var> = <var>mx</var> + <var>b</var></p>
<p>Distance formula: <var>d</var> = √((<var>x</var><sub>2</sub> - <var>x</var><sub>1</sub>)<sup>2</sup> + (<var>y</var><sub>2</sub> - <var>y</var><sub>1</sub>)<sup>2</sup>)</p>
<p>Slope: <var>m</var> = (<var>y</var><sub>2</sub> - <var>y</var><sub>1</sub>) / (<var>x</var><sub>2</sub> - <var>x</var><sub>1</sub>)</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div class="math">
<p>Linear equation: <var>y</var> = <var>mx</var> + <var>b</var></p>
<p>Distance formula: <var>d</var> = √((<var>x</var><sub>2</sub> - <var>x</var><sub>1</sub>)<sup>2</sup> + (<var>y</var><sub>2</sub> - <var>y</var><sub>1</sub>)<sup>2</sup>)</p>
<p>Slope: <var>m</var> = (<var>y</var><sub>2</sub> - <var>y</var><sub>1</sub>) / (<var>x</var><sub>2</sub> - <var>x</var><sub>1</sub>)</p>
</div>

Physics Formulas

<article>
<h4>Physics Equations</h4>
<ul>
  <li>Force: <var>F</var> = <var>ma</var></li>
  <li>Kinetic Energy: <var>KE</var> = ½<var>m</var><var>v</var><sup>2</sup></li>
  <li>Momentum: <var>p</var> = <var>m</var><var>v</var></li>
  <li>Work: <var>W</var> = <var>F</var><var>d</var></li>
</ul>
</article>

Result

Interactive code playground requires JavaScript. Here's the code:

<article>
<h4>Physics Equations</h4>
<ul>
  <li>Force: <var>F</var> = <var>ma</var></li>
  <li>Kinetic Energy: <var>KE</var> = ½<var>m</var><var>v</var><sup>2</sup></li>
  <li>Momentum: <var>p</var> = <var>m</var><var>v</var></li>
  <li>Work: <var>W</var> = <var>F</var><var>d</var></li>
</ul>
</article>

When NOT to Use `<var>`

<p>This is <var>very</var> important.</p>

<p>This is <em>very</em> important.</p>

Don’t Use for Code Functions

Wrong
Right

<p>Use the <var>console.log()</var> function.</p>

<p>Use the <code>console.log()</code> function.</p>

Accessibility

Screen readers typically read <var> content as regular text. The italic styling is visual only.

Provide Context

Make sure variable purpose is clear:

Unclear
Clear

<p>Set <var>x</var> to the value.</p>

<p>Set the variable <var>maxConnections</var> to the maximum number of allowed connections.</p>

Mathematical Expressions

For complex math, provide alternative descriptions:

<p>
  <span aria-label="E equals M C squared">
    <var>E</var> = <var>m</var><var>c</var><sup>2</sup>
  </span>
</p>

With Subscripts and Superscripts

<p>Sequence: <var>a</var><sub>1</sub>, <var>a</var><sub>2</sub>, <var>a</var><sub>3</sub>, ..., <var>a</var><sub>n</sub></p>
<p>Power: <var>x</var><sup>n</sup></p>
<p>Matrix: <var>M</var><sub><var>i</var>,<var>j</var></sub></p>

Result

Interactive code playground requires JavaScript. Here's the code:

<p>Sequence: <var>a</var><sub>1</sub>, <var>a</var><sub>2</sub>, <var>a</var><sub>3</sub>, ..., <var>a</var><sub>n</sub></p>
<p>Power: <var>x</var><sup>n</sup></p>
<p>Matrix: <var>M</var><sub><var>i</var>,<var>j</var></sub></p>

Programming Examples

<section>
<h4>Function Signature</h4>
<p>
  <code>fetchUser(<var>userId</var>: string, <var>options</var>?: object): Promise&lt;User&gt;</code>
</p>

<h4>Description</h4>
<p>
  Fetches a user by <var>userId</var>.
  Optional <var>options</var> parameter can include cache settings.
</p>
</section>

Result

Interactive code playground requires JavaScript. Here's the code:

<section>
<h4>Function Signature</h4>
<p>
  <code>fetchUser(<var>userId</var>: string, <var>options</var>?: object): Promise&lt;User&gt;</code>
</p>

<h4>Description</h4>
<p>
  Fetches a user by <var>userId</var>.
  Optional <var>options</var> parameter can include cache settings.
</p>
</section>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <var> element has been supported since the earliest browsers.

 For computer code and programming.
Learn more →

     
 For keyboard input.
Learn more →
 
     
 For sample computer output.
Learn more →
 
     
 For subscript (often used with variables).
Learn more →
 
     
 For superscript (often used with variables).
Learn more →

 
Specifications
Section titled “Specifications”

WHATWG HTML Living Standard
MDN Web Docs

     
     Previous 
 <u> - The Unarticulated Annotation Element      Next 
 <wbr> - The Word Break Opportunity Element

<var> - The Variable Element

The <var> Element

Quick Example

Syntax

Common Use Cases

Mathematical Variables

Programming Variables

Function Parameters

Placeholders in Documentation

Equations and Formulas

Constants and Parameters

Technical Elements Comparison

Real-World Examples

API Documentation

Mathematical Tutorial

Configuration Guide

Command Line Examples

Styling

Code-Like Style

In Code Examples

Mathematical Expressions

Physics Formulas

When NOT to Use <var>

Don’t Use for Emphasis

Don’t Use for Code Functions

Accessibility

Screen Reader Behavior

Provide Context

Mathematical Expressions

With Subscripts and Superscripts

Programming Examples

Browser Support

Related Elements

Specifications

The `<var>` Element

When NOT to Use `<var>`