What’s New in HTML 5: Inline Semantics continued

Meter - The meter element is used to “represent a numeric value (amount) in a specified range” and can be given up to six attributes, including value, minimum, low, high, maximum, and optimum, which are used to describe the amount in a way that will be recognized by browsers. The amount enclosed by the meter tag <meter></meter> can be anything from money to statistical values. Let me use my son’s height as an example.

Without the meter element I can simply write:

<p>My 25-month old son is 85cm long.</p>

Using meter tags I can let the browser know that his length is a numerical value by simply putting the value between tags.

<p>My 25-month old son is <meter>85cm</meter> long.</p>

Now if I use the attributes I can give the machine more information without changing the sentence one bit.

<p>My 25-month old son is <meter value=”85″ low=”80″ high=”94″ optimum=”88″>85cm</meter> long.</p>

In this example the use of minimum and maximum is not applicable since there is no minimum or maximum length. However, the height chart states that the range for 25-month-old boys is between 80 to 94 cm, which is why I set that as the low and high length. The average, which can be seen as optimum is 88cm. This means that my son is below the optimum or average height. The additional information may not be seen by readers when looking at the sentence but it can be shown as a tool tip or in any other manner you may desire.

Source: New Elements in HTML 5 by Prof. E. Harold

Go back