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