HTML <meter>

CliffordMapesa's avatar
CliffordMapesa's avatar
CliffordMapesa
Published Aug 13, 2023
Contribute to Docs

The <meter> semantic tag is used to represent a fractional or a scalar value within a known range. This form of representation is known as a gauge.

Note: The <meter> tag should not be used to indicate progress.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours

Syntax

The <meter> is written as <meter></meter> with any contents inserted between the start and end tags:

<meter>
  <!-- Meter content goes here. -->
</meter>


<meter min="number" max="number">
  <!-- Meter content goes here. -->
</meter>

Note: The default values for the min and max attributes are 0 and 1. These attributes should be updated to create the appropriate range for the given context.

Example

Below is an example of the <meter> tag being used to display disk usage:

<p>Disk Usage <meter min="0" max="100" value="70" title="GB"></meter></p>

This code results in the following display:

Output of the meter tag example

All contributors

Contribute to Docs

Learn HTML on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Free course

    Learn HTML

    Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
    • Beginner Friendly.
      7 hours