HTML 5 вводит несколько полезных новых элементов с целью добавить значимости разметке страницы. Среди этих новых элементов <time>, <mark>, а также еще один – <meter>. Это встраиваемый тег, по-этому он может быть использован внутри большинства элементов, в том числе хедера или абзаца.

Что сказано в спецификации?

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

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

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

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

Атрибуты

Существует 6 атрибутов, применяемых совместно с тегом <meter>: value, min, max, high, low и optimum. Как уже замечено выше, внимание акцентируется на том, чтобы авторы использовали их корректно.

Value

Этот атрибут определяет текущее значение, то есть то, что должно быть проанализировано. Если вы не указываете атрибут value, его значение будет такое же, как первое число в теге. Например, для <meter>2 out of 10</meter> value будет равен 2. Если в теге вообще отсутствуют числа, value будет 0.

Min

Минимально допустимое значение. Если атрибут <min> отсутствует, предполагается, что минимальное значение равно нулю.

Max

Максимально допустимое значение. Если максимальное значение меньше минимального, тогда max приравнивается к минимальному значению. Если максимальное значение не указано, оно равняется единице. Тем не менее, если возможно задать тип этого значения, например, процент, максимальное значение, соответственно, будет 100%.

Low

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

High

Этот атрибут используется для отделения высоких значений диапазона. Если его значение меньше атрибута low, они приравниваются. Также, если high больше атрибута max, его значение становится таким же, как значение max.

Optimum

Этот атрибут определяет оптимальное значение и находится где-то между min и max. Он может быть больше атрибута high.

Давайте рассмотрим несколько примеров

Средство отображения результатов голосования или рейтинга

<p>Ваши баллы: <meter>2 из 10</meter></p>

Мы можем расширить значение добавив атрибуты min и max:

<p>Ваши баллы: <meter min="0" max="10">2 из 10</meter></p>
<p>Ваши баллы: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>

Без атрибутов

Вам не всегда необходимо использовать вместе с тегом <meter> атрибуты. Вы можете написать:

<meter>80%</meter>

потому что максимальным принимается значение 100% (если у вас нет дополнительных 10 :Р). Вы также можете использовать дроби, так как диапазон в них уже указан, например:

<meter>3/4</meter>

Несколько реальных мировых примеров

Рождественский календарь / Обратный отсчет

<p>Рождество через <meter value="30" min="1" max="366" title="дней">30 дней!</p>

Обратите внимание, что атрибут title может быть использован для уточнения единицы измерения (так что вы можете написать «сантиметры», «фунты» и т. д.

Сбор средств

Также, можно использовать <meter> для сбора средств на таком сайте как Justgiving.

Эта страница, например, использует следующий код:

<dl>
  <dt>Target</dt>
    <dd><meter min="145" value="145" title="pounds">£145</meter></dd>
  <dt>Amount raised so far</dt>
    <dd><meter min="0" max="1000" low="50" high="125" value="145" optimum="145"
    title="pounds">£145</meter></dd>
</dl>

Неправильное использование

Пустой тег

Если вы напишете

<meter min="0" max="100" value="75"></meter>

на вашей странице ничего не отобразится. Об этом сказано в спецификации:

Рекомендуется устанавливать значение путем включения его в содержимое элемента

По-этому вам необходимо заполнять содержимое тега и это не обязательно должно быть число. В спецификации приведен хороший пример:

<meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
<meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p>
<meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>

Что может быть использовано для воспроизведения следующей информации на экране:

Как я упоминал ранее, некорректно использовать этот тег для роста или веса, если не указано максимальное значение. В спецификации приведен пример:

<p>Кусочек грейпфрута имел радиус
<meter>12 см</meter> и ширину
<meter>2 см</meter>.</p> <!-- ПЛОХО! -->

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

<p>Кусочек грейпфрута имел радиус 12 см и ширину 2 см.</p>
  <dl>
    <dt>Радиус: <dd> <meter min="0" max="20" value="12">12 см</meter>
    <dt>Ширина: <dd> <meter min="0" max="10" value="2">2 см</meter>
  </dl>

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

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

Тег <meter> работает, как минимум, в таких браузерах: Safari 4, Firefox 3.5, Chrome 2, Opera 9.64. Для IE 6, 7 и 8 необходим следующий скрипт (смотрите статью Реми про то, как сделать, чтоб HTML 5 хорошо работал в более старых браузерах):

<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Так как это встраиваемый элемент, вам не нужно делать ничего особенного с помощью CSS.

Заключение

Если я использовал

<meter value="1000" min="0" max="500">100%</meter>

то, конечно же, возникали противоречия. Теперь я понимаю, что ошибался, так как в этом случае пользователь увидит на экране «100%», когда на самом деле значение 1000. При использовании тега <meter> авторам важно убедиться, что они делают это семантически правильно.

Появление атрибутов может запутать в некоторых случаях, но спецификация очень детально описывает их использование вместе с этим элементом. Я думаю, они зря не добавили возможность использовать его для роста или веса, но, в общем, я смотрю, тег <meter> широко используется в приложениях и на веб-страницах, возможно, совместно с яваскириптом, он дает возможность создавать живые графики и схемы (хотя для этого можно использовать и <canvas>).

В конце-концов, интересно, может ли <meter> отображать отрицательные числа? Например, если температура была между -10 и 5 градусов, могу ли я использовать <meter> для отображения этого? Я бы хотел узнать ваши мысли.

Источник:  css-live.ru