HTML тег `<meter>`

Значение и применение

Элемент <meter> предназначен для отображения скалярной величины в заданном диапазоне или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение.

Данный тег используется, к примеру, как необходимость отображения релевантности поискового запроса, результатов опроса, заряда батареи, использования дискового пространства и тому подобное. Текст внутри тега отображается только для тех браузеров, которые его не поддерживают.

Для хода задачи используйте <progress>, для измерения в известном диапазоне — <meter>. Значение и единицы полезно продублировать видимым текстом, а индикатору дать подпись <label>. Ориентируйтесь на порядок min ≤ low ≤ high ≤ max; границы низкого и высокого диапазонов могут совпадать.

Поддержка браузерами

Спецификация: multipage

Нет поддержки: WebView Android.

Отдельные значения (6) поддерживаются не везде — смотрите таблицу.

ВсеКомпьютерыМобильные

Совместимостьhtml.elements.meter
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`meter`	✓6	✓13	✓16	✓11	✓6	✓18	✓16	✓11	✓10.3	✓1.0	×	✓10.3
`high`	✓6	✓13	✓16	✓11	✓6	✓18	✓16	✓11	✓10.3	✓1.0	×	✓10.3
`low`	✓6	✓13	✓16	✓11	✓6	✓18	✓16	✓11	✓10.3	✓1.0	×	✓10.3
`max`	✓6	✓13	✓16	✓11	✓6	✓18	✓16	✓11	✓10.3	✓1.0	×	✓10.3
`min`	✓6	✓13	✓16	✓11	✓6	✓18	✓16	✓11	✓10.3	✓1.0	×	✓10.3
`optimum`	✓6	✓13	✓16	✓11	✓6	✓18	✓16	✓11	✓10.3	✓1.0	×	✓10.3
`value`	✓6	✓13	✓16	✓11	✓6	✓18	✓16	✓11	✓10.3	✓1.0	×	✓10.3

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Атрибуты

Атрибут	Значение	Описание
`min`	`number`	Атрибут обозначает минимально допустимое значение. Значение по умолчанию ноль.
`max`	`number`	Верхняя граница, по умолчанию 1. Указывайте корректный диапазон `min ≤ max`; при некорректном порядке границы не меняются местами, вычисленная верхняя граница ограничивается нижней.
`low`	`number`	Атрибут определяет низкие значения (но не минимальные). Это значение должно быть не больше `high`. Если указывается значение `low` меньше чем значение `min`, то `low` = `min`.
`high`	`number`	Атрибут отделяет высокие значения (но не максимальные). Если значение `high` меньше чем значение `low`, то `high` = `low`. Если `high` задано большим, чем `max`, то `high` = `max`.
`optimum`	`number`	Предпочтительное значение в диапазоне. Оно определяет, какая область считается хорошей: низкая, средняя или высокая. Цвет зависит от положения текущего `value` относительно этой области и оформления браузера, а не только от `optimum`.
`value`	`number`	Определяет текущее значение (обязательный атрибут).
`form`	`form_id`	Исторический атрибут; современный HTML не предусматривает его у `<meter>`.

Примеры, попробуйте сами

Измерение в диапазоне

Измените value в пределах min и max, сравните значения около low и high.

index.html

HTML

<label>Занято места <meter min="0" max="100" low="20" high="80" optimum="10" value="65">Занято места</meter></label>

Значение CSS по умолчанию

Нет.

Поддержка глобальных атрибутов

Элемент поддерживает "глобальные атрибуты".

Атрибуты событий

Элемент поддерживает "атрибуты событий".

HTML тег <meter>