Skip to: content, navigation

by Ian Lloyd

var (HTML element)

Spec
Depr. Empty Version
No No HTML 2
Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Full Full Full Full

Example

In the following example, a customer is asked to enter two pieces of information, which are marked up as variables:

<p>To get access to the system you first need to enter your
    username, e.g. <var>monkeyboy123</var>, followed by your unique
    6-digit customer ID beginning with C, e.g. <var>C13345</var>.</p>
Type
inline element
Contains
inline elements only
Contained by
block-level elements, inline elements

Description

The var element is used to indicate that the text is a variable and shouldn’t be taken literally. Instead, it’s an example that should be replaced with your own value.

The example code would render as shown in Figure 1.

Figure 1. An example usage of var Example of var element

Use This For …

This element is used to indicate that the phrase is a variable of some kind—most likely in the context of showing an example value, as illustrated in the example HTML above.

Compatibility

IE5.5Full
6.0Full
7.0Full
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

The var has good browser support; most of the major browsers render the variable in italics (similar to other reference-type phrase elements, such as cite and dfn).

User-contributed notes

ID:
#1
Date:
Fri, 28 Mar 2008 10:54:37 GMT
Contributed by:
AutisticCuckoo

That example is not very good. You'd normally use VAR to mark up a *placeholder*, not a sample value.

A more realistic example would be something like this (perhaps from an instruction manual for a corporate telephone system):

<p>To forward incoming calls to another extension, press <kbd>* 21 * <var>extension</var> #</kbd>.</p>

The VAR markup indicates that you're not supposed to punch in the letters e-x-t-e-n-s-i-o-n, but replace that placeholder with the actual extension number.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters