/

HTML / CSS / JavaScript Tutorial

HTML Element: <meter>

[this page | pdf | back links]

The HTML <meter> element indicates a scalar measurement within a specific range (otherwise called a gauge). It can also take fractional values. It is new in HTML 5. It is not designed to be used to show task progress, for which the preferred element is the <progress> element.

 

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

 

Attribute

Description

More

form

Name of the form that element belongs to

Here

high

Value above which is considered a high value

Here

low

Value below which is considered a low value

Here

max

Maximum value

Here

min

Minimum value

Here

optimum

Value deemed optimal for gauge

Here

value

Value of element

Here

 

The high, low, max and min attributes should satisfy: . Not all major browsers currently support the high and low attributes.

 

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods. It also supports the following additional properties and methods:

 

Property

Description

More

labels

Returns a collection of <label> elements corresponding to the gauge labels

Here

 

The default style applicable to this element is shown here.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Created using HTML:<br>
<meter min="0" max="1" low="0.25" high="0.75" value="0.55"></meter>

<br><br>Created using JavaScript:<br>
<span id="element"></span>

<script>
var x = document.createElement("METER");
x.setAttribute("min", "0");
x.setAttribute("max", "1");
x.setAttribute("low", "0.25");
x.setAttribute("high", "0.75");
x.setAttribute("value", "0.55");
document.body.appendChild(x);
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | HTML Elements


Desktop view | Switch to Mobile