Используете div'ы везде, где есть возможность? Голубчик, да у вас острый divотит! Но не отчаивайтесь, Семантика творит чудеса.

Анамнез: чрезмерное использование div'ов

Все мы нежно любим теги div. Десятилетиями они спасали нашу верстку, несли на своих мощных плечах и структурные, и стилевые функции. Загляните в код какого-нибудь случайного сайта – с большой долей вероятности вы увидите нечто такое:

<div class="container" id="header">
  <div class="header header-main">Super duper best blog ever</div>
  <div class="site-navigation">
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/archive">Archive</a>
  </div>
</div>
<div class="container" id="main">
  <div class="article-header-level-1">
    Why you should buy more cheeses than you currently do
  </div>
  <div class="article-content">
    <div class="article-section">
      <div class="article-header-level-2">
        Part 1: Variety is spicy
      </div>
      <!-- cheesy content -->
    </div>
    <div class="article-section">
      <div class="article-header-level-2">
        Part 2: Cows are great
      </div>
      <!-- more cheesy content -->
    </div>
  </div>
</div>
<div class="container" id="footer">
  Contact us!
  <div class="contact-info">
    <p class="email">
      <a href="mailto:us@example.com">us@example.com</a>
    </p>
    <div class="street-address">
      <p>123 Main St., Suite 404</p>
      <p>Yourtown, AK, 12345</p>
      <p>United States of America</p>
    </div>
  </div>
</div>

Много div'ов, очень много div'ов!

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

Не позволяйте болезни обмануть вас! Не зная того, вы уже подвергаетесь разрушительному воздействию divотита:

• В первую очередь страдает доступность вашего сайта. Многие инструменты a11y очень умны. Они изо всех сил стараются правильно анализировать структуру страницы в поисках подсказок для пользователей. Но div'ы, которых здесь так много, не несут для этих трудяг никакой полезной информации.
  Даже самые умные скринридеры недостаточно умны (и хорошо, ведь мы еще не готовы к AGI революции). Они не умеют анализировать атрибуты class и id и угадывать, что имел в виду разработчик, называя блок именем article-header-level-2.
• Второй удар divотит наносит по читаемости. Чтобы разобрать такой код, нужно тщательно отслеживать имена классов. Спустя несколько уровней вложенности это становится не таким простым делом. Чтобы не заблудиться, приходится полагаться на умный редактор, который умеет выделять разные уровни разным цветом и подсвечивать парные дескрипторы.
• Помните, что divотит очень заразен! Он быстро распространяется по проекту и захватывает всех членов команды. Начиная работать с зараженным проектом, вы вынуждены тратить много сил на изучение разномастных стандартов и соглашений разметки.

Что за ужасная болезнь! – вероятно, подумали вы сейчас. Неужели от нее нет лекарства? Как было бы здорово иметь стандартизированный способ разметки веб-документов. Тогда все стало бы гораздо проще. Если бы только существовал такой чудесный стандарт...

Лекарство: семантика HTML5

HTML5 – штука не новая. Причем уже давно не новая. Первый рабочий черновик был выпущен для обсуждения в январе 2008 года (11 лет назад!), а в полноценную рекомендацию W3C он превратился в октябре 2014 года (4 с половиной года назад). Так что хватит считать его свеженьким неосвоенным новшеством.

Одно из главных нововведений HTML5 – стандартизированный набор семантических элементов.

Семантика занимается смысловым значением единиц языка. Следовательно семантические элементы должны подчеркивать смысл, заложенный в верстку, а не только формировать физическую структуру страницы. Это вам не div'ы без определенной жизненной позиции.

Настоятельно рекомендуется рассматривать использование элемента div в самую последнюю очередь, когда не подходит никакой другой элемент. Использование вместо div более подходящих семантических элементов ведет к росту доступности контента для читателей и более удобной поддержке кода.
Спецификация HTML5

Правильно оформленная семантика сайта открывает дорогу роботам, скринридерам и излечивает divотит на корню.

Правила приема

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

Семантика структуры

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

• верхний колонтитул;
• главный блок с контентом;
• нижний колонтитул.

<div class="container" id="header">...</div>
<div class="container" id="main">
  ...
  <div class="article-section">...</div>
  ...
</div>
<div class="container" id="footer">...</div

Эта разметка привычна, удобна и читаема. Ее легко стилизовать и шаблонизировать (в PHP или Rails/ERB):

<?php include 'header.php'; ?>
<div id="main">...</div>
<?php include 'header.php'; ?>

Это действительно полезный шаблон, поэтому хорошие люди из WHATWG и W3C его стандартизировали, добавив в HTML5 четыре семантических тега с очевидным смыслом:

• header;
• main;
• footer;
• section.

Колонтитулы: header и footer

Близнецы-братья header и footer очень похожи и следуют одному и тому же набору правил поведения и размещения в документе.

Header и footer логически привязываются к ближайшему корню секционирования (sectioning root) или контенту секционирования (sectioning content). Это, например, body, blockquote, section, td, aside и ряд других элементов, образующих отдельные самостоятельные "разделы" с четким началом и окончанием.

Семантика HTML5 отводит тегам header и footer роль колонтитулов, то есть блоков, в которых группируется вспомогательная информация раздела. Очевидно, что в одном разделе (корне секционирования) не может быть больше одного верхнего и одного нижнего колонтитула.

Не зацикливайтесь только на главных колонтитулах страницы (шапке и футере сайта). Header и footer отлично работают в статьях, формах, карточках товаров и любых других осмысленных разделах. Например, можно вынести в footer блока статьи информацию о ее авторе. Это логично и удобно для людей, использующих инструменты доступности.

Зачастую тег header содержит заголовок своего контекста секционирования. Это не обязательное условие, но хорошая практика, позволяющая поддерживать согласованную структуру страницы.

Собственно контент: main

Элемент main содержит контент, уникальный для конкретного документа. В нем не должно быть контента, повторяющегося на разных страницах, например, ссылок навигации по сайту, информации об авторских правах, логотипов, баннеров и поисковых форм (если основным контентом документа не является поисковая форма).
Спецификация HTML5

Main – это особенный элемент. Внутри него нужно размещать тот контент, ради которого пользователь пришел на конкретную страницу (а не на сайт в целом). А логотипы, форма поиска, навигация и прочая повторяющаяся информация должны отправиться в колонтитулы страницы (header, footer).

В документе не должно быть более одного видимого элемента main. Если на странице находится несколько таких элементов, остальные должны быть скрыты с помощью атрибута hidden.
Спецификация HTML5

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

Семантика HTML5 допускает наличие нескольких main блоков при условии, что все, кроме одного, скрыты. Это позволяет использовать неплохой шаблон для предварительной загрузки представлений.

• Определите контент, который, вероятнее всего, будет просмотрен следующим (например, следующая статья в серии).
• Создайте новый элемент main с атрибутом hidden и вставьте в него этот контент.
• В нужный момент просто поменяйте текущий и новый блоки, переключив их атрибуты.

Наше лечение начинает действовать! Смотрите, болезнь потихоньку отступает:

<header>
  <h1>Super duper best blog ever</h1>
  ...
</header>
<main>
  <h2>Why you should buy more cheeses than you currently do</h2>
  ...
</main>
<footer>
  Contact us!
  <div class="contact-info">this.is.us@example.com</div>
</footer>

Части контента: section

Как правило, вы не выкладываете контент сплошной простыней текста – правда же?

Для удобства чтения вы разбиваете его на разделы – секции. Раньше вы оборачивали такие секции в div'ы, но теперь, когда дурное влияние divотита ослабло, можно себе позволить кое-что получше.

Самый простой семантический тег – section – все же достаточно сложен, чтобы логически выделить новый "контекст секционирования". Секция – вполне сформировавшийся элемент, который при необходимости может себе позволить собственные header и footer.

Тег section НЕ является универсальным контейнером. Если элемент необходим только для стилизации или удобства взаимодействия из JavaScript, рекомендуется использовать div. Общее правило: тег section нужно использовать для тех элементов, содержимое которых может быть указано в плане (outline) целого документа.
Спецификация HTML5

Семантика контента

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

Самостоятельный контент: article

Тег article – это полностью автономная область содержимого, нечто такое, что можно просто вырвать из вашей страницы без потери смысла. Это может быть статья, сообщение в блоге, публикация в социальной сети.

Спецификация HTML5 рекомендует каждому элементу article добавлять заголовок. Также внутри этого блока могут быть собственные header и footer. В article можно добавлять и section. В общем, это своего рода документ в документе.

Сделаем еще один шаг к выздоровлению: заменим элемент с классом article-* из первичного анамнеза на настоящий блок article с осмысленной структурой.

<article>
  <header>
    <h1>Why you should buy more cheeses than you currently do</h1>
  </header>
  <section>
    <header>
      <h2>Part 1: Variety is spicy</h2>
    </header>
    <!-- cheesy content -->
  </section>
  <section>
    <header>
      <h2>Part 2: Cows are great</h2>
    </header>
    <!-- more cheesy content -->
  </section>
</article>

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

Навигация: nav

nav – один из самых известных и широко используемых HTML5-элементов. Его семантика – главный блок навигации. В nav следует размещать группу ссылок, помогающих пользователю ориентироваться по всему сайту (карта сайта, ссылки на основные разделы) или по текущей странице (оглавление).

Блок .site-navigation из анамнеза буквально требует, чтобы его заменили на осмысленный nav.

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/archive">Archive</a>
</nav>

Структура верстки вообще не изменилась, зато теперь и людям, и роботам сразу понятно, что это за фрагмент

Контактная информация: address

Добьем болезнь последней витаминкой – тегом address. Он предназначен для выделения контактной информации: почтового адреса (реального или электронного), номеров телефона. Обычно это бизнес-контакты, например, телефон службы поддержки или адрес торговой точки.

Все это вспомогательная информация, поэтому address часто размещается в нижнем колонтитуле footer.

HTML5 не регламентирует правила разметки содержимого в элементе address. Такой уровень детализации обеспечивается другими спецификациями. Обычно применяется многословный, но удобный, RDFa и спецификация W3C, которая использует атрибуты тегов для маркировки данных.

Вот так может выглядеть нижний колонтитул из примера после семантической обработки:

<footer>
  <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
    <h2>Contact us!</h2>
    <address property="email">
      <a href="mailto:us@example.com">us@example.com</a>
    </address>
    <address property="address" typeof="PostalAddress">
      <p property="streetAddress">123 Main St., Suite 404</p>
      <p>
        <span property="addressLocality">Yourtown</span>,
        <span property="addressRegion">AK</span>,
        <span property="postalCode">12345</span>
      </p>
      <p property="addressCountry">United States of America</p>
    </address>
  </section>
</footer>

Если вам интересно узнать больше о формате RDFa, загляните сюда:

• Праймер от W3C
• Описание на schema.org
• Схема LocalBusiness

Cчастливое излечение

После курса интенсивной терапии наш больной выглядит гораздо лучше:

<header>
  <h1>Super duper best blog ever</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/archive">Archive</a>
  </nav>
</header>
<main>
  <article>
    <header>
      <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
      <header>
        <h2>Part 1: Variety is spicy</h2>
      </header>
      <!-- cheesy content -->
    </section>
    <section>
      <header>
        <h2>Part 2: Cows are great</h2>
      </header>
      <!-- more cheesy content -->
    </section>
  </article>
</main>
<footer>
  <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
    <h2>Contact us!</h2>
    <address property="email">
      <a href="mailto:us@example.com">us@example.com</a>
    </address>
    <address property="address" typeof="PostalAddress">
      <p property="streetAddress">123 Main St., Suite 404</p>
      <p>
        <span property="addressLocality">Yourtown</span>,
        <span property="addressRegion">AK</span>,
        <span property="postalCode">12345</span>
      </p>
      <p property="addressCountry">United States of America</p>
    </address>
  </section>
</footer>

Он стал красивее, удобнее и доступнее. Семантика творит чудеса!

Мы разобрали только самые крупные и часто используемые HTML5-элементы. В аптечке еще много тегов, помогающих выделять и структурировать разнообразный контент. Если вам интересно, держите небольшой список:

• aside
• blockquote
• cite
• code
• data
• del
• figure
• ins
• time
• var

Принимать регулярно во время разработки.

Спецификация HTML5 – одна из самых подробных и понятных спецификаций на свете. А еще это замечательное медицинское руководство против самых страшных болезней разработчика.

А вы чем болеете?

Оригинал: Stop using so many divs! An intro to semantic HTML

У нас еще много интересных статей:

• Frontend-спринт: 100 быстрых советов по HTML, CSS и JavaScript
• Супершпаргалка по верстке для новичков: все основные HTML-теги
• Полное руководство по элементам HTML-формы

Признавайтесь, вы тоже злоупотребляете div? :)