Зачем нужна семантика

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

Главная идея: выбирайте элемент по смыслу содержимого. Внешний вид настраивается отдельно с помощью CSS.

Базовая структура страницы

index.htmlучебный пример
<body>
  <header>Навигация и заголовок</header>
  <main>
    <article>Основной материал</article>
    <aside>Связанная информация</aside>
  </main>
  <footer>Контакты и ссылки</footer>
</body>

Проверьте себя

  • У страницы один основной элемент <main>
  • Заголовки образуют логичную иерархию
  • Интерактивные элементы доступны с клавиатуры