Если мы заглянем в код веб-страницы, то без наверняка увидим большое количество контейнеров div.
DIV — это традиционный и самый популярный блочный тег
Кроме «дивов» есть и другие блоки для структурирования.
В стандарте HTML5 есть целое семейство контейнеров — семантических тегов. Визуально они не отличаются от div, но обладают скрытыми преимуществами. Если применять семантические теги:
- поисковым машинам Яндекс и Google будет проще прочитать и понять содержимое сайта,
- страница станет доступной для слабовидящих,
- код будет понятнее другим разработчикам.
Семантические теги размечают страницу с учётом смысла контента. По ним браузер отличает контент, «шапку» и «подвал» (колонтитулы), навигацию.
Самые распространённые семантические контейнеры:
- <header></header> — шапка сайта;
- <footer></footer> — подвал;
- <nav></nav> — блок меню (от англ. navigation, навигация);
- <main></main> — основное содержимое страницы; на многостраничных сайтах этот контейнер содержит всё, чем данная страница отличается от остальных. Имя тега по-английски означает «главный».
- <section></section> — организует несколько блоков в близкие по смыслу секции.
Контейнеры описывают, из каких основных блоков состоит страница.
На странице могут быть использованы только контейнеры div (слева), но тогда нельзя понять, для чего предназначен тот или иной блок. Благодаря использованию сематических тегов (справа), сразу понятно, где шапка сайта (header), а где подвал (footer)
На картинке выше есть еще два тега, кроме перечисленных выше:
- <aside> — представляет собой часть документа, чьё содержимое только косвенно связано с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток. По расположению этого блока нетрудной догадаться, что это может быть сайдбар (sidebar) — боковая панель сайта.
- <article> — представляет собой самостоятельную часть документа, приложения, приложения или сайта, предназначенную для независимого распространения или использования. Этот элемент может найти статью в журнале или газете, запись в блоге или какой-либо другой самостоятельный фрагмент файла.
Блок со статьей будет найти нетрудно благодаря контейнеру <article></article>
Семантических тегов очень много. К ним относятся <table>, теги нумерованных и маркированных списков, <blockquote>. Даже не знаток английского языка поймет, что <table> — это таблица, а <blockquote> — цитата.
Вывод
Следует использовать семантические теги, так как это упрощает жизнь не только живым людям, но и поисковикам.
После того как мы заменим div на footer, очень просто будет отыскать подвал страницы
Стать веб-разработчиком вы сможете пройдя курс Яндекс.Практикум.