---
sidebar_position: 3
---

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

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

Основные семантические теги

1. `<header>`
   - Используется для шапки сайта или раздела.
   - Обычно содержит логотип, навигацию или заголовок.
2. `<nav>`
   - Предназначен для навигационных ссылок.
   - Может использоваться в `<header>`, `<footer>` или самостоятельно.
3. `<main>`
   - Содержит основное содержимое страницы.
   - На странице должен быть только один `<main>`.
4. `<article>`
   - Используется для независимого, самодостаточного контента, например, статьи, поста в блоге или новости.
   - Может содержать заголовки, текст, изображения и т.д.
5. `<section>`
   - Определяет раздел документа, например, главу или часть страницы.
   - Обычно содержит заголовок и связанный контент.
6. `<aside>`
   - Используется для дополнительного контента, который связан с основным, но не является его частью (например, боковая панель).
7. `<footer>`
   - Предназначен для подвала сайта или раздела.
   - Обычно содержит информацию об авторских правах, контакты или ссылки.
8. `<figure>` и `<figcaption>`
   - `<figure>` используется для группировки медиа (изображений, диаграмм, кода) с подписью.
   - `<figcaption>` — подпись к медиа.
9. `<time>`
   - Используется для обозначения даты или времени.
   - Может включать атрибут datetime для машинного чтения.
10. `<mark>`

- Выделяет текст, который должен быть выделен (например, результаты поиска).

11. `<details>` и `<summary>`

- `<details>` создает раскрывающийся блок.
- `<summary>` — заголовок для этого блока.

12. `<address>`
    - Используется для контактной информации, обычно в `<footer>`.

## Преимущества семантических тегов:

1. Улучшение доступности:
   - Семантические теги помогают скринридерам и другим вспомогательным технологиям лучше понимать структуру страницы.
2. SEO-оптимизация:
   - Поисковые системы лучше индексируют страницы с четкой структурой.
3. Читаемость кода:
   - Код становится более понятным и поддерживаемым.
4. Упрощение стилизации:
   - Семантические теги позволяют легко применять стили к определенным частям страницы.

## Когда использовать семантические теги:

- Для создания структурированных и понятных веб-страниц.
- Для улучшения доступности и SEO.
- Для упрощения работы с кодом в команде.

🚀 **_Источник: DeepSeek_**