Графическое представление значений

Чтение — около 6 минут· без учёта практики

В предыдущем уроке мы добавили на сайт режим дня Тони. В этом уроке мы рассмотрим, как средствами HTML наглядно показать величину в заданном диапазоне и состояние текущего процесса, — и отметим на сайте успехи Тони в учёбе и на прогулках.

Элемент meter

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

Элемент применяется, например, чтобы показать релевантность результата поиска, результаты опроса, заряд батареи, заполненность диска и тому подобное. Между открывающим и закрывающим тегами записывается текстовое значение, например «10 из 100». Браузер показывает вместо него шкалу, но текст полезно указывать: он остаётся в коде страницы и отображается, если шкалу показать невозможно.

Атрибуты, которые используются с элементом:

Атрибут	Значение	Описание
`value`	число	Определяет текущее значение. Является обязательным атрибутом.
`min`	число	Минимально допустимое значение. Значение по умолчанию — ноль.
`max`	число	Максимально возможное значение. Значение по умолчанию — единица. Если максимальное значение задано меньше минимального, браузер считает его равным минимальному.
`low`	число	Верхняя граница области низких значений (но не минимальное значение). Значение должно быть меньше или равно `high`. Если указать `low` меньше, чем `min`, браузер считает `low` равным `min`.
`high`	число	Нижняя граница области высоких значений (но не максимальное значение). Если значение `high` меньше `low`, браузер считает `high` равным `low`. Если `high` больше `max`, браузер считает `high` равным `max`.
`optimum`	число	Оптимальное значение. Должно находиться в пределах от `min` до `max` и может быть больше, чем `high`. Показывает, какая из областей — низких, средних или высоких значений — считается хорошей.

Покажем условный запас энергии Тони по шкале от 0 до 100: после отдыха он полон сил, а после долгой прогулки хочет отдохнуть. Сравним разные значения с помощью <meter>:

Запас энергии Тони

Шкалы меняют цвет в зависимости от того, в какую область попадает значение. Замените у любой шкалы optimum="90" на optimum="10" — хорошими станут низкие значения, и цвета поменяются местами.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Запас энергии Тони</title>
  </head>
  <body>
    <h1>Запас энергии Тони</h1>
    <p>Это условная шкала: 0% — пора отдыхать, 100% — полон сил и готов играть.</p>
    <p>Энергия Тони: 10% <meter value="10" min="0" max="100" low="20" high="80" optimum="90">10 из 100</meter></p>
    <p>Энергия Тони: 20% <meter value="20" min="0" max="100" low="20" high="80" optimum="90">20 из 100</meter></p>
    <p>Энергия Тони: 30% <meter value="30" min="0" max="100" low="20" high="80" optimum="90">30 из 100</meter></p>
    <p>Энергия Тони: 40% <meter value="40" min="0" max="100" low="20" high="80" optimum="90">40 из 100</meter></p>
    <p>Энергия Тони: 50% <meter value="50" min="0" max="100" low="20" high="80" optimum="90">50 из 100</meter></p>
    <p>Энергия Тони: 60% <meter value="60" min="0" max="100" low="20" high="80" optimum="90">60 из 100</meter></p>
    <p>Энергия Тони: 70% <meter value="70" min="0" max="100" low="20" high="80" optimum="90">70 из 100</meter></p>
    <p>Энергия Тони: 80% <meter value="80" min="0" max="100" low="20" high="80" optimum="90">80 из 100</meter></p>
    <p>Энергия Тони: 90% <meter value="90" min="0" max="100" low="20" high="80" optimum="90">90 из 100</meter></p>
    <p>Энергия Тони: 100% <meter value="100" min="0" max="100" low="20" high="80" optimum="90">100 из 100</meter></p>
  </body>
</html>

Как meter выбирает цвет

Атрибуты low и high делят шкалу на три области: низких значений (до low), средних (от low до high) и высоких (от high). Атрибут optimum показывает, какая из областей хорошая. Конкретное оформление шкалы зависит от браузера и его настроек. Обычно цвет зависит от того, где находится текущее значение value:

зелёный — значение в той же области, что и optimum;
жёлтый — значение в соседней области;
красный — значение в противоположной крайней области, если optimum находится в низкой или высокой области.

В примере с запасом энергии Тони optimum="90" находится в области высоких значений. При таком оформлении шкала зелёная при значении от 80% включительно, жёлтая — от 20% включительно до 80% не включительно, красная — ниже 20%. Если optimum находится между low и high включительно, хорошей считается средняя область, а обе крайние — менее хорошими: красной области в этом случае нет.

Элемент progress

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

У элемента два основных атрибута: max определяет общий объём процесса (значение должно быть положительным), а value указывает уже выполненную часть. Закрывающий тег </progress> обязателен.

Тони учит команду «Сидеть»

Тони прошёл одно из четырёх запланированных занятий. Измените value с 1 на 3 — шкала заполнится на три четверти, а затем на 4 — полностью. Обновляйте число пройденных занятий в подписи и текст внутри элемента: сами они не меняются.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Тони учит команду «Сидеть»</title>
  </head>
  <body>
    <h1>Тони учит команду «Сидеть»</h1>
    <p>Пройдено занятий: 1 из 4. <progress value="1" max="4">1 из 4</progress></p>
  </body>
</html>

Если атрибут max не указан, общий объём равен единице и value задаётся числом от 0 до 1. Если не указать и value, элемент показывает неопределённый прогресс: процесс идёт, но сколько осталось, неизвестно. Большинство браузеров в этом случае показывают анимацию.

Как продвигается обучение Тони

Сравните этапы обучения Тони. Без max общий объём равен 1: значения 0.25, 0.5 и 1 означают 25%, 50% и 100% пройденных занятий. У последней шкалы нет и атрибута value: обучение идёт, но прогресс пока неизвестен.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Как продвигается обучение Тони</title>
  </head>
  <body>
    <h1>Как продвигается обучение Тони</h1>
    <p>Пройдена четверть занятий: <progress value="0.25">25%</progress></p>
    <p>Пройдена половина занятий: <progress value="0.5">50%</progress></p>
    <p>Пройдены все занятия: <progress value="1">100%</progress></p>
    <p>Обучение идёт, прогресс пока неизвестен: <progress>Прогресс неизвестен</progress></p>
  </body>
</html>

meter или progress

Элементы похожи внешне, но различаются по смыслу. Элемент <progress> показывает ход процесса, который движется к завершению: загрузку файла, прохождение курса, шаги анкеты. Он не подходит для величин, которые ничего не «завершают», — например, для заполненности диска или релевантности поискового запроса. Для таких величин предназначен элемент <meter>.

Обоим элементам нужен понятный текст рядом: что именно измеряется. В уроках о формах мы свяжем подпись с элементом с помощью <label>, а пока пишите пояснение в том же абзаце, что и шкалу.

Проверьте себя

Задание

Тони гордится своими успехами и хочет показать их на сайте. В файле index.html уже есть раздел «Мои успехи» с двумя абзацами. Добавьте в конец каждого абзаца подходящий элемент:

к абзацу о команде «Апорт» — шкалу хода обучения: пройдено 3 занятия из 5. Внутри элемента напишите текст «3 из 5»;
к абзацу о прогулке — шкалу длительности прогулки от 0 до 90 минут: значение 40, короткая прогулка — до 30 минут, длинная — от 60 минут, а лучше всего гулять около 75 минут. Внутри элемента напишите текст «40 из 90 минут».

Ожидаемый результат: в первом абзаце шкала заполнена на три пятых. Во втором абзаце шкала прогулки жёлтая: 40 минут — уже не короткая прогулка, но ещё не та длинная, которую Тони считает лучшей. Если шкала прогулки зелёная или красная, проверьте значения low, high и optimum.

Выполните задание

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Сайт Тони</title>
  </head>
  <body style="background-color: linen">
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1 id="top" style="color: saddlebrown; text-align: center">Привет! Меня зовут Тони</h1>
      <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
      <p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
      <p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
      <ul>
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
        <li><a href="#schedule">Мой режим дня</a></li>
      </ul>
      <section>
        <h2 id="toy" class="section-title" style="color: #8B4513">Моя любимая игрушка</h2>
        <p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
        <figure>
          <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат &quot;Удав&quot;">
          <figcaption style="color: dimgray">Я и мой канат «Удав»</figcaption>
        </figure>
        <p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
        <p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
        <hr>
        <p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
      </section>
      <section>
        <h2 style="color: #8B4513">Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
      </section>
      <section>
        <h2 id="commands" class="section-title" style="color: #8B4513">Команды, которые я знаю</h2>
        <p>Хозяин научил меня командам на немецком:</p>
        <dl>
          <dt lang="de">Sitz!</dt>
          <dd>сидеть</dd>
          <dt lang="de">Platz!</dt>
          <dd>лежать</dd>
          <dt lang="de">Fuß!</dt>
          <dd>рядом</dd>
        </dl>
        <details>
          <summary>Почему команды на немецком?</summary>
          <p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
        </details>
      </section>
      <section>
        <h2 id="schedule" style="color: #8B4513">Мой режим дня</h2>
        <table>
          <caption>Режим дня Тони</caption>
          <thead>
            <tr>
              <th scope="col">Время</th>
              <th scope="col">Будни</th>
              <th scope="col">Выходные</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">07:00</th>
              <td>Прогулка, 20 минут</td>
              <td>Сплю</td>
            </tr>
            <tr>
              <th scope="row">08:00</th>
              <td colspan="2">Завтрак</td>
            </tr>
            <tr>
              <th scope="row">13:00</th>
              <td>Жду хозяина и сплю</td>
              <td>Прогулка в парке, 1 час</td>
            </tr>
            <tr>
              <th scope="row">19:00</th>
              <td colspan="2">Ужин</td>
            </tr>
            <tr>
              <th scope="row">21:00</th>
              <td colspan="2">Вечерняя прогулка</td>
            </tr>
          </tbody>
        </table>
      </section>
      <section>
        <h2 id="progress" style="color: #8B4513">Мои успехи</h2>
        <p>Учу команду «Апорт»: пройдено 3 занятия из 5.</p>
        <p>Прогулка сегодня: 40 минут.</p>
      </section>
      <section>
        <h2 style="color: #8B4513">Моя любимая книга</h2>
        <p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
        <figure>
          <blockquote>
            <p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
          </blockquote>
          <figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
        </figure>
      </section>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer style="background-color: hsl(30, 50%, 90%)">
      <p style="text-align: center"><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/toys.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Игрушки Тони</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul>
        <li>Канат с мячиком «Удав» — моя любимая игрушка</li>
        <li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
        <li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
      </ul>
      <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
      <h2>Как играть со мной в канат</h2>
      <ol>
        <li>Покажите мне канат.</li>
        <li>Бросьте его подальше.</li>
        <li>Подождите, пока я принесу его обратно.</li>
        <li>Похвалите меня — и всё сначала!</li>
      </ol>
      <section>
        <h2 id="album">Мой фотоальбом</h2>
        <ul>
          <li>
            <figure>
              <img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
              <figcaption>Я в детстве</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
              <figcaption>С плюшевой белкой</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
              <figcaption>В худи для холодной погоды</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
              <figcaption>Шлейка надета — идём гулять!</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
              <figcaption>Смеюсь над шуткой хозяина</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
              <figcaption>После прогулки</figcaption>
            </figure>
          </li>
        </ul>
      </section>
      <p><a href="../index.html#commands">Какие команды я знаю</a></p>
      <p><a href="../index.html">Вернуться на главную</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

Продолжите в VS Code

Нажмите «Скачать ZIP» в редакторе выше и распакуйте архив в папку my-site: он содержит все страницы и ресурсы примера с вашими текущими правками. Сохраните структуру папок; перед заменой существующих файлов сохраните копию своей версии сайта.
Откройте index.html в браузере и найдите раздел «Мои успехи».

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

Дополнительное задание: энергия и обучение Тони

Добавьте на сайт Тони две шкалы. В редакторе уже есть подписи о запасе энергии и пройденных занятиях. Добавьте после текста:

к запасу энергии — элемент <meter> со значением 0,1. Задайте границы областей и оптимальное значение так, чтобы низкий запас энергии попадал в наименее подходящую область;
к пройденным занятиям — элемент <progress>, заполненный на одну десятую. Не указывайте max: используйте диапазон от 0 до 1.

Ожидаемый результат: обе шкалы заполнены на одну десятую. Шкала энергии обычно красная: Тони пора отдохнуть, а шкала обучения показывает 10% пройденных занятий. Подсказка: чтобы показать низкий запас энергии как наименее подходящий, значение должно попасть в область, наиболее удалённую от optimum, — например, low="0.3", high="0.7" и optimum="0.9".

Добавьте индикаторы

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Энергия и обучение Тони</title>
  </head>
  <body>
    <p>Запас энергии Тони: 10%.</p>
    <p>Тони прошёл 10% занятий.</p>
  </body>
</html>