Skip to main content

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

Семантические теги 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>
  • Выделяет текст, который должен быть выделен (например, результаты поиска).
  1. <details> и <summary>
  • <details> создает раскрывающийся блок.
  • <summary> — заголовок для этого блока.
  1. <address>
    • Используется для контактной информации, обычно в <footer>.

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

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

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

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

🚀 Источник: DeepSeek