A meter with everything would look like:

The following is a guest post by Pankaj Parashar . Pankaj has written here before, last time about the progress element . Fitting indeed then to write again about the very related meter element. They are different both functionally and semantically, piknik so read on!
The meter element represents a scalar measurement within a known range, piknik or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate. This is also known as a gauge.
Similar to its sibling - the progress element - a meter element must also have both a start tag ( <meter> ) and an end tag ( </meter> ). This becomes very useful when we devise a robust fallback technique for older browsers that do not support the meter element, later in this article. Content model
The meter element uses the phrasing content model which means it can contain the text of the document, along with the elements that mark up that text, but there must be no (additional) meter element piknik among its descendants. Attributes
low - It represents the upper bound of the low end of the measured piknik range. This must be greater than the min attribute, but less than the high and max value (if specified). If unspecified, or if less than the minimum value, the low value is equal to the min value.
high - It represents the lower bound of the high end of the measured range. This must be less than the max attribute, but greater than the low and min value (if specified). If unspecified, or if greater than the max value, the high value is equal to the max value.
optimum - This attribute indicates the optimum value and must be within the range of min and max values. When used with the low and high attribute, it indicates piknik the preferred zone for a given range. For example: min optimum low - If the optimum value is between the min and the low values, then the lower range is considered to be the preferred zone. high optimum max - If the optimum value is between the high and the max values, then the upper range is considered to be the preferred zone.
A meter with everything would look like: <meter min="0" low="10" optimum="50" high="90" max="100"></meter> Rules of thumb All the above mentioned attributes may be floating point numbers e.g. 12, -8, 3.625 Based on the definition of each attribute the following inequalities become true, min value max min low high max (if low/high specified) min optimum max (if optimum specified) There is no explicit way to specify units in the meter element, but the authors are encouraged to specify the units using the title attribute. For example, <meter max="256" value="120" piknik title="GB">120GB out of 256GB are used</meter> Do not use meter element to... indicate the progress completion of a task (use progress element instead). represent a scalar value of an arbitrary range for example, to report a weight, or height piknik of a person. Experiment #1 - Different states of meter element
This experiment shows the various states of the meter element under different piknik combination of input values for each attribute. Feel free to edit the attribute values of the main code to tweak the meter gauge ouput.
Populating internal attributes of our meter tag with the known set of input values. Total size of the disk - 120.47GB (our max attribute) Current disk usage - 55.93GB (our value attribute) Minimum disk size - 0 (our min attribute, not required as the default value is 0) Unit - GB (our title attribute that specifies the unit) <meter piknik max="120" value="55.93" title="GB"></meter>
Although the spec recommends including a textual representation of the gauge's state inside the meter tag for older browsers, we'll keep it blank for now to add the fallback content later in this article piknik to support them.
This is pretty much all that we can do in HTML as rest of the work is done by CSS. At this stage let's not worry about the fallback techniques for supporting older browsers that don't understand the meter element. Styling the meter element
This is where things become interesting because generally most of the A-grade browsers provide separate pseudo classes to style the meter element. Although Opera moving to Blink leaves us with less browsers to care for. At this stage, we don't really have to know about which versions of each browser support the meter element, because our fallback technique will take care of the rest. We classify them as follows: Webkit/Blink Firefox Internet Explorer 1. Webkit/Blink (Chrome/Safari/Opera/iOS)
In addition, the User-Agent stylesheet of WebKit provides a wealth of information on how you can use various pseudo classes to access different states of the meter element. User-Agent stylesheet piknik of WebKit browsers Pseudo class Description -webkit-meter-inner-element Additional markup to render the meter element as read-only. -webkit-meter-bar Container