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