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

При создании 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


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

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