HTML <meter> Tag

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <meter> Tag in HTML 5

The <meter> tag provides a visual representation, typically in the form of a gauge or other indicator, to display a value on a measurement scale with a specific maximum value. The scale can be subdivided into ranges that can be easily distinguished with visual cues, such as the colors green for acceptable levels, yellow for warning levels and red for critical levels.

<meter> Tag Syntax

<body>
   ...
   ... flow content expected ...
   <form id="form-id" method="GET|POST|etc." action="target-URL">
      ...
      ... phrasing content expected ...<meter>... phrasing content ...
      ... phrasing content ...</meter>...
      ...
   </form>
   ...
   ... phrasing content expected ...<meter form="form-id">... phrasing content ...
   ... phrasing content ...</meter>...
   ...
</body>

Rules for coding HTML meter elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code the meter element where phrasing content is expected, usually inside a form element.
Begin the meter element with a starting <meter> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
If the field is for a form that can be submitted but is outside that form element, include a form attribute referencing the form the meter is to be associated with.
Include any other attributes on the <meter> tag as appropriate.
Inside the meter element, between the starting <meter> tag and the ending </meter> tag, code the inner HTML phrasing content.
End the meter element with a matching </meter> closing tag.

Content Model

Contents of the meter element

The content of the meter element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

<meter> Tag Attributes

Attributes of the <meter> tag

global attributes

In addition to the personal attributes of the <meter> tag below, any of the common HTML attributes can also be coded.

<meter> Tag Examples

Examples of the `meter` tag in HTML 5

Changes in HTML 5 - <meter> Tag

What's new in HTML 5

The <meter> tag is one of the new elements in HTML 5.

Differences between HTML 5 and earlier versions of HTML

The <meter> tag did not exist in older versions of HTML.

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the names of all HTML element types, which now includes the meter element name. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5

HTML <meter> Tag