<meter>

Что делает тег

Тег <meter> используется для отображения числовых данных на шкале измерений, например, на индикаторе батареи или прогресс-баре. Значения можно показывать в процентах или других единицах измерения.

Синтаксис тега <meter>

<meter value="значение" min="минимальное значение" max="максимальное значение"></meter>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <meter> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Прогресс выполнения задачи:

<label for="task-progress">Прогресс задачи:</label>
<meter id="task-progress" value="75" min="0" max="100">>75%</meter>

Проверка надёжности пароля:

<label for="password-strength">Надёжность пароля:</label>
<meter id="password-strength" value="8" min="0" max="10">>8/10</meter>

Уровень заряда батареи:

<label for="battery-level">Уровень заряда батареи:</label>
<meter id="battery-level" value="50" min="0" max="100">>50%</meter>

Громкость звука:

<label for="sound-volume">Громкость звука:</label>
<meter id="sound-volume" value="80" min="0" max="100">>80%</meter>

Для чего использовать тег <meter>

• Показать прогресс выполнения задачи.
• Показать надёжность пароля.
• Отобразить уровень заряда батареи.
• Показать уровень громкости звука.
• Вывести размер загружаемого файла.
• Показать вес объекта.

Атрибуты тега <meter>

value — значение на шкале измерений.

min — минимальное значение.

max — максимальное значение.

low — нижнее пороговое значение.

high — верхнее пороговое значение.

optimum — оптимальное пороговое значение.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения тега

Атрибут value обязателен для тега <meter>. Значение атрибута value должно находиться в пределах диапазона, заданного атрибутами min и max.

Нюансы

• Тег <meter> может использоваться вместе с CSS.
• Для доступности рекомендуется использовать атрибут title, чтобы добавить описание тегу <meter>.
• Тег <meter> не поддерживается в Internet Explorer.

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

Тег поддерживается всеми современными браузерами. Актуальная информация — на сaniuse.

Альтернативные теги

Вместо тега <meter> можно использовать <progress>, чтобы отобразить прогресс выполнения задачи.

Чем заменить тег

Если необходимо заменить тег <meter>, можете использовать <div> или <span> с CSS-стилями.

Актуальность

Тег <meter> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.