HTML: Семантические элементы

При создании HTML-документа часто используются теги div и span. Они позволяют обернуть контент в блочный или строчный элемент разметки. Это помогает создавать независимые блоки с разным оформлением, но для браузера и поисковых систем эти блоки не являются семантическими, т.е. они не говорят напрямую о том, что в них лежит. Многие из HTML-тегов изначально обладают семантикой, например, p — параграф, table — таблица, ol, ul — списки. Но этими тегами не получится разметить «шапку», «подвал», «боковую панель» сайта.

Раньше для этого использовали классы или идентификаторы, например так:

<div id="header">
  // Здесь будет шапка сайта. Обычно в ней располагается логотип, контактная информация, меню.
</div>

<div id="main">
  // Уникальный контент сайта
</div>

<div id="footer">
  // Подвал сайта. Обычно здесь находится контактная информация, дополнительное меню, юридическая информация о компании
</div>

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

Основными семантическими тегами стали:

• article
• aside
• footer
• header
• main
• nav
• section

Большинство элементов интуитивно понятны и их можно сразу использовать в своих документах. Теперь пример выше можно переделать с использованием новых элементов HTML:

<header>
  // Здесь будет шапка сайта. Обычно в ней располагается логотип, контактная информация, меню.
</header>

<main>
  // Уникальный контент сайта
</main>

<footer>
  // Подвал сайта. Обычно здесь находится контактная информация, дополнительное меню, юридическая информация о компании
</footer>

Задание

Создайте разметку «шапки» и «подвала», используя новые семантические элементы HTML5