HTML 5 <meter> Tag

The HTML <meter> tag is used for indicating a scalar measurement within a known range, or a fractional value.

Also known as a gauge, usage could include displaying disk usage, the amount raised during fundraising activities, or the relevance of a search query result.

It is important to note that the <meter> element is used to represent a range. It is not appropriate to use this element for representing a single number (such as how many children someone has) unless there is a known maximum number.

The <meter> tag was introduced in HTML 5.

Example

The following examples demonstrate various uses of the <meter> tag.

• Example 1 demonstrates different ways of representing 25 percent (of whatever is being measured).
• Example 2 demonstrates how to use the title attribute to specify the units being measured. (Note that there is no way of explicitly specifying units with the <meter> tag). This example also uses a definition list to present the data.

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

Global Attributes

The following attributes are standard across all HTML 5 tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Here are the standard HTML 5 event handler content attributes.

For a full explanation of these attributes, see HTML 5 event handler content attributes.