<meter>の解説｜クロノドライブのHTML5辞典

「meter」とは、上限と下限が予めわかっている範囲内における割合や数量、測定値などを示す際に使用するタグです。ディスクの使用量や検索結果の関連性、選挙の得票率などに使用され、ブラウザ上ではゲージによって表示されます。

min属性、max属性でそれぞれ最小値、最大値を指定します。指定しない場合はそれぞれ0、1.0となります。

value属性は測定値を表します。value属性はmin属性とmax属性の間の値で、必ず指定する必要があります。

low属性、high属性はそれぞれ「低い」とされる領域の下限値、「高い」とされる領域の上限値を表します。また、optimum属性によってそのゲージの最適値を表します。指定しなかった場合はそれぞれmin、max、minとhighの中間値となります。
これらの属性によってゲージをminからlowまでの「低い」、highからmaxまでの「高い」、そしてその「中間」の最大3つの領域に分けることができ、その中でoptimum属性値がある範囲は「最適な領域」となります。
ブラウザはvalueの値がどの領域にあるか、最適な領域にあるかどうかによって、ゲージの色など表示を変えることができます。

<meter>タグに対応していないブラウザを使用しているユーザーにメッセージや代替内容を表示するため、<meter>～</meter>の中にゲージの状態をテキストで記述することが推奨されています。<meter>タグに対応しているブラウザでは<meter>～</meter>の内容は表示されません。

<meter>は進捗状況をプログレスバーで表示するためのタグではありません。進捗を示したい場合は<progress>を使います。
また、<meter>は任意の範囲の数値を表すものではないため、重さや高さのような最大値が分からないものを表すのに使うのは適切ではありません。

<meter>はラベル付け可能要素であり、フォーム部品ではありませんが<input>などのように<label>でラベルを付けることができます。