Что такое семантические элементы в HTML и для чего они нужны?

Это HTML-теги, которые описывают смысл содержимого, а не только его внешний вид.

Например:

• <article>: Самостоятельный, независимый фрагмент контента (например, запись в блоге, сообщение на форуме).
• <aside>: Контент, косвенно связанный с основным содержимым страницы (например, боковая панель, врезка с цитатой).
• <nav>: Навигационные ссылки.
• <header>: Вводная часть секции или страницы (например, заголовок, логотип).
• <footer>: Завершающая часть секции или страницы (например, информация об авторе, ссылки на смежные документы).
• <main>: Основное содержимое документа.
• <section>: Раздел документа, сгруппированный по тематике.

Преимущества использования семантических элементов:

• Поисковая оптимизация (SEO): Поисковые роботы лучше понимают структуру и контент страницы, что способствует более высокой позиции в результатах поиска.
• Доступность (Accessibility): Экранные ридеры и другие вспомогательные технологии могут правильно интерпретировать структуру страницы для людей с ограниченными возможностями.
• Улучшение читаемости кода: Код становится более понятным для других разработчиков.
• Масштабируемость: Структурированный код легче поддерживать и развивать.

Пример несемантического подхода:

<div>
  <div>Заголовок статьи</div>
  <div>Автор</div>
  <div>Текст статьи...</div>
</div>

Пример семантического подхода:

<article>
  <header>
    <h1>Заголовок статьи</h1>
    <p>Автор</p>
  </header>
  <p>Текст статьи...</p>
</article>