DevGang
Авторизоваться

Семантические теги

Основная цель любой 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. Больше уроков у меня на канале

Источник:

#JavaScript #CSS #HTML
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Vladimir Shaitan - Видео блог о frontend разработке и не только

Посмотреть