# 1. 7. 5. Шаг 4. Размечаем мелкие элементы в смысловых разделах

Определить, какие теги использовать, можно методом исключения:

* Получилось найти самый подходящий смысловой тег — использовать его.
* Для потоковых контейнеров — `<div>`.
* Для мелких фразовых элементов (слово или фраза) — `<span>`.

#### Размечаем списки <a href="#s41" id="s41"></a>

На этом этапе разберём, в каких случаях используются теги `<ul>`, `<ol>` и `<dl>`.

Несколько элементов, которые выполняют одну функцию и находятся друг с другом в одном отношении, размечают списком. Списки объединяют однородные и равноправные элементы. Если порядок элементов в списке неважен, для разметки используется тег `<ul>`, а для списков, где от перемены мест элементов списка меняется смысл, — `<ol>`.

Ссылки в навигации по сайту, перечень услуг, предоставляемых на сайте, — все эти элементы можно объединять в списки, поскольку они однотипные.

Корзину пользователя можно тоже считать списком, который включает всего один элемент.

Списки на макете:

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/skill_17@1x.png" alt="Пример списков на макете"><figcaption><p>Пример списков на макете</p></figcaption></figure>

Главная ошибка при использовании списков — объединять в список то, что списком не является, то есть неоднородные и неравноправные элементы.

К примеру, на макете ниже ошибочно объединять в список поле для ввода поисковой строки и ссылки пользовательского меню. Это разнотипные элементы и тут стоит разделять. Ссылки с пользовательским меню можно обернуть в список, а вот поиск лучше вынести отдельно.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/skill_18@1x.png" alt="Пример несписков на макете"><figcaption><p>Пример несписков на макете</p></figcaption></figure>

```
<a class="logo" href="#">
  <img src="img/logo.svg" width="110" height="30" alt="Логотип компании ...">
</a>
<form>
<!-- строка поиска -->
</form>
<ul class="user-menu">
  <li>
    <a href="#">Закладки</a>
  </li>
  <li>
    <a href="#">Корзина</a>
  </li>
  <li>
    <a href="#">Оформить заказ</a>
  </li>
</ul>
```

Если сомневаетесь, список перед вами или нет, рекомендуется при чтении макета проговаривать про себя или вслух как бы вы описали этот блок. Если фраза строится по принципу «вот список чего-то», то скорее всего это и будет список. Кстати, некоторые скринридеры (программы, которые интерпретируют в виде голосовых сообщений то что происходит на экране) перед тем как начать перечисление элементов списка, так и делают, говорят: «Список из... элементов».

С помощью списков легче визуально группировать элементы. В этом случае `<ul>` можно сравнить со строительными лесами, которые не несут семантической нагрузки. А значит, их можно заменить на обычные `<div>`. К тому же при стилизации `<div>` не придётся сбрасывать внутренние и внешние отступы, которые по умолчанию есть у списков.

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

Ещё один вид списков, которые могут встретиться на странице сайта — это `<dl>`. Элемент `<dl>` (от английского Description List) представляет собой список описаний и служит контейнером для списка пар терминов (определяемых элементом `<dt>`) и их описаний (определяемых элементами `<dd>`). Этот элемент обычно используют при создании глоссария, для отображения метаданных (списка пар ключ-значение), для описания характеристик товара и других.

Разберём пример использования тега `<dl>` в типичной карточке товара.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/skill_dl@1x.png" alt="Пример списка определений на макете"><figcaption><p>Пример списка определений на макете</p></figcaption></figure>

Технические данные о модели перфоратора можно представить как набор пар: параметр и значение. И использовать в этом случае теги `<dl>` — `<dt>` — `<dd>`. Разметим технические данные как список определений. В итоге получим следующую разметку для этого блока:

```
<dl>
  <dt>Питание</dt>
  <dd>от сети</dd>

  <dt>Тип патрона</dt>
  <dd>SDS-Plus</dd>

  <dt>Количество скоростей работы</dt>
  <dd>1</dd>

  <dt>Потребляемая мощность</dt>
  <dd>880 Вт</dd>
  …
</dl>
```

**Замечание**

Помимо валидационных правил, которые автоматически добавятся к полям для ввода, во многих случаях будет представлен удобный кроссбраузерный способ ввода информации. Например, календарь в случае с типом `date` или `color`, если это цвет. Если браузер не поддерживает какой-то из типов, то будет подставлен `<input>` с типом `text`, ничего не сломается.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/add_date_color@1x.png" alt="Ввод информации в зависимости от типа поля для ввода"><figcaption><p>Ввод информации в зависимости от типа поля для ввода</p></figcaption></figure>

#### Размечаем таблицы <a href="#s42" id="s42"></a>

`<table>` — это тег со сложной судьбой, тяжёлым наследием и комплексом вины. Комплекс настолько сильный, что даже сейчас многие боятся использовать таблицы. Дело в том, что раньше, в далёких нулевых годах, сайты верстали в основном на таблицах, так как других надёжных способов делать сетку сайта просто не было. Затем, с развитием CSS, вёрстка на таблицах стала считаться дурным тоном. Настолько дурным, что таблицы попали в антигерои разметки. А зря, потому что `<table>` — хороший и очень полезный тег, если использовать его к месту.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/sk1_add_02@1x.png" alt="Таблицы"><figcaption><p>Таблицы</p></figcaption></figure>

Основное назначение таблиц — описывать связанные данные. Когда один параметр влияет на остальные параметры, которые с ним связаны. Например, телефонные тарифы. К тарифу привязаны поля: «количество секунд», «количество мегабайт», «стоимость секунды», «стоимость мегабайта». Если меняется тариф, меняются все четыре параметра после него. Расписания поездов, уроков, сеансов фильмов, тарифы сотовых операторов, ЖКХ и так далее можно и нужно верстать таблицами. Всё это примеры многомерных связанных данных, когда друг с другом связаны три и более параметров.

Простой вариант связанных данных — двумерный, это связь вида «параметр-значение». В этом случае друг с другом связаны только два поля. Такие данные можно разметить с помощью таблицы и с помощью тега `<dl>` (списка определений). Для многомерной связи данных подходят только таблицы.

На макете интернет-магазина «DEVICE» можно увидеть простейшую связь вида «параметр-значение» в карточке товара.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/sk1_add_03@1x.png" alt="table в DEVICE"><figcaption><p>table в DEVICE</p></figcaption></figure>

Здесь вы имеете право сделать разметку таблицей. Возникает вопрос: это же не выглядит как таблица? Как сделать, чтобы таблица выглядела вот так, не «параметр слева, значение справа», а «параметр снизу, значение сверху»? С современным CSS внешний вид таблицы легко меняется.

Нужно ли всегда использовать таблицы по назначению? Да! Так как это может обернуться ощутимыми плюсами. Например, чтобы попасть в поисковую выдачу Google по очень горячему коммерческому запросу «расписание сапсана», команде Туту.ру пришлось переверстать расписания на своём сайте с `<div>` на `<table>`.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/sk1_add_04@1x.png" alt="Выдача Туту.ру по запросу расписание сапсана"><figcaption><p>Выдача Туту.ру по запросу расписание сапсана</p></figcaption></figure>

Только после этого робот Google начал понимать, что перед ним находится не набор разрозненных тегов, а именно расписание со связанными данными. И теперь в поисковой выдаче появляется виджет с расписанием от Туту.ру, что приносит им немало бесплатного и качественного трафика.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/sk1_add_05@1x.png" alt="Вёрстка блока с расписанием с помощью таблицы"><figcaption><p>Вёрстка блока с расписанием с помощью таблицы</p></figcaption></figure>

Не бойтесь таблиц и используйте их по назначению.

#### Размечаем демонстрационные материалы <a href="#s411" id="s411"></a>

Тег `<figure>` используется для того, чтобы выделить демонстрационный контент, вроде иллюстраций, диаграмм, таблиц и иллюстрационного кода, и снабдить его комментариями и описаниями. Внутри `<figure>` может быть несколько связанных между собой объектов, например, несколько изображений, или график и таблица, иллюстрирующие одно и то же.

Обычно используется в сочетании `<figure> + <figcaption>`, в `<figcaption>` помещается заголовок или подпись к элементу. Считается особенно правильным, если заголовок в `<figcaption>` стоит на первом или последнем месте внутри `<figure>`.

Внутри `<figure>` можно использовать потоковые элементы, если это уместно семантически. Например, в спецификации указана возможность определить, выделить таким образом стих, который вставлен в статью.

```
<figure>
  <figcaption>Как это могло бы выглядеть в CSS</figcaption>
  <pre>
    <code>
      p {
        color: #001122;
        font-family: "Roboto", sans-serif;
        font-size: 1.2em;
      }
    </code>
  </pre>
</figure>
...
<figure>
  <figcaption>Ростовые портреты кота Кекса, холст, масло</figcaption>
  <img src="keksik1.jpeg" alt="Кекс, лучший из всех котов по версии Академии, рыжий, толстый, анфас">
  <img src="keksik2.jpeg" alt="Кекс, лучший из всех котов по версии Академии, рыжий, толстый, профиль">
  <img src="keksik3.jpeg" alt="Кекс, лучший из всех котов по версии Академии, рыжий, толстый, вид сзади">
</figure>
...
<figure>
  <figcaption>Во славу Кекса</figcaption>
  <p>О Кекс! Ты — жизнь!<br>
  Ты наша гордость!<br>
  Ты — знамя нашего стремленья!</p>
</figure>
```

#### Размечаем параграфы и переносы <a href="#s43" id="s43"></a>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/skill_19@1x.png" alt="Пример параграфов на макете"><figcaption><p>Пример параграфов на макете</p></figcaption></figure>

Обратите внимание на текст *«Математически выверенный дизайн для вашего сайта или мобильного приложения.»* на макете ниже. Для его разметки отлично подойдёт тег `<p>`, но будет ли этого достаточно, чтобы добиться полного соответствия макету? Даже если ограничить ширину абзаца с помощью стилей, получить перенос в требуемом месте не удастся. Поэтому для этого случая воспользуемся тегом `<br>`.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/skill_20@1x.png" alt="Пример переноса на макете"><figcaption><p>Пример переноса на макете</p></figcaption></figure>

Стоит помнить, что использование `<br>` допустимо точечно в небольших информационных и промо-текстах, если так требуется в макете.

Но в то же время недопустимо использовать тег `<br>` для разделения абзацев вместо тега `<p>`. Также его нельзя использовать в крупных текстовых массивах для подгонки переносов текста «как в макете». Ошибкой будет проставить теги `<br>` в конце каждой строки, чтобы текст переносился один в один как на макете. Во всех этих случаях вёрстка становится «негибкой». Перестройкой текста с добавленными принудительными переносами становится неудобно управлять. Использование `<br>` довольно чётко регламентировано [в спецификации](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element).

Тег `<p>` удобно использовать как контейнер для мелких фразовых элементов. Простой пример — форма поиска отелей. Типовая задача разметки форм, в которой нужно сгруппировать подпись — `<label>` и само поле для ввода — `<input>`. Теги `<label>` и `<input>` — два фразовых элемента, которые формируют отдельную структурную сущность. Для группировки этих элементов можно использовать тег `<p>`.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/skill_28@1x.png" alt="Пример параграфов на макете"><figcaption><p>Пример параграфов на макете</p></figcaption></figure>

```
<p>
  <label>Дата заезда:</label>
  <input type="text" value="24 апреля 2017">
</p>
```

#### Размечаем формы <a href="#s44" id="s44"></a>

Элемент HTML-формы — это раздел документа, включающий поля и интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер. Чтобы добавить форму на страницу, нужно использовать парный тег `<form>`, внутри которого размещаются поля формы. В частном случае — это может быть одно поле.

У тега `<form>` есть два важных атрибута:

* `action` задаёт адрес (`URL`) отправки формы;
* `method` задаёт метод отправки формы.

Рассмотрим типовые варианты форм на страницах сайтов.

В этом примере разберём форму отправки заявки. Это типовая форма, которая содержит несколько текстовых полей для ввода. Не ограничивайтесь использованием только `type="text"`, используйте типы `tel`, `email` и так далее в зависимости от содержимого поля. Полный список возможных типов можно найти [в спецификации](https://html.spec.whatwg.org/multipage/input.html#attr-input-type-keywords).

**Замечание**

Для подобных блоков также можно использовать простейшие таблицы, в которых параметр связан лишь с одним значением. Подробнее об использовании таблиц — чуть ниже.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/sk1_add_06@1x.png" alt="Форма на странице"><figcaption><p>Форма на странице</p></figcaption></figure>

Вот так может выглядеть разметка этой формы:

```
…
<form action="#" method="post">
  <input type="text" placeholder="Имя" required>
  <input type="tel" placeholder="Телефон" required>
  <input type="email" placeholder="E-mail">
  <button type="submit">Отправить</button>
</form>
…
```

Атрибут `required` добавлен для полей, которые обязательны для ввода. Визуально на макете их отмечают символом `*`.

Другой типовой пример использования HTML-форм — это фильтры на странице каталога. В фильтрах, помимо текстовых полей для ввода, могут использоваться чекбоксы, радио-кнопки и другие. Поля могут быть сгруппированы с помощью тега `<fieldset>`.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/sk1_add_07@1x.png" alt="Фильтры на странице каталога"><figcaption><p>Фильтры на странице каталога</p></figcaption></figure>

Так может выглядеть разметка для фильтров в каталоге:

```
<form action="#" method="get">
  <fieldset>
    <legend>Цена за сутки, <span>₽</span></legend>
    <label>от<input type="text" value="100"></label>
    <label>до<input type="text" value="600"></label>
  </fieldset>
  <fieldset>
    <legend>Площадь</legend>
    <label><input type="checkbox" name="area" checked value="0.63">0,63 м2</label>
    <label><input type="checkbox" name="area" checked value="0.90">0,90 м2</label>
    <label><input type="checkbox" name="area" checked value="1.13">1,13 м2</label>
    <label><input type="checkbox" name="area" checked value="1.56">1,56 м2</label>
    <label><input type="checkbox" name="area" checked value="2.56">2,56 м2</label>
    <label><input type="checkbox" name="area" checked value="2.88">2,88 м2</label>
  </fieldset>
  <fieldset>
    <legend>Оснащение номера</legend>
    <label><input type="checkbox" name="equipment" checked value="empty">Пустой номер</label>
    <label><input type="checkbox" name="equipment" checked value="sofa">Лежак</label>
    <label><input type="checkbox" name="equipment" checked value="cat-tree">Когтеточка</label>
    <label><input type="checkbox" name="equipment" checked value="toy">Игровой-комплекс</label>
    <label><input type="checkbox" name="equipment" checked value="house">Домик</label>
  </fieldset>
  <button type="reset">Сбросить фильтр</button>
</form>
```

Для того, чтобы `<label>` соотносился с полем, которое он должен описывать, поле либо оборачивается в тег `<label>`, либо это делается с помощью атрибута `for` для лейбла и `id` — для поля. Эти способы равноценны, можно выбирать их в зависимости от удобства для разметки. Это связывает поле с описанием семантически, и сообщает об этом скринридерам.

```
<label>Дата заезда:
  <input type="text" value="24 апреля 2017">
</label>

<label for="tour-param-1day">Дата заезда:</label>
  <input type="text" value="24 апреля 2017" id="tour-param-1day">
```

Важно: `id` должен быть уникальным на странице, он не должен повторяться в других полях или лейблах. Поэтому зачастую он пишется с префиксом — названием формы, и смысловой частью — значением поля. Получается что-то вроде: `id="personalform-firstname"`. Такой `id` даёт полную информацию о содержании, и он точно будет уникальным, ведь в рамках одной формы поля не повторяются.

Бывают случаи, когда интерактивные элементы могут существовать на странице и без HTML-формы. Например, на макете ниже в шапке есть поле для поиска по контенту сайта. После окончания ввода предполагается, что запустится некий JavaScript, который выполнит задачу поиска. В этом случае встроенная возможность форм по отправке данных на веб-сервер подменяется инструкциями JavaScript. Но если следовать принципам прогрессивного улучшения, это поле для ввода нужно всё-таки обернуть формой, которая работает без JavaScript, JavaScript уже добавит дополнительную функциональность. В этом случае, какой подход выбрать, решать вам, оба варианта рабочие.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/sk1_add_08@1x.png" alt="Поле поиска по контенту сайта"><figcaption><p>Поле поиска по контенту сайта</p></figcaption></figure>

Разметка может выглядеть так:

```
<input type="search" placeholder="Поиск:">
```

Или вариант с прогрессивным улучшением:

```
<form action="#" method="POST">
  <input type="search" placeholder="Поиск:">
</form>
```

#### Размечаем цитаты <a href="#s45" id="s45"></a>

Один из типовых разделов сайта — блок с отзывами посетителей сайта, покупателями товаров/услуг. Для разметки отдельного отзыва в таком блоке может пригодиться тег `<blockquote>`. Следует помнить, что в тег оборачивается не только цитата, но и элемент с источником цитаты, а также дополнительная информация об источнике.

Семантическое значение цитаты — внешний контент, то есть `<q>` — это строчный элемент, содержащий материалы не уникальные, имеющие другой источник. А `<blockquote>`, соответственно, тег для выделенных, вынесенных в отдельную секцию цитат.

Цитата внутри текста может верстаться тегом `<q>` (сокращение от *quote*) и не выходить из абзаца. Такие цитаты могут быть выделены другим начертанием. До и после содержимого тега `<q>` браузер автоматически проставляет кавычки подходящего для языка документа вида.

```
<p>Вадим Макеев говорил, что <q>когда много лет назад придумали HTML, мир был совсем другим</q>, и это означает, что реалии мира влияют на язык разметки сильнее, чем кажется.</p>
```

Вместо `<q>` можно просто использовать принятые на вашем сайте кавычки, [спецификация](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-q-element) разрешает это. Использовать `<q>` для контента, не являющегося цитатой (для сарказма или переводных слов, выделяющихся кавычками) — не семантично.

Обособленные цитаты оборачиваются в тег `<blockquote>`: это не только текстовый элемент, но и элемент для разметки секций ([спецификация](https://html.spec.whatwg.org/#the-blockquote-element)). Это означает, что у цитаты могут быть свои заголовки, хедер и футер и текстовые элементы.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/skill_blockquote@1x.png" alt="Пример тега blockquote на макете"><figcaption><p>Пример тега blockquote на макете</p></figcaption></figure>

```
<blockquote>
  <cite>Оксана Тодоренко</cite>
  <p>19 лет</p>
  <p>У меня был печальный опыт занятий пилатесом, связанный с некомпетентностью инструктора, который проводил тренировки. Я занималась пилатесом 2 месяца, а потом забросила.</p>
</blockquote>
```

У цитат есть своя специфика вёрстки. Например, есть атрибут `cite`, который также может выступать как тег `<cite>`, оба применяются для указания источника (не только для источника-сайта, но и для автора высказывания, для названия произведения, ссылки на первоисточник). Атрибут `cite` нужен для соблюдения авторского права, визуально он не отображается:

```
<blockquote cite="https://aldous-huxley.net">Если бы двери восприятия были чисты, все предстало бы человеку таким, как оно есть – бесконечным.</blockquote>
```

#### Размечаем контактную информацию <a href="#s415" id="s415"></a>

Вернёмся в футер. Зачастую в футере появляется контактная информация: как связаться, куда прийти, куда написать. Это можно разметить параграфами — или специальным тегом `<address>`.

`<address>` — тег с очень узким значением. Это именно контактная информация. То есть в теге может быть ссылка на автора, по которой с автором можно связаться, актуальный адрес электронной почты или номер телефона. Почтовый адрес в этот тег можно обернуть только тогда, когда этот почтовый адрес — реальный метод связи.

`<address>` относится к непосредственному родительскому элементу, в который он вложен. То есть если у вас на странице несколько тегов `<article>`, в каждом из которых находится, допустим, отдельная услуга, и для покупки стоит позвонить по уникальному номеру, то каждый `<address>` должен быть дочерним для собственного `<article>`.

```
<article class="praise">
  <h1>Погладить по шёрстке</h1>
  ...
  <address><a href="mailto:goodman@email.com">goodman@email.com</a></address>
</article>
<article class="scold">
  <h1>Погладить против шёрстки</h1>
  ...
  <address><a href="mailto:badman@email.com">badman@email.com</a></address>
</article>
```

`<address>`, расположенный непосредственно в `<body>`, содержит контакты для всего сайта.

Обычно `<address>` располагают в `<footer>`, и это логично и привычно, и соответствует семантическому назначению футера.

```
<footer>
  <address>
    Свяжитесь с нами, ну пожалуйста! Купите хоть что-нибудь!
    <a href="mailto:sale@mail.com">Илья Продажник</a>.
  </address>
  <p><small>© 2020 Продам всё Inc.</small></p>
</footer>
```

#### Размечаем прогресс и измерения <a href="#s414" id="s414"></a>

Специфический тег для визуализации прогресса в исполнении задачи — `<progress>`. Имеет два основных атрибута, `value` — текущее значение, и `max` — максимально возможное значение. Если максимальное значение не задано, можно указывать текущее в виде десятичной дроби от 0.0 до 1.0.

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

```
<h2>Сделать всё очень круто</h2>
<p>Задача выполнена на: <progress max="100" value="10">10%</progress></p>
```

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/progress-01.png" alt="Пример отображения кода в браузере"><figcaption><p>Пример отображения кода в браузере</p></figcaption></figure>

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

`<meter>` — это как раз количества, измерения и расстояния, этот тег семантичен для тех шкал, которые не прогресс. Он не [поддерживается](https://caniuse.com/#feat=meter) в Internet Explorer, в IE вместо шкалы будет выведен текст. Например, в Internet Explorer из примера ниже будет выведено только «150ГБ из 736ГБ занято».

```
<meter value="150" max="736" title="150ГБ из 736ГБ занято">150ГБ из 736ГБ занято</meter>
```

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/progress-02.png" alt="Пример отображения кода в браузере"><figcaption><p>Пример отображения кода в браузере</p></figcaption></figure>

Вот атрибуты, которые применяются к этому тегу (кроме глобальных):

* `value` — текущее значение;
* `min` — нижняя граница диапазона;
* `max` — верхняя граница диапазона;
* `low` — считается низким значением (предельным);
* `high` — считается высоким значением (предельным);
* `optimum` — оптимальное значение.

Сложность — правильно их скомбинировать.

```
<meter min="0" max="100" high="70" value="80"></meter>
<!-- Как это читать: значение не может быть ниже нуля;
не может быть выше 100;
70 — это высокое значение;
текущее значение — 80, выше высокого -->

<meter value="100" max="100">Кипяток</meter>
```

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/methodology-step-4/progress-03.png" alt="Пример отображения кода в браузере"><figcaption><p>Пример отображения кода в браузере</p></figcaption></figure>
