<meter>
- 25 января 2023
Что делает тег
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023