/    Sign up×
Reference /Pin to ProfileBookmark

The meter tag, or HTML Meter element, is used to designate a scalar measurement within a known range, or a fractional value.


For best accessibility practices, the <label> tag should always be added. For progress bars, use the <progress> tag instead of <meter>.

<label for="first_meter">First Meter:</label>
<meter id="first_meter" value="3" min="0" max="5">3 out of 5</meter>

<label for="second_meter">Second Meter:</label>
<meter id="second_meter" value="36" min="0" max="10">6 out of 10</meter>


Provides the id of the form that the <meter> tag is a part of.

Designates the range that is weighed to be a high value.

Designates the range that is weighed to be a low value.

Designates the maximum value of the range.

Designates the minimum value of the range.

Designates the optimal value for the gauge.

This required attribute provides the current value of the gauge.

Browser Compatibilty


Have a code example of <meter>? Submit a codepen.io demo and we'll showcase it here

to submit a demo.


Help @reference spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ

legal: ({
terms: of use,
privacy: policy
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,