Введение в элемент <meter>

Элемент <meter> применяется для наглядного представления числа, лежащего в заданном диапазоне. Отображается данный элемент в виде горизонтальной полосы, где цветным фоном отмечается текущее значение на шкале.

<meter> удобно использовать в инфографике для визуализации таких данных как дисковое пространство, заряд батареи, рейтинг и др.

Элемент <meter> применяется для визуального представления числа, лежащего в заданном диапазоне. Наглядным примером будет термометр, показывающий температуру воды в интервале от 0 до 100 градусов Цельсия. Или медицинский градусник, предназначенный для измерения температуры человеческого тела (рис. 1). Обычно такой градусник имеет ограниченный диапазон от 35° до 42°, поскольку биологические функции человека работают в этих пределах.

Медицинский градусник

Рис. 1. Медицинский градусник

Элемент <meter> по умолчанию содержит диапазон от 0 до 1, а для указания текущего значения предназначен атрибут value. Значение обязательно должно лежать в этом диапазоне, при этом может включать и 0 и 1. Например, 0.8 подходит, а 1.2 или 33 уже нет. Вот несколько допустимых значений (пример 1).

Пример 1. Атрибут value

Удобнее самим задать требуемый диапазон с помощью атрибутов min и max. Тогда значение value должно подчиняться математическому неравенству:

min ≤ value ≤ max

В примере 2 показаны <meter> с разными диапазонами значений.

Пример 2. Атрибуты min и max

Обратите внимание, что мы не обязаны использовать только целые числа, поэтому в качестве значений атрибутов можно ставить и десятичные дроби. Также числа могут быть и отрицательными, главное, чтобы они лежали в заданном диапазоне.

Внутри <meter> текст отображаться никак не будет, но поисковые системы его могут прочитать, поэтому рекомендуется расшифровывать числа для их доступности.

<meter value="40" min="0" max="100">40 градусов по Цельсию</meter>

Дополнительные атрибуты low, high, optimum дают браузеру информацию о том, располагается ли число в оптимальном диапазоне значений. В табл. 1 перечислены атрибуты элемента <meter>.

Табл. 1. Атрибуты <meter>
Атрибут	Описание
value	Текущее числовое значение шкалы. Обязательное значение.
min	Минимальное значение диапазона. По умолчанию равно 0.
max	Максимальное значение диапазона. По умолчанию равно 1.
low	Порог низкого значения.
high	Порог верхнего значения.
optimum	Оптимальное пороговое значение.

Если у <meter> присутствуют атрибуты low и high, тогда они должны подчиняться математическому неравенству:

min ≤ low ≤ high ≤ max

Визуально эти атрибуты представлены на рис. 2.

Рис. 2. Атрибуты элемента <meter>

Сочетание атрибутов и их значений даёт разную окраску шкалы. В табл. 2 приведены примеры типовых комбинаций.

Табл. 2. Комбинации атрибутов
Пример кода	Вид <meter>	Описание
<meter value="0.5">		Наличие только одного value всегда даёт зелёную шкалу. Остальные атрибуты принимаются по умолчанию (min=0, max=1).
<meter value="7" min="1" max="10">		Наличие только атрибутов value, min, max всегда даёт зелёную шкалу.
<meter value="7" min="0" max="10" low="5" high="8">		Если optimum не указан, то его значение считается как среднеарифметическое между значениями min и max (в данном случае будет 5). Если optimum находится в диапазоне между low и high, то: значение value между min и low даёт жёлтую шкалу; значение value между low и high даёт зелёную шкалу; значение value между high и max даёт жёлтую шкалу.
<meter value="8" min="0" max="10" low="3" high="7" optimum="2">		Если значение optimum меньше low, то: значение value между min и low даёт зелёную шкалу; значение value между low и high даёт жёлтую шкалу; значение value между high и max даёт красную шкалу.
<meter value="5" min="0" max="10" low="3" high="7" optimum="8">		Если значение optimum выше high, то: значение value между min и low даёт красную шкалу; значение value между low и high даёт жёлтую шкалу; значение value между high и max даёт зелёную шкалу.

Итоги

Элемент <meter> используется для визуального отображения числовых данных в заданном диапазоне.
Атрибуты min и max устанавливают, соответственно, минимальное и максимальное значение этого диапазона.
Обязательный атрибут value указывает текущее значение.
Атрибуты low, high, optimum используются для указания пороговых значений и влияют на окраску шкалы.