1. 7. 5. Шаг 4. Размечаем мелкие элементы в смысловых разделах
Определить, какие теги использовать, можно методом исключения:
Получилось найти самый подходящий смысловой тег — использовать его.
Для потоковых контейнеров —
<div>
.Для мелких фразовых элементов (слово или фраза) —
<span>
.
Размечаем списки
На этом этапе разберём, в каких случаях используются теги <ul>
, <ol>
и <dl>
.
Несколько элементов, которые выполняют одну функцию и находятся друг с другом в одном отношении, размечают списком. Списки объединяют однородные и равноправные элементы. Если порядок элементов в списке неважен, для разметки используется тег <ul>
, а для списков, где от перемены мест элементов списка меняется смысл, — <ol>
.
Ссылки в навигации по сайту, перечень услуг, предоставляемых на сайте, — все эти элементы можно объединять в списки, поскольку они однотипные.
Корзину пользователя можно тоже считать списком, который включает всего один элемент.
Списки на макете:

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

<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>
в типичной карточке товара.

Технические данные о модели перфоратора можно представить как набор пар: параметр и значение. И использовать в этом случае теги <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
, ничего не сломается.

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

Основное назначение таблиц — описывать связанные данные. Когда один параметр влияет на остальные параметры, которые с ним связаны. Например, телефонные тарифы. К тарифу привязаны поля: «количество секунд», «количество мегабайт», «стоимость секунды», «стоимость мегабайта». Если меняется тариф, меняются все четыре параметра после него. Расписания поездов, уроков, сеансов фильмов, тарифы сотовых операторов, ЖКХ и так далее можно и нужно верстать таблицами. Всё это примеры многомерных связанных данных, когда друг с другом связаны три и более параметров.
Простой вариант связанных данных — двумерный, это связь вида «параметр-значение». В этом случае друг с другом связаны только два поля. Такие данные можно разметить с помощью таблицы и с помощью тега <dl>
(списка определений). Для многомерной связи данных подходят только таблицы.
На макете интернет-магазина «DEVICE» можно увидеть простейшую связь вида «параметр-значение» в карточке товара.

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

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

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

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

Стоит помнить, что использование <br>
допустимо точечно в небольших информационных и промо-текстах, если так требуется в макете.
Но в то же время недопустимо использовать тег <br>
для разделения абзацев вместо тега <p>
. Также его нельзя использовать в крупных текстовых массивах для подгонки переносов текста «как в макете». Ошибкой будет проставить теги <br>
в конце каждой строки, чтобы текст переносился один в один как на макете. Во всех этих случаях вёрстка становится «негибкой». Перестройкой текста с добавленными принудительными переносами становится неудобно управлять. Использование <br>
довольно чётко регламентировано в спецификации.
Тег <p>
удобно использовать как контейнер для мелких фразовых элементов. Простой пример — форма поиска отелей. Типовая задача разметки форм, в которой нужно сгруппировать подпись — <label>
и само поле для ввода — <input>
. Теги <label>
и <input>
— два фразовых элемента, которые формируют отдельную структурную сущность. Для группировки этих элементов можно использовать тег <p>
.

<p>
<label>Дата заезда:</label>
<input type="text" value="24 апреля 2017">
</p>
Размечаем формы
Элемент HTML-формы — это раздел документа, включающий поля и интерактивные элементы управления, которые позволяют пользователю отправлять информацию на веб-сервер. Чтобы добавить форму на страницу, нужно использовать парный тег <form>
, внутри которого размещаются поля формы. В частном случае — это может быть одно поле.
У тега <form>
есть два важных атрибута:
action
задаёт адрес (URL
) отправки формы;method
задаёт метод отправки формы.
Рассмотрим типовые варианты форм на страницах сайтов.
В этом примере разберём форму отправки заявки. Это типовая форма, которая содержит несколько текстовых полей для ввода. Не ограничивайтесь использованием только type="text"
, используйте типы tel
, email
и так далее в зависимости от содержимого поля. Полный список возможных типов можно найти в спецификации.
Замечание
Для подобных блоков также можно использовать простейшие таблицы, в которых параметр связан лишь с одним значением. Подробнее об использовании таблиц — чуть ниже.

Вот так может выглядеть разметка этой формы:
…
<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>
.

Так может выглядеть разметка для фильтров в каталоге:
<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 уже добавит дополнительную функциональность. В этом случае, какой подход выбрать, решать вам, оба варианта рабочие.

Разметка может выглядеть так:
<input type="search" placeholder="Поиск:">
Или вариант с прогрессивным улучшением:
<form action="#" method="POST">
<input type="search" placeholder="Поиск:">
</form>
Размечаем цитаты
Один из типовых разделов сайта — блок с отзывами посетителей сайта, покупателями товаров/услуг. Для разметки отдельного отзыва в таком блоке может пригодиться тег <blockquote>
. Следует помнить, что в тег оборачивается не только цитата, но и элемент с источником цитаты, а также дополнительная информация об источнике.
Семантическое значение цитаты — внешний контент, то есть <q>
— это строчный элемент, содержащий материалы не уникальные, имеющие другой источник. А <blockquote>
, соответственно, тег для выделенных, вынесенных в отдельную секцию цитат.
Цитата внутри текста может верстаться тегом <q>
(сокращение от quote) и не выходить из абзаца. Такие цитаты могут быть выделены другим начертанием. До и после содержимого тега <q>
браузер автоматически проставляет кавычки подходящего для языка документа вида.
<p>Вадим Макеев говорил, что <q>когда много лет назад придумали HTML, мир был совсем другим</q>, и это означает, что реалии мира влияют на язык разметки сильнее, чем кажется.</p>
Вместо <q>
можно просто использовать принятые на вашем сайте кавычки, спецификация разрешает это. Использовать <q>
для контента, не являющегося цитатой (для сарказма или переводных слов, выделяющихся кавычками) — не семантично.
Обособленные цитаты оборачиваются в тег <blockquote>
: это не только текстовый элемент, но и элемент для разметки секций (спецификация). Это означает, что у цитаты могут быть свои заголовки, хедер и футер и текстовые элементы.

<blockquote>
<cite>Оксана Тодоренко</cite>
<p>19 лет</p>
<p>У меня был печальный опыт занятий пилатесом, связанный с некомпетентностью инструктора, который проводил тренировки. Я занималась пилатесом 2 месяца, а потом забросила.</p>
</blockquote>
У цитат есть своя специфика вёрстки. Например, есть атрибут cite
, который также может выступать как тег <cite>
, оба применяются для указания источника (не только для источника-сайта, но и для автора высказывания, для названия произведения, ссылки на первоисточник). Атрибут cite
нужен для соблюдения авторского права, визуально он не отображается:
<blockquote cite="https://aldous-huxley.net">Если бы двери восприятия были чисты, все предстало бы человеку таким, как оно есть – бесконечным.</blockquote>
Размечаем контактную информацию
Вернёмся в футер. Зачастую в футере появляется контактная информация: как связаться, куда прийти, куда написать. Это можно разметить параграфами — или специальным тегом <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>
Размечаем прогресс и измерения
Специфический тег для визуализации прогресса в исполнении задачи — <progress>
. Имеет два основных атрибута, value
— текущее значение, и max
— максимально возможное значение. Если максимальное значение не задано, можно указывать текущее в виде десятичной дроби от 0.0 до 1.0.
Если не указать ни одного из значений, по умолчанию полоска рейтинга будет бегать от одного края к другому, показывая, что система ожидает данных.
<h2>Сделать всё очень круто</h2>
<p>Задача выполнена на: <progress max="100" value="10">10%</progress></p>

Этот тег не следует использовать для отображения измерений, количеств и так далее, это тег исключительно для прогресса в исполнении задач. Размер и оставшееся место, километраж, места, лимиты и количества несемантично описывать тегом <progress>
, для этого есть тег <meter>
.
<meter>
— это как раз количества, измерения и расстояния, этот тег семантичен для тех шкал, которые не прогресс. Он не поддерживается в Internet Explorer, в IE вместо шкалы будет выведен текст. Например, в Internet Explorer из примера ниже будет выведено только «150ГБ из 736ГБ занято».
<meter value="150" max="736" title="150ГБ из 736ГБ занято">150ГБ из 736ГБ занято</meter>

Вот атрибуты, которые применяются к этому тегу (кроме глобальных):
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>

Last updated