HTML var Tag

HTML <var> Tag: Representing Variables in Mathematical and Programming Contexts

The <var> tag in HTML is used to define a variable in mathematical expressions or programming code. By default, text inside the <var> tag is displayed in italic by most browsers.

1. Syntax

<p>The formula for area of a circle is: A = <var>π</var>r²</p>
<p>In JavaScript, you can declare a variable using: <code>var x = 10;</code></p>

✅ The text inside <var> (π and x) will be displayed in italics.

2. When to Use <var>

• To represent mathematical variables in equations.

• To indicate variables in programming.

• To enhance the semantic meaning of a document.

3. Examples

Example 1: Mathematical Formula

<p>The quadratic formula is: x = (-<var>b</var> ± √(<var>b</var>² - 4<var>a</var><var>c</var>)) / 2<var>a</var></p>

✅ Displays mathematical variables in italics for better readability.

Example 2: Programming Variables

<p>To store a user’s name, you can write:</p>
<pre>
<code>var <var>userName</var> = "John";</code>
</pre>

✅ Highlights the variable name inside <var>, making it distinct from the rest of the code.

4. <var> vs. Other Tags

Tag	Purpose	Example
<var>	Represents variables	<var>x</var> = 10;
<code>	Displays inline code	<code>console.log("Hello")</code>
<pre>	Displays preformatted text (code blocks)	<pre>console.log("Hello")</pre>
<kbd>	Represents keyboard input	Press <kbd>Ctrl</kbd> + <kbd>C</kbd>

5. Styling <var> with CSS

You can customize <var> styling:

var {
  font-style: normal; /* Remove default italics */
  font-weight: bold;
  color: blue;
}

<p>The equation <var>E</var> = <var>mc²</var> is famous!</p>

✅ This makes <var> Bold and blue instead of italic.

6. Conclusion

• <var> is useful for displaying mathematical and programming variables.

• It improves semantic meaning and readability.

• Can be combined with <code>, <pre>, or styled for better presentation.