Using the (Variable) Element

The <var> HTML element represents the name of a variable in a mathematical expression or in the context of programming. The element is typically presented with an italicized version of the current typeface, but its behavior may ultimately be browser-dependent.

For this tutorial, you will learn some straightforward techniques to use the <var> element for its intended use.  This tutorial will combine CSS (Cascading Style Sheets) functions while creating the effect within the HTML (Hypertext Markup Language) page. Along the way, you will also be provided with some fun and creative design elements. All you need to start with is a simple code editor such as Notepad ++.

Starting a New HTML Page

Start of with a simple HTML page:

<!DOCTYPE html>
<html>

<style>

</style>
<body></body></html>

The Default Style

As noted above, most browsers apply the “italic” font-style when rendering the <var> element. This can be overridden in CSS by using the “normal” value as shown below:

<!DOCTYPE html>
<html>

<style>

var {
  font-style: normal;
}

</style>
<body></body></html>

Common Use of the <var> Variable

Building a Mathematical Equation

Use the <var> element to surround the specific items you want to illustrate.

<!DOCTYPE html>
<html>

<style>
</style>
<body><p>Build an algebra equation: <var>x</var> = <var>y</var> + 12 </p></body></html>

The result in the browser looks as follows:

Building an algebra equation.

Notice that no CSS has been applied.

Showcasing Dimensions

In this example, using the <var> element works well for displaying dimensions which can also be used for mathematical purposes.

<!DOCTYPE html>
<html>

<style>
</style>
<body><p>The volume of a box is <var>L</var> × <var>W</var> × <var>H</var>, where <var>L</var> represents the length of the box, <var>W</var> represents the width, and <var>H</var> represents the height of the box.</p></body></html>

The output in a browser looks as follows:

Using <var> for showcasing dimensions of a box.

Overriding the <var> Element Default Style

First add in the following content into your HTML page:

<!DOCTYPE html>
<html>

<style>
</style>
<body><p>The variables considered in oceanography are <var>wind speed</var>, <var>swell height</var>, and <var>swell direction</var>.</p></body></html>

This looks as follows:

Showcasing the use of <var> for variables in a sentence such as with oceanography - wind speed, wave height.

Now to override the italics that normally render with the <var> element, you can adjust the CSS.

<!DOCTYPE html>
<html>

<style>

var {
  font: bold 14px "Courier", "Courier New", monospace;
  color: blue;
}

</style>
<body><p>The variables considered in oceanography are <var>wind speed</var>, <var>swell height</var>, and <var>swell direction</var>.</p></body></html>

This changes the font as well as the font color.

Showing that the <var> element can be manipulated using CSS for altering the display of the text.

Final Note

Normally the <var> element should be used for semantic purposes only. It should not be used for styling text, although that rule was broken in the above illustration simply to show you that by using CSS, you can alter this if absolutely necessary. For style purposes, you can use <code> to give a code font, or <i> for italicizing your specific text.

Now it should be apparent why the HTML <var> element is so applicable. There is a wide variety of use with this element for practical application as well as for a teaching application. Additionally, with CSS you also have the ability to alter the initial style that is rendered from the element in your browser. The limits are up to you.

Where to Next?

Using the <var> (Variable) Element tutorial should provide a starting point for further inquiry into the world of HTML Elements for customizing your web layout while always keeping in mind the practical applications with HTML and CSS

Continue to explore other areas of design. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.

HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!