Диагноз: divoтит!

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

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

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

HTML5 – штука не новая. Причем уже давно не новая.
В документе не должно быть более одного видимого элемента main. Если на странице находится несколько таких элементов, остальные должны быть скрыты с помощью атрибута hidden.
Спецификация HTML5
В отличие от колонтитулов, которые могут находиться в любом самостоятельном блоке, main на странице должен быть только один. Действительно, нелогично предъявлять пользователю сразу два «самых важных» контента.
Семантика HTML5 допускает наличие нескольких main блоков при условии, что все, кроме одного, скрыты. Это позволяет использовать неплохой шаблон для предварительной загрузки представлений.
Определите контент, который, вероятнее всего, будет просмотрен следующим (например, следующая статья в серии).
Создайте новый элемент main с атрибутом hidden и вставьте в него этот контент.
В нужный момент просто поменяйте текущий и новый блоки, переключив их атрибуты.

Части контента: section
Как правило, вы не выкладываете контент сплошной простыней текста – правда же?
Для удобства чтения вы разбиваете его на разделы – секции. Раньше вы оборачивали такие секции в div’ы, но теперь, когда дурное влияние divотита ослабло, можно себе позволить кое-что получше.
Самый простой семантический тег – section– все же достаточно сложен, чтобы логически выделить новый «контекст секционирования». Секция – вполне сформировавшийся элемент, который при необходимости может себе позволить собственные header и footer.
Тег section НЕ является универсальным контейнером. Если элемент необходим только для стилизации или удобства взаимодействия из JavaScript, рекомендуется использовать div. Общее правило: тег section нужно использовать для тех элементов, содержимое которых может быть указано в плане (outline) целого документа.
Спецификация HTML5
Семантика контента
Глобальный план для страницы уже готов, пора заполнить подготовленные семантические контейнеры контентом.
Самостоятельный контент: article

Тег article – это полностью автономная область содержимого, нечто такое, что можно просто вырвать из вашей страницы без потери смысла. Это может быть статья, сообщение в блоге, публикация в социальной сети.
Спецификация HTML5 рекомендует каждому элементу article добавлять заголовок. Также внутри этого блока могут быть собственные header и footer. В article можно добавлять и section. В общем, это своего рода документ в документе.
Сделаем еще один шаг к выздоровлению: заменим элемент с классом article-* из первичного анамнеза на настоящий блок article с осмысленной структурой.Сделаем еще один шаг к выздоровлению: заменим элемент с классом article-* из первичного анамнеза на настоящий блок article с осмысленной структурой.
Эту разметку проще читать и поддерживать, к тому же она намного удобнее для роботов и вспомогательных технологий.

Навигация: nav
nav – один из самых известных и широко используемых HTML5-элементов. Его семантика – главный блок навигации. В nav следует размещать группу ссылок, помогающих пользователю ориентироваться по всему сайту (карта сайта, ссылки на основные разделы) или по текущей странице (оглавление).
Блок .site-navigation из анамнеза буквально требует, чтобы его заменили на осмысленный nav.
Структура верстки вообще не изменилась, зато теперь и людям, и роботам сразу понятно, что это за фрагмент
Контактная информация: address
Добьем болезнь последней витаминкой – тегом address. Он предназначен для выделения контактной информации: почтового адреса (реального или электронного), номеров телефона. Обычно это бизнес-контакты, например, телефон службы поддержки или адрес торговой точки.
Все это вспомогательная информация, поэтому address часто размещается в нижнем колонтитуле footer.
HTML5 не регламентирует правила разметки содержимого в элементе address. Такой уровень детализации обеспечивается другими спецификациями. Обычно применяется многословный, но удобный, RDFa и спецификация W3C, которая использует атрибуты тегов для маркировки данных.

Семантика творит чудеса!
Мы разобрали только самые крупные и часто используемые HTML5-элементы. В аптечке еще много тегов, помогающих выделять и структурировать разнообразный контент. Если вам интересно, держите небольшой список:
aside
blockquote
cite
code
data
del
figure
ins
time
var

Принимать регулярно во время разработки.
Спецификация HTML5 – одна из самых подробных и понятных спецификаций на свете. А еще это замечательное медицинское руководство против самых страшных болезней разработчика.
А вы чем болеете?
Оригинал: Stop using so many divs! An intro to semantic HTML