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

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

· Получилось найти самый подходящий смысловой тег — использовать его.

· Для потоковых контейнеров — <div>.

· Для мелких фразовых элементов (слово или фраза) — <span>.

Размечаем списки

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

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

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

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

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

Пример списков на макете

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

Пример не списков на макете

Ещё один вид списков, которые могут встретиться на странице сайта — это <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>

Размечаем таблицы

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

Таблицы

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

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

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

Тег <table> в «DEVICE»

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

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

Выдача Туту.ру по запросу «расписание сапсана»

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

Вёрстка блока с расписанием с помощью таблицы

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