Meter tag in HTML5

In this article I am going to describe about the implementation and use of Meter Tag in HTML5
  • 1703

Meter tag

The HTML <meter> tag is used for indicating a scalar measurement within a known range, or a fractional value. The keyword here is "known range". That means, you are only allowed to use it when you are clearly aware of its minimum value and maximum value. <meter> tag is new in HTML5.

Note 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.

One example is score of rating. I would rate this movie <meter min="0" max="10" value="8">8 of 10</meter>.

Note: The <meter> tag should not be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

Browser Support

<meter> tag is supported in all major browsers except Internet Explorer and Safari.

Syntax Of Meter Tag

<meter>Show Scalar Measurement Here</meter>

Attributes Value

   Attribute     Value                                          Description
       form    form_id  Specifies one or more forms the <meter> element belongs to
       high    number  This is optional unless you wish to define high value of the range.
       low    number  This is optional unless you wish to define low value of the range.
       max    number  Maximum value of meter element. If unspecified, it will be One (1).
       min    number  Minimum value of meter element. If unspecified, it will be Zero (0).
     optimum    number  This is completely optional. This attribute is for specifying an optimum point of a range.
      value    number  Required. Specifies the current value of the gauge

Example of <meter> in HTML5

<!DOCTYPE html>


<html lang="en" xmlns="">


    <meta charset="utf-8" />

    <title>Meter tag in HTML5</title>



    <h2>&lt;meter&gt; Tag in HTML5</h2>

    <p>Display a gauge:</p>


        <li><meter min="0" max="100" value="25">25%</meter></li>

        <li><meter min="100" max="200" value="150">50%</meter></li>

        <li><meter min="0" max="100" value="75">75%</meter></li>

        <li><meter min="0" max="800" value="400">50%</meter></li>


    <p><b>Note:</b> The &lt;meter&gt; tag is not supported in IE and Safari.</p>






© 2020 DotNetHeaven. All rights reserved.