The Meter Tag
Occasionally, you see a meter on a website. Illustrations are further below.
Meters may be used, as examples, for visually presenting a test score, a star rating, a percent of completion, or a sports score.
The HTML meter tag tells the browser to display a meter. The meter represents a value within a range.
Browsers render their own meter style. The meter is likely to appear somewhat different from browser to browser. Generally, it is a short horizontal bar with a background color. The ratio is represented with a different color.
As an example, to represent 3 out of 4 the meter is rendered. The range is 1 through 4 and the value is 3.
As another example, meter represents 20%. The meter is given a range of 0 through 100 and a value of 20.
Decimals can also be represented with a meter. A range of 0.5 to 1.5 and a value of 1.0 is represented with this meter:
To publish a meter tag, three numbers need to be provided:
- The minimum end of the range.
- The maximum end of the range.
- A value within the range.
Let's assume the minimum is 15, the maximum is 30, and the value within that range is 20. This is what the meter looks like.
And this is the code for the above meter:
<meter
min="15"
max="30"
value="20">
</meter>
The min="15" tag represents the minimum end of the range.
The max="30" tag represents the maximum end of the range.
The value="20" tag represents the value within the range for calculating the ratio.
Understanding how to code a meter tag equips you with the means to present a meter within your web pages.
Will Bontrager
Was this blog post helpful to you?
(anonymous form)
All information in WillMaster Blog articles is presented AS-IS.
We only suggest and recommend what we believe is of value.
As remuneration for the time and research involved to provide quality links,
we generally use affiliate links when we can.
Whenever we link to something not our own, you should assume
they are affiliate links or that we benefit in some way.
Recent Articles in the Library
Inspecting HTML Tags
Software to inspect meta and link tags that might have changed after the web page was loaded.
Linked Images in Facebook
Post a URL on Facebook. Facebook pulls in an image and links to that URL. (Probably similar on other social media sites.)
Real Download Link
A download link can tell the browser to download the file for saving on the user's hard drive — instead of displaying it in a browser window.
Characters for Hyphenation
The CSS hyphenate-character property can be used to tell the browser an alternate character or set of characters should be used where a hyphen would be inserted at end of lines.
Automatic Wrap Balancing for Headlines
Use the CSS text-wrap:balance; property to better balance the line lengths of multi-line headlines.
Redirect With Method POST
When you can't use method POST, but you must, read this.
Gradient-colored Text
The information you need to make color-gradient text.
