Раньше, до обновления HTML 5, разработчикам приходилось совмещать табличную верстку с «дивным кодом». Нужен раздел контента на вашей домашней странице? Завернуть в div! Создание боковой панели? Используйте div! Компоновка в три колонки? Див, див, див!
Нет ничего функционально неправильного в написании HTML таким образом. Браузеры по-прежнему смогут отображать вашу разметку и отображать ваш контент для пользователей. Основная проблема с интенсивным использованием <div> тегов заключается в том, что им не хватает семантического значения. Написание семантического HTML придает смысл вашей разметке веб-браузерам и программам чтения с экрана, может помочь с SEO, упрощает отладку кода и многое другое.
Согласно W3C :
div Элемент вообще не имеет особого значения… Авторам настоятельно рекомендуется рассматривать этот div элемент как элемент крайней меры, когда никакой другой элемент не подходит. Использование более подходящих элементов вместо div элемента приводит к лучшей доступности для читателей и упрощению сопровождения для авторов.
Хорошо, так что же это за «более подходящие элементы», которые упоминает W3C? Когда HTML5 был выпущен в 2014 году, он представил несколько новых тегов, которые веб-разработчики могли использовать для улучшения семантического значения своей разметки.
Давайте рассмотрим несколько более семантических альтернатив <div>.
Тег <main>
<main> указывает браузерам и программам чтения с экрана, какая часть вашей разметки содержит основной раздел контента на данной странице. Это может помочь с доступом к командам клавиатуры, масштабированием в мобильных браузерах и многим другим. Его следует использовать только один раз на странице.
Тег <section>
<section> независимый блок — например, блок новостей, блок с контактами или просто абзац с заголовком. Так мы разделяем различные разделы сайта.
Так же нужно знать, что в каждой секции (<section>) должен присутствовать заголовок любого уровня: h1 - h6.
Тег <aside>
<aside> может не иметь никакого отношения к основной части сайта (<main>). Он предоставляет нам место под различные дополнения к порталу, например: боковое меню, поиск по сайту и т.д. Визуально блок, обёрнутый в <aside>, необязательно должен располагаться сбоку. Он может быть в любом месте макета. Но на одном структурном уровне с <main> и <article>.
Тег <article>
Элемент <article> можно использовать для частей контента, которые могут стоять сами по себе. Сообщения в блогах, газетные статьи, карточка пользователя и комментарии — вот некоторые возможные варианты использования <article>.
Тег <blockquote>
Элемент <blockquote> представляет собой контент, который цитируется из внешнего источника (человека, документа, газеты, тематического исследования и т. д.). Он часто сопровождается тегом <cite>, указывающим на источник цитаты. Для цитаты, которая скрывается в дебрях текста (внутристрочная) есть свой отдельный тег — <q>.
Тег <nav>
Как следует из названия, <nav> элементы представляют раздел навигации документа. Тег <nav> должен включать основные навигационные ссылки для данной страницы, приложения и т. д.
- <nav> — это один из ориентиров (landmark), которые скринридеры могут использовать для навигации по странице. То есть можно перейти прямо в блок навигации по сайту, это очень удобно.
- Спецификация рекомендует не увлекаться разметкой всех ссылок на странице с помощью <nav>, достаточно указать самые важные.
Тег <footer>
Элемент <footer> представляет собой раздел «подвал» сайта или раздела. На многих веб-сайтах этот <footer> будет содержать контактную информацию и информацию об авторских правах, краткую аннотацию «о нас», логотипы, ссылки социальных сетей и т. д.
- Нельзя вкладывать в <address>, <header> или другой <footer>.
- Контакты и информацию об авторе стоит поместить в контейнер <address>, а его добавить в <footer>.
Теперь, когда вы знаете о некоторых семантических тегах HTML 5, можно смело «рефачить» ваш код и стирать кучу ненужных <div> элементов!
Материалы, для статьи использованы с различных ресурсов, включая medium и doka.