meter要素

meter要素はHTML5から新たに追加された要素です。

上限から下限の範囲が予めわかっている範囲内のスカラー量、または少数の値を表し、設置するだけでゲージが表示されます。この要素のコンテンツに書かれたテキストはmeter要素に対応していない場合に代替テキストとして機能します。

進捗状況を表す場合にはprogress要素要素を用います。

値の表現

min属性は下限を、max属性は上限を表し、value属性は実際の測定値を表します。また、low属性は値を「低い」と評価するための閾値であり、high属性は値を「高い」と評価するための閾値としてユーザーエージェントに利用されます。

デフォルトではlow属性の値～high属性の値の数値が最適な値として表されますが、optimum属性を用いることで最も最適な数値の範囲を定義することができます。optimum属性値が「低い」と評価される値であれば、低いことが良い状態と評価され、「高い」と評価される値であれば、高いことが良いと評価されます。

使用例

<meter max="100" value="60">60%</meter>

<!-- 80点以上がよいとされる中、60点 -->

<meter low="40" high="79" max="100" optimum="80" value="60">60点（まあまあ）</meter>

<!-- 120～129がよいとされている血圧 -->

<meter min="0" low="100" high="139" max="200" optimum="120" value="95">95（低血圧）</meter>

<meter min="0" low="100" high="139" max="200" optimum="120" value="120">120（正常血圧）</meter>

<meter min="0" low="100" high="139" max="200" optimum="120" value="150">150（高血圧）</meter>

使用可能な属性

• すべてのグローバル属性
• value
• min
• max
• low
• high
• optimum

コンテンツカテゴリ

• フローコンテンツ
• フレージングコンテンツ
• フォーム関連要素（ラベル付け可能）
• パルパブルコンテンツ

子要素にしていい要素の種類

• フレージングコンテンツ
  • ただし、meter要素を除く

親要素にしていい要素の種類

• フレージングコンテンツが期待されているすべての要素

仕様書と策定状況