Что такое семантика?

Семантика в HTML относится к использованию HTML-тегов, которые ясно и однозначно описывают их содержимое и роль в структуре веб-страницы.

Семантические теги помогают как разработчикам, так и браузерам и поисковым системам понять смысл и контекст контента на странице быстрее и точнее.

Семантических тегов множество, однако, самые используемые из них:

html
1<header> - заголовок секции или документа
2<nav> - навигационное меню
3<article> - независимая часть контента, например, статья, пост...
4<section> - определяет раздел конкретного документа, статьи, поста...
5<aside> - содержит контент, связанный с основным содержанием страницы, но не являющийся его частью
6<footer> - представляет нижний колонтитул секции или документа
7

Конечно же семантических тегов сильно больше, но рассматривать их все в этой статье я не буду.

Важнее сказать, что семантические теги делятся на 2 категории значимости:

• Первая категория, по сути, имеет те же свойства и вид, что обычный div. Их особенность заключается лишь в том, как эти теги будут обрабатываться парсерами и служат они в основном для SEO.
• Вторая категория — когда тег имеет дополнительные уникальные свойства и поведение, а, возможно, и внешний вид.

Давайте сразу на примере:

html
1<header> - по сути, тот же <div>, но просто парсится иначе
2

html
1<button> - тоже семантический тег
2

Однако <button>, помимо особой семантической значимости, этот тег также имеет и другие свойства:

• встроенные обработчики событий для взаимодействия с клавиатуры
• иной внешний вид
• верная HTML-роль по умолчанию

На самом деле, семантический тег — это всё, что не <div>. Только этот тег не имеет особого назначения и нужен лишь для группировки других тегов. Остальные же теги несут в себе какой-то дополнительный семантический смысл.