RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/html/elements/meter below:

meter · WebPlatform Docs

meter Summary

The HTML <meter> element represents a value within a specified range. This value can be any real number.

Overview Table

DOM Interface: HTMLMeterElement

Permitted contents Phrasing content, but may not contain any `` elements itself. Permitted parents Any element that can contain phrasing content. Tag omission A `` element must have both a start tag and an end tag.

The meter element defines a value between a minimum or maximum. This can be used for fundraisers, test results, or a number of other things. It should not be used as a progress bar. For that, use the [progress element](/html/elements/progress). You should give a description of the meter within the tags, such as `

5 out of 10 squares occupied

`. This meter can also have various attributes on it, such as the optimum, high and low values.

The content of the meter element should represent the set min/max/value attributes in human readable form. This will be picked up by assistive technologies as well as act as a fallback for browsers not supporting the element.

Attributes

This element supports the HTML5 global attributes.

value: The current value of the meter. If there is no value specified, or if the value is incorrectly formatted, it defaults to 0. This value must be between the min and max values of the element. If not, it will default to the closest available value within the ranges.
optimum; The optimum, or goal value of the meter. For example, on a test score, this would be 100. Or, on a fundraiser, this may be a monetary value. This must be below the max value and above the min value.
min; The minimum value of the meter. This must be less than the max attribute value. If this attribute is not present, it defaults to 0.
max; The maximum value of the meter. This must be greater than the min attribute value. If this attribute is not present, it defaults to 1.
low; The low value is what is considered a low range for the meter. In the example of a fundraiser, it may be near the starting value. This must be greater than the min and less than the max and high values. If unspecified, it defaults to 0.
high; The high value is what is considered a high range for the meter. In the example of a fundraiser, it may be near the goal value. This must be less than the max and greater than the min and low values. If unspecified, it defaults to 1.

Examples

A basic example of the meter element

<meter min="0" max="10" value="5">5 out of 10</meter>

View live example

An example of the meter element using all of its attributes

<meter min="0" max="1000" value="500" low="200" high="800" optimum="900">$500 raised</meter>

View live example

Styling options for the meter bar

meter {
  -webkit-appearance: none;
}

meter::-webkit-meter-bar {
  border: 2px solid black;
}

meter::-webkit-meter-bar {
  background: lightblue;
}

meter::-webkit-meter-optimum-value {
  background: green;
}

meter::-webkit-meter-suboptimum-value {
  background: orange;
}

meter::-webkit-meter-even-less-good-value {
  background: red;
}

View live example

Usage

 The meter element is intended to have descriptive text inside of it, similar to the alt tag of the image element.

The title attribute may be used to specify a unit.

Related specifications

HTML 5.1: W3C Working Draft
HTML 5: W3C Recommendation