<var>-variable name

The <var> tag in HTML is used to mark variable names, typically for representing variables in mathematical expressions, programming code, or placeholders for user input. Browsers display text within the <var> tag in italics by default, but the style can be customized using CSS.

Basic Usage of the <var> Tag

The <var> tag is a phrase tag used to define variables. It can be used alone or in combination with other phrase tags or code tags. The basic syntax is very simple:

<p>When solving equations, let the unknown be <var>x</var>.</p>

The browser will render this as: When solving equations, let the unknown be x.

Semantic Meaning of the <var> Tag

In HTML5, the <var> tag has clear semantics:

1. Represents variables in mathematical expressions
2. Marks variable names in programming code
3. Identifies placeholder variables for user input
4. Represents variables in computer program output

<p>Declaring a variable in JavaScript: <code>let <var>count</var> = 0;</code></p>

Combining <var> with Other Tags

<var> is often used in combination with the following tags:

With the <code> Tag

<pre><code>
function calculate(<var>a</var>, <var>b</var>) {
    return <var>a</var> + <var>b</var>;
}
</code></pre>

With the <kbd> Tag to Represent User Input

<p>Enter <kbd><var>username</var></kbd> and press Enter</p>

In Mathematical Formulas

<p>Quadratic equation: <var>a</var>x² + <var>b</var>x + <var>c</var> = 0</p>

Customizing CSS Styles

Although browsers display <var> content in italics by default, the style can be fully customized with CSS:

var {
    font-style: normal;
    font-family: monospace;
    color: #c7254e;
    background-color: #f9f2f4;
    padding: 2px 4px;
    border-radius: 3px;
}

Practical Examples

Variable Descriptions in Programming Documentation

<div class="function-doc">
    <h3>array.push()</h3>
    <p>Adds one or more elements to the end of an array</p>
    <pre><code>
    <var>array</var>.push(<var>element1</var>, ..., <var>elementN</var>)
    </code></pre>
    <dl>
        <dt><var>array</var></dt>
        <dd>The array to modify</dd>
        <dt><var>elementN</var></dt>
        <dd>Elements to add to the end of the array</dd>
    </dl>
</div>

Application in Math Education Websites

<div class="math-example">
    <p>Pythagorean theorem:</p>
    <p>In a right triangle, the hypotenuse <var>c</var> satisfies:</p>
    <p><var>c</var> = √(<var>a</var>² + <var>b</var>²)</p>
    <p>Where:</p>
    <ul>
        <li><var>a</var> - Length of the first leg</li>
        <li><var>b</var> - Length of the second leg</li>
    </ul>
</div>

Accessibility Considerations

When using the <var> tag, screen readers will read variable names in a specific way. To enhance accessibility:

1. Avoid relying solely on italic styling to convey variable information
2. Consider using <span> with ARIA attributes for additional context

<p>
    <span aria-label="variable x">x</span> + 
    <span aria-label="variable y">y</span> = 
    <span aria-label="result z">z</span>
</p>

Differences from Similar Tags

HTML has several tags similar to <var>:

Tag	Purpose	Default Style
<var>	Marks variable names	Italic
<code>	Marks code snippets	Monospace
<kbd>	Marks keyboard input	Monospace
<samp>	Marks program output	Monospace
<i>	Italic styling only	Italic

Application in Template Systems

In dynamically generated HTML, <var> can be used to mark template variables:

<div class="email-template">
    <p>Dear <var>recipientName</var>:</p>
    <p>Your order <var>orderNumber</var> has shipped.</p>
    <p>Estimated delivery: <var>deliveryDate</var></p>
</div>

Historical Version Support

The <var> tag has existed since HTML 2.0 and is supported by all browsers. Even in early HTML versions:

• HTML 2.0 (1995): Supported
• HTML 3.2 (1997): Supported
• HTML 4.01 (1999): Supported
• XHTML (2000): Supported
• HTML5 (2014): Supported

Usage in Modern Frontend Frameworks

In frameworks like React and Vue, <var> can be used as follows:

React Example

function MathExpression({ a, b }) {
    return (
        <p>
            Solve: <var>{a}</var>x + <var>{b}</var> = 0
        </p>
    );
}

Vue Example

<template>
    <div>
        <p v-for="(varName, index) in variables" :key="index">
            Variable {{ index + 1 }}: <var>{{ varName }}</var>
        </p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            variables: ['temp', 'result', 'count']
        };
    }
};
</script>

Print Style Optimization

For print media, specific styles can be set for <var>:

@media print {
    var {
        font-style: italic;
        color: black;
        background-color: transparent;
        text-decoration: underline dotted;
    }
}

Internationalization Considerations

For multilingual websites, consider:

1. Whether variable names should be localized
2. Variable name placement may vary by language

<!-- English -->
<p>Set <var>width</var> to 100px</p>

<!-- Chinese -->
<p>设置<var>宽度</var>为100像素</p>

Performance Optimization Tips

While the <var> tag itself has minimal performance impact, when used extensively:

1. Avoid deep nesting
2. For dynamic content, consider using CSS classes instead
3. When generating in loops, reuse elements

// Not recommended
items.forEach(item => {
    document.body.innerHTML += `<p>Process <var>${item}</var></p>`;
});

// Recommended
const fragment = document.createDocumentFragment();
items.forEach(item => {
    const p = document.createElement('p');
    p.innerHTML = `Process <var>${item}</var>`;
    fragment.appendChild(p);
});
document.body.appendChild(fragment);

Interaction with JavaScript

<var> elements can be accessed and manipulated via JavaScript:

// Get all var elements
const variables = document.querySelectorAll('var');

// Add click events to all var elements
variables.forEach(v => {
    v.addEventListener('click', () => {
        console.log(`Clicked variable: ${v.textContent}`);
    });
});

// Create var elements dynamically
const newVar = document.createElement('var');
newVar.textContent = 'dynamicVar';
document.body.appendChild(newVar);

Application in Documentation Tools

Many documentation tools like JSDoc and TypeDoc use the <var> tag internally:

/**
 * Calculates the sum of two numbers
 * @param {number} a - First addend <var>a</var>
 * @param {number} b - Second addend <var>b</var>
 * @returns {number} Sum <var>sum</var>
 */
function add(a, b) {
    return a + b;
}

Testing Considerations

Handling <var> elements in automated tests:

// Using testing libraries like Testing Library
import { render, screen } from '@testing-library/react';

test('Displays correct variable name', () => {
    render(<p>Variable <var>x</var></p>);
    const varElement = screen.getByText('x');
    expect(varElement.tagName).toBe('VAR');
    expect(varElement).toHaveStyle('font-style: italic');
});

Usage in HTML Emails

Although HTML email support is limited, <var> renders correctly in most email clients:

<!-- Email HTML -->
<table width="100%">
    <tr>
        <td>
            <p>Dear <var>CustomerName</var>:</p>
            <p>Your order <var>OrderNumber</var> has been processed.</p>
        </td>
    </tr>
</table>

Integration with Web Components

Using <var> in Shadow DOM with custom elements:

class MathEquation extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = `
            <style>
                var {
                    color: blue;
                    font-weight: bold;
                }
            </style>
            <p><slot></slot></p>
        `;
    }
}

customElements.define('math-equation', MathEquation);

<math-equation>Solve: <var>x</var> + 2 = 5</math-equation>

Usage in SVG

Although uncommon, the <var> tag can be used in SVG:

<svg width="200" height="100">
    <text x="10" y="20">
        <tspan>Formula:</tspan>
        <tspan x="10" y="40"><var>a</var> + <var>b</var> = <var>c</var></tspan>
    </text>
</svg>

Usage in Web Workers

Even in DOM-less environments, <var> can be used when generating HTML strings:

// worker.js
self.onmessage = function(e) {
    const result = e.data.input * 2;
    const html = `<p>Result: <var>${result}</var></p>`;
    postMessage({ html });
};

Integration with MathML

In MathML, HTML's <var> can be combined:

<math display="block">
    <mrow>
        <mi><var>x</var></mi>
        <mo>=</mo>
        <mfrac>
            <mrow>
                <mo>-</mo>
                <mi><var>b</var></mi>
                <mo>±</mo>
                <msqrt>
                    <msup><mi><var>b</var></mi><mn>2</mn></msup>
                    <mo>-</mo>
                    <mn>4</mn>
                    <mo>⁢</mo>
                    <mi><var>a</var></mi>
                    <mo>⁢</mo>
                    <mi><var>c</var></mi>
                </msqrt>
            </mrow>
            <mrow>
                <mn>2</mn>
                <mo>⁢</mo>
                <mi><var>a</var></mi>
            </mrow>
        </mfrac>
    </mrow>
</math>

Example in WebAssembly Documentation

Using <var> to describe WASM interfaces:

<div class="wasm-api">
    <h3>memory.grow()</h3>
    <pre><code>
    <var>oldSize</var> = <var>memory</var>.grow(<var>delta</var>)
    </code></pre>
    <dl>
        <dt><var>memory</var></dt>
        <dd>WebAssembly.Memory object</dd>
        <dt><var>delta</var></dt>
        <dd>Number of pages to grow (64KB/page)</dd>
        <dt><var>oldSize</var></dt>
        <dd>Previous memory size in pages</dd>
    </dl>
</div>

Text Rendering in WebXR Devices

Although WebXR primarily handles 3D graphics, <var> can still be used in UI instructions:

<div class="xr-ui" id="xr-help">
    <p>Adjust <var>speed</var> parameter:</p>
    <p>Press <var>X</var> on the left controller to increase</p>
    <p>Press <var>A</var> on the right controller to decrease</p>
</div>

Example in Web Audio API Documentation

Describing audio parameters with <var>:

<pre><code>
const oscillator = audioCtx.createOscillator();
oscillator.type = '<var>sine</var>';
oscillator.frequency.setValueAtTime(<var>440</var>, audioCtx.currentTime);
</code></pre>

In WebGL Shader Documentation

Describing GLSL variables:

<pre><code>
uniform float <var>u_time</var>;
varying vec2 <var>v_uv</var>;

void main() {
    gl_FragColor = vec4(<var>v_uv</var>.x, <var>v_uv</var>.y, <var>u_time</var>, 1.0);
}
</code></pre>