Урок 05. Семантическая HTML-разметка

📁 Раздел: Основы HTML ⏱️ Время изучения: ~35 мин 🎯 Сложность: Начальная
#header #nav #main #section #article #aside #footer #figure

⚡ Кратко: суть урока

Семантические элементы описывают смысл и роль блока на странице: `header`, `nav`, `main`, `section`, `article`, `aside`, `footer`, `figure`, `figcaption`. Такая разметка помогает читать код, улучшает доступность и делает страницу понятнее для браузеров и поисковых систем.

  • `header` и `footer` задают верх и низ страницы или блока.
  • `nav`, `main`, `section`, `article`, `aside` делят страницу на смысловые части.
  • `figure` и `figcaption` помогают описывать иллюстрации и подписи.

Что запомнить: семантика описывает не внешний вид, а смысл блока.

Частая ошибка: использовать семантический тег только потому, что он «красиво звучит».

📖 О чём этот урок

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

⚠️ Важно: семантика не заменяет стили. Элемент выбирают по смыслу, а не по тому, как он выглядит на экране.

Какие элементы изучим

  • `header` - верхняя часть страницы или блока.
  • `nav` - блок навигации по сайту или разделу.
  • `main` - основное содержимое страницы, один раз на документ.
  • `section` - смысловой раздел внутри страницы.
  • `article` - самостоятельный материал: статья, пост, карточка новости.
  • `aside` - дополнительная информация, боковая колонка, подсказка.
  • `footer` - нижняя часть страницы или блока.
  • `figure` и `figcaption` - изображение и его подпись.

Почему семантика важна

  • Код проще читать и сопровождать.
  • Скринридеры и другие ассистивные технологии лучше понимают страницу.
  • Поисковики и автоматические инструменты получают более ясную структуру.
  • Команде проще договориться о роли каждого блока.

💻 Что покажем в примерах

В примерах урока вы увидите настоящую семантическую структуру страницы с живым рендером каждого блока: шапку, навигацию, основное содержимое, боковую колонку, подвал и иллюстрацию с подписью.

header nav article aside footer
Каркас, который вы соберёте: header · nav · main (article + aside) · footer.

📝 Практика урока

  • Определить, какие блоки на макете должны стать `header`, `nav`, `main`, `section`, `article` и `aside`.
  • Собрать страницу с `figure` и `figcaption`.
  • Проверить, что `main` на странице один и что структура понятна в DevTools.

🐛 На что обратить внимание

Частая ошибка - назначать семантический тег только по внешнему виду. Например, `nav` подходит для навигации, а не для любой горизонтальной панели, и `main` должен обозначать основное содержимое, а не просто большой блок.

🔗 Ресурсы

Официальные ссылки собраны в resources.html. Там есть спецификация HTML, справочник по семантическим элементам и материалы по доступности.

🏠 Домашнее задание

Домашнее задание этого урока - сверстать семантическую страницу по простому макету и проверить структуру в браузере. Подробности - в homework.html.

📚 Что повторить перед уроком

🎯 Что изучать дальше

  • Следующий урок: текст, заголовки, списки и ссылки (готовится в фазе 33).
  • После семантики логично перейти к базовым текстовым элементам.