Конечно, нужного результата можно добиться при помощи тегов , к которым применяются стили CSS, но также можно воспользоваться новым тегом , разработанным специально для таких задач. Тег помогает создать семантическое описание шкалы. Чтобы ваша шкала соответствовала рекомендациям спецификации, не используйте ее для отображения данных с неопределенными минимальными и максимальными значениями (например, рост или вес — кроме ситуаций, когда вы задаете конкретные границы). С другой стороны, тег можно использовать для отображения температуры, если интерпретировать его как шкалу термометра с заданным минимумом и максимумом.

В нашем примере шкала должна показывать, насколько близко мы подошли к цели $5000. Минимальное и максимальное значения известны, так что тег идеально подходит для этой задачи.

Простой прототип шкалы будет создан в новом документе HTML5. Чтобы продемонстрировать работу шкалы, в коде жестко зафиксировано текущее значение 2500.00.

html5_meter/index.html

Our Fundraising Goal

Help us reach our goal of $5000!

Для управления шириной шкалы можно воспользоваться CSS. Создайте файл stylesheets/style.css и добавьте в него следующий код:

html5_meter/stylesheets/style.css

meter{

width: 280px;

}

Не забудьте включить ссылку на файл CSS в секцию страницы HTML:

html5_meter/index.html

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