HTML var Tag: Variables in Text

The HTML <var> tag marks a word or phrase as a variable in a document. Web authors use it to show variable names in code examples or math expressions.

This tag helps readers know that the word has a specific role in the context.

Understand the <var> Tag in HTML

The <var> tag is an inline HTML element that defines a variable name. It tells the browser that the text inside is a variable, and browsers often display it in an italic style by default.

Here is the basic tag:

<var>variableName</var>

You can place the tag inside paragraphs or code examples.

The browsers treat <var> as an inline semantic tag. They may render it in italics, but the main value comes from its semantic meaning. Assistive tools such as screen readers can also use this information to describe the text.

All modern browsers support the <var> tag. This includes:

• Chrome
• Firefox
• Safari
• Edge
• Opera

Older browser versions also support it, so you can use it without concern for compatibility.

Style the <var> Tag in HTML with CSS

You can change the style of a <var> element with CSS. For example, you can set a custom font, size, or color. This lets you match variable names with your website’s design.

<style>
var {
  font-style: normal;
  color: blue;
  font-weight: bold;
}
</style>

<p>The value of <var>x</var> must equal 10.</p>

The variable name x appears in bold blue text instead of the default italics.

The Difference Between var Tag and code Tag

The <var> tag marks a variable name in text. The <code> tag marks a fragment of computer code. Although both may appear in a code example, they have different purposes.

Use <var> when you need to highlight a variable inside text while the <code> tag if you need to show code syntax.

Examples

Variable in a Math Formula:

<p>The formula for the area is <var>a</var> = <var>w</var> × <var>h</var>.</p>

This shows variables a, w, and h inside a math formula. The <var> tag makes each variable stand out as a named value.

Variable in JavaScript Code Block:

<pre><code>let <var>userName</var> = "Alex";</code></pre>

The variable userName appears in the middle of a JavaScript statement. The <var> tag shows that it is a variable, even inside a <code> block.

Variables in Function Description:

<p>Use function <code>sum</code> to add <var>x</var> and <var>y</var> together.</p>

The <code> tag shows the function name, while <var> marks the two inputs as variables.

Wrapping Up

In this article, you learned the role of the <var> tag and how browsers use it. You also saw how to style it with CSS, how it differs from the <code> tag, and how to use it in different contexts.

Here is a quick recap:

• <var> marks variable names in text, code, or formulas.
• All major browsers support it.
• You can style it with CSS to match your design.
• It has a different role than the <code> tag.
• Use it to help readers understand when text represents a variable.

FAQs

<p>The value of <var>x</var> is 10.</p>

<p>Area = <var>width</var> * <var>height</var></p>

<p>Use <code>let</code> to define a <var>variableName</var>.</p>

<p>The value of <var>y</var> changes dynamically.</p>

Similar Reads