Семантические теги
Основная цель любой HTML-вёрстки — передача смысла блоков.
Для решения вопросов доступности Web для пользователей с ограниченными возможностями, а также для лучшего считывания контента сайта ботами которые его индексируют в HTML5 были добавлены семантические теги.
Шапка сайта header
Это шапка сайта, она обычно содержит лого, основное меню и контактную информацию, но контент может разниться в зависимости от дизайна сайта. Создается с помощью парного тега header. Работе тег header как просто div и является блочным элементом.
<header> </header>Навигация nav
Обычно меню сайта оборачиваются тегом nav, этот тег обозначает навигационную область и нужен для того, чтобы выделять меню из основного контента. Вы можете оборачивать как одно меню, например главное меню в теге header, или все меню которые есть на сайте.
<nav> </nav>Уникальный контент main
Самое главное на странице, это ее контент, в странице без уникального контента смысла мало, вернее его вовсе нет. Для разметки такого контента мы используем тег main. Важно понимать что тег main должен оборачивать только уникальный контент, боковые меню, header, footer и все что повторяется на остальных страницах в него входить не должно. Тег main можно использовать только 1 раз на странице.
<main></main>Секции section, article, aside
Зависимые секции
section - является зависимой от контекста контента секцией сайта, на секции удобно разделять контент и манипулировать им (перемещать местами и тд.). section - это самостоятельная логическая единица текущего контента.
<section></section>Независимые секции
article - является независимой секцией, контент внутри секции article должен быть логично законченный, это их с section главное отличие. Из-за того что article оборачивает логически законченный контент, ее можно переносить и вставлять на любой странице сайта не боясь за его семантику.
<article></article>Дополняющие секции
aside - такие секции в основном встречаются в качестве боковых панелей на сайте, обычно там содержаться дополнительные меню, баннера и подобного рода вещи.
<aside></aside>footer
footer - определяет подвал секционного элемента, тег footer может присутствовать как в секционном элементе (например: article), так и внутри тега body определяя тем самым подвал всей страницы. Обычно в теге footer размещается контактная информация, адрес, меню и подобный контент.
<footer></footer>В данном материале рассмотрены только основные семантические теги, но их существует достаточно большое количество, остальные семантические теги используются на много реже, поэтому и не были добавлены в этот материал.
P.S. Больше уроков у меня на канале
