HTML - <var> Tag

Quiz

Introduction to <var> Tag

The HTML <var> tag is used to denote a variable element. This tag represents the name of a variable in a mathematical expression or programming context.

The content inside the <var> tag is typically displayed in italic font in most browsers. However, we can override or change this using CSS properties.

Syntax

Following is the syntax of <var> tag −

<var>.....</var>

Attributes

The HTML <var> tag supports Global and Event attributes.

Example: Creating <var> Element

In the following example, we create an HTML document and using the <var> tag to represent the distributive law. This HTML code generates a webpage with a heading and a paragraph, displaying the distributive law equation using <var> tag.

<!DOCTYPE html>
<html>
<head>
   <title>HTML var Tag</title>
</head>
<body>
   <h2>Example of var Tag</h2>
   <p>Equation for distributive law</p>
   <p>
      <var>a</var>( <var>b</var>+ <var>c</var>)= <var>ab</var>+ <var>ac</var>
   </p>
</body>
</html>

Example: Mathematical Equation Using <var> Tag

Presenting a mathematical equation using the HTML <var> tag, gives it a natural mathematical appearance. This HTML code creates a webpage with a paragraph, using the <var> tag to bold variables in the volume formula.

<!DOCTYPE html>
<html>
<head>
   <title>HTML var Tag</title>
   <style>
      var {
         font-weight: bold;
      }
   </style>
</head>
<body>
   <p>
      The volume of a box is <var>l</var>  <var>w</var>  <var>h</var>,
      where <var>l</var> represents the length, <var>w</var> 
      the width and <var>h</var> the height of the box. 
   </p>
</body>
</html>

Example: Styling <var> Element

In the following example, we style the <var> element to make it bold compared to the normal font. This is done using the internal CSS with the CSS font-weight Property.

<!DOCTYPE html>
<html>
<head>
   <title>HTML var Tag</title>
   <style>
      var {
         font-weight: bold;
      }
   </style>
</head>
<body>
   <p>
      A simple equation: <var>x</var> = <var>y</var> + 2 
   </p>
</body>
</html>

Supported Browsers

Tag
var	Yes	Yes	Yes	Yes	Yes

Related Tags

Following are some related tag of <var> tag, which can also be used for the same context.

<code>: To determine the computer programming.
<kbd>: To determine the keyboard input.
<samp>: To determine the sample output.
<pre>: To determine the pre-formatted text.

html_tags_reference.htm

Print Page