Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все занятия обоих курсов, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт

HTML и CSS с нуля: создаём свои сайты Модуль 1. Введение и HTML

Занятие 1.9

Семантическая структура

Сегодня мы соберём правильный каркас сайта: шапка, меню, основная часть и подвал.

Изучаем: header, nav, main, section, article, footer
Результат: Каркас страницы «Мой сайт»

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

👀 Сегодня сделаем вот такое

Показать код примера 
<header>
  <h1>Мой сайт</h1>
  <nav>
    <a href="#about">Обо мне</a> |
    <a href="#news">Новости</a>
  </nav>
</header>

<main>
  <section id="about">
    <h2>Обо мне</h2>
    <p>Я учусь делать сайты с нуля.</p>
  </section>

  <section id="news">
    <h2>Новости</h2>
    <article>
      <h3>Выучил теги!</h3>
      <p>Сегодня разобрался с семантикой.</p>
    </article>
  </section>
</main>

<footer>
  <p>© 2026, Саша</p>
</footer>
header, main, footer {
  border: 2px dashed #999;
  margin: 8px;
  padding: 8px;
}

💡 Объяснение

Что такое семантика

Семантика — это смысл. Семантические теги рассказывают не о том, как часть страницы выглядит, а о том, что это такое: шапка, меню, статья, подвал.

Представь дом, где все комнаты одинаковые и без табличек — пришлось бы заглядывать в каждую. А если на дверях написано «Кухня», «Спальня», «Ванная», всё понятно сразу. Семантические теги — это таблички на дверях страницы.

Кому это помогает

  • Людям с нарушениями зрения: программа чтения с экрана может сразу «перепрыгнуть» к меню или к основному содержимому.
  • Поисковикам: Яндекс и Google лучше понимают, где главное, и выше показывают сайт.
  • Программистам: код легче читать — <nav> понятнее, чем десятый <div>.

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

  • <header> — шапка: логотип, название сайта, иногда меню. Обычно вверху страницы.
  • <nav> — навигация: основное меню со ссылками по сайту.
  • <main> — основное содержимое, ради которого пришли на страницу. На странице ровно один main.
  • <section> — раздел по одной теме. У раздела почти всегда есть заголовок: «Обо мне», «Галерея», «Контакты».
  • <article> — самостоятельная запись, которую можно вырезать и опубликовать отдельно, и она будет понятна: новость, пост в блоге, карточка товара, отзыв.
  • <aside> — дополнительная информация сбоку: интересные факты, реклама, ссылки «читайте также».
  • <footer> — подвал: авторские права, контакты, ссылки внизу страницы.

section или article?

Задай вопрос: «Если вырезать этот блок и показать отдельно на другом сайте — он будет понятен сам по себе?» Да → article (новость, пост). Нет, это часть страницы → section (раздел «Мои новости», в котором лежат несколько article).

А как же div?

<div> — «коробка без таблички». У него нет смысла, он нужен только для группировки элементов ради оформления (например, чтобы выстроить карточки в ряд). Правило: сначала ищем подходящий семантический тег, и только если его нет — берём div.

Типичный каркас страницы

<body>
  <header>
    <h1>Мой сайт</h1>
    <nav>…ссылки…</nav>
  </header>

  <main>
    <section>
      <h2>Обо мне</h2>
      …
    </section>
    <section>
      <h2>Новости</h2>
      <article>…</article>
      <article>…</article>
    </section>
  </main>

  <footer>© 2026</footer>
</body>

Внешне семантические теги ничем не отличаются от обычных блоков — всё оформление мы добавим через CSS. Чтобы увидеть блоки на тренировке, можно временно обвести их рамками.

Частые ошибки

  • Два main на странице.
  • Вся страница из одних div.
  • section без заголовка.
  • Путают header (шапка) и head (служебная часть документа). head — невидимый, header — видимый блок внутри body.

Проверь себя

  1. Зачем нужны семантические теги, если внешне они не отличаются от div?
  2. Новость на сайте школы — это section или article?
  3. Чем header отличается от head?

⌨️ Практика

  1. Создай header с названием сайта и nav с тремя ссылками.
  2. В main добавь два section: «Обо мне» и «Мои новости».
  3. В разделе новостей размести два article с заголовком и текстом.
  4. Добавь footer с годом и твоим именем (только имя!).

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход

💬 Вопросы по занятию

Не получается — спроси здесь. Другие ученики и преподаватель видят вопросы и отвечают. Пиши вежливо: грубые сообщения сайт не примет.

🔒 Писать могут только зарегистрированные. Читать обсуждение можно и без аккаунта. Регистрация · Вход

Вопросов пока нет. Задай первый — это помогает и тебе, и другим.