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» можно увидеть простейшую связь вида «параметр-значение» в карточке товара.

table в 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 на макете

<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:[e-mail]">[e-mail]</a></address>
</article>
<article class="scold">
  <h1>Погладить против шёрстки</h1>
  ...
  <address><a href="mailto:[e-mail]">[e-mail]</a></address>
</article>

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

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

<footer>
  <address>
    Свяжитесь с нами, ну пожалуйста! Купите хоть что-нибудь!
    <a href="mailto:[e-mail]">Илья Продажник</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>

Пример отображения кода в браузере