🧱

Модуль 1. Введение и HTML

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

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

👀

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

🚪

Таблички на дверях

Дом без табличек: какая дверь — кухня? 🤷

Дом с табличками: Кухня, Спальня, Ванная — всё ясно!

Семантические теги — таблички для частей страницы.

🤝

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

  • 🦻 Незрячим — «прыгнуть» сразу к меню или главному
  • 🔍 Поисковикам — понять, где главное
  • 👩‍💻 Программистам — легко читать код
🗺

Карта страницы

  • header — шапка
  • nav — меню
  • main — главное (один!)
  • section — раздел с заголовком
  • aside — сбоку, дополнительно
  • footer — подвал
<header>header + nav</header>
<main>
  <section>section</section>
  <section>section</section>
</main>
<footer>footer</footer>
body { font-family: sans-serif; }
header, main, section, footer {
  border: 3px dashed #999; margin: 6px; padding: 8px;
}
header { background: #fff0e6; }
footer { background: #e3f6ef; }
📰

section или article?

Вопрос: «Если вырезать блок и показать отдельно — он понятен?»

✅ Да → article
новость, пост, отзыв
❌ Нет → section
раздел «Новости»
📦

А что такое div?

  • div — коробка без таблички
  • Нужен только для оформления

Сначала ищем семантический тег, если нет — div.

🏗

Собираем каркас

Так выглядит скелет почти любого сайта.

Рамки — временно, чтобы увидеть блоки.

<header>
  <h1>Мой сайт</h1>
  <nav><a href="#">Обо мне</a> | <a href="#">Новости</a></nav>
</header>
<main>
  <section>
    <h2>Новости</h2>
    <article><h3>Выучил теги!</h3><p>Ура!</p></article>
  </section>
</main>
<footer>© 2026, Саша</footer>
header, main, section, article, footer { border: 2px dashed #aaa; margin: 4px; padding: 4px; }
🐞

Найди ошибки

Здесь 3 ошибки.

Подсказка: head/header, количество main, раздел без заголовка.

<body>
  <head>Мой сайт</head>
  <main>Обо мне</main>
  <main>
    <section><p>Текст раздела</p></section>
  </main>
</body>
🃏

Запомни!

  • <header>Шапка
  • <nav>Меню
  • <main>Главное содержимое
  • <section>Раздел
  • <article>Отдельная статья/карточка
  • <footer>Подвал
  • <div>Блок без смысла
⌨️

Практика: Каркас страницы «Мой сайт»

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

🚀 Со звёздочкой: Добавь боковую колонку aside с интересными фактами. Нарисуй схему своей страницы прямоугольниками.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

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

✨ По желанию: Посмотри на любой новостной сайт и найди в нём шапку, меню, основную часть и подвал.