Как правильно использовать семантическую верстку, теги

Раньше люди не задумывались о том, как размечать страницу для роботов google и yandex. Верстали таблицами table, div, span и т.д. Но алгоритмы меняются и усложняются. Поэтому был придуман HTML5.

Семантическая верстка — это логическое содержание контента (документа) для роботов.

Так видит наш документ поисковой робот. Чтобы ему помочь понять на что обратить внимание в вашем документе, необходимо делать семантическую верстку на каждой страницы. Это будет плюсом в продвижение сайта. Но не забываем, что существует другие показатели, алгоритмы для продвижения.

Важно понимать
как вы разметите страницу, так и будет поисковый робот читать вашу страницу. Поэтому семантическую верстку должны знать разработки и те кто оформляет статьи, страницы.

Главные семантические теги

Main

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

Header и Footer

Header — Определяет верхний колонтитул документа.
Использовать можно много раз. Обычно мы привыкли ставить header один раз, но это не так.
Ошибка думать, что header используется только для навигации, логотипа.

Первый header
Второй header

Footer — Определяет нижний колонтитул документа.
Использовать можно много раз на странице

Чем отличается ?
header — содержание которое прямо относится к документу, а footer не относится, например копирайтинг или карта сайта.

Nav

Определяет навигационные ссылки.
Где ставить тег nav: в навигации, хлебных крошках, футоре, содержание, sidebar где есть ссылки навигации.
Ошибка думать, что тег nav используется только для навигационного меню

Section

Раздел документа, который имеет прямое значение к нему, далее мы разберем на примере.
Желательно иметь заголовок. Один section = одному h

Article

Сущность, значение которую можно вытащить из документа и смысл не потеряется.
Например: описание другой темы в статье

Aside

Сущность, которая косвенно относится к контенту. Поисковый робот, как бы обходит и придает меньшее значение этому контенту заключенный в тег aside. Например у вашей страницы есть, реклама. Если мы заключим блок с рекламой в тег aside, то робот будет понимать, что не стоит относить это к документу вместе c основным контентом. Тем самым мы не путаем ПС.
Что заключать в тег aside: сайд бар, рекламные блоки и т.д

Address

Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.

h1-h6

Заголовок документа. h1 — h6 стилизуется под человека, чтобы было красиво и понятно. Для робота скорее всего не имеет значения h1 — h6.
Почему для робота не имеет веса h1 — h6 ? Об этом можно узнать у ведущих специалистов. Но точно не подтверждено.

Strong и b, i и em

Не путайте теги. Тег strong придает важность слову, а тег b просто выделение. Также и курсив i и em

Blockquote

Определяет раздел, который цитируется из другого источника.
Частые ошибки: использования тега в других целях

Самое главное вложенность. Практическое применение семантической верстки

Главное понять смысл вложенности в этом и заключается смысл семантической верстки. По началу будет не очень понятно.

Разберем простой пример

Для удобства вытащите этот код в редактор и внимательно прочитайте

Еще проще