Семантический HTML

С возвращением.

В предыдущем уроке ты научился создавать формы и собирать данные от пользователей.

Теперь мы изучаем семантический HTML.

Здесь HTML становится чем-то большим, чем просто набор тегов.

Он становится значением.

Потому что да, можно построить всё с помощью div.

Но можно также есть суп отвёрткой.

Возможно?

Может быть.

Хорошая идея?

Абсолютно нет.

Что Ты Изучишь

В этом уроке ты узнаешь:

что означает semantic HTML;
почему семантические элементы важны;
как использовать header;
как использовать nav;
как использовать main;
как использовать section;
как использовать article;
как использовать aside;
как использовать footer;
как избегать “div soup”;
как строить понятную структуру страницы.

Что Такое Семантический HTML?

Семантический HTML означает использование элементов, которые описывают значение контента.

Например:

<header>
  <h1>Мой Сайт</h1>
</header>

Это говорит браузеру:

Это header-область страницы.

Сравни с этим:

<div>
  <h1>Мой Сайт</h1>
</div>

div работает.

Но он ничего не объясняет.

Это просто универсальная коробка.

Таинственная коробка.

Коробка без паспорта.

Почему Семантический HTML Важен

Семантический HTML помогает:

браузерам лучше понимать страницу;
screen readers объяснять страницу;
поисковым системам понимать контент;
разработчикам читать код;
будущему тебе не плакать в кофе.

Хороший HTML — это не только то, что видно на экране.

Это также структура.

Страница должна не только выглядеть правильно.

Она должна иметь смысл.

Элемент header

Элемент header представляет вводный контент.

Обычно он содержит:

название сайта;
логотип;
главный заголовок;
навигацию;
короткое вступление.

Пример:

<header>
  <h1>InnoMarts Learning Hub</h1>
  <p>Весёлые курсы для серьёзных навыков.</p>
</header>

Страница может иметь главный header.

Секции и статьи тоже могут иметь собственные headers.

HTML гибкий.

Но не случайный.

Гибкий как йога.

Не случайный как ошибка принтера.

Элемент nav

Элемент nav представляет навигационные ссылки.

Пример:

<nav>
  <a href="index.html">Главная</a>
  <a href="courses.html">Курсы</a>
  <a href="contact.html">Контакт</a>
</nav>

Используй nav для важных зон навигации.

Например:

главное меню;
меню курса;
содержание страницы;
навигация в footer.

Не оборачивай каждую отдельную ссылку в nav.

Ссылка внутри абзаца не требует nav.

Semantic HTML означает внимательно выбирать значение.

Не нужно надевать корону на каждую картофелину.

Элемент main

Элемент main содержит главный контент страницы.

Пример:

<main>
  <h1>HTML Курс</h1>
  <p>Этот курс учит HTML шаг за шагом.</p>
</main>

Каждая страница обычно должна иметь только один main.

Контент в main должен быть уникальным для этой страницы.

Не повторяющаяся навигация.

Не footer.

Не cookie banner, который появляется как маленький юридический призрак.

Главный контент — это причина, почему страница существует.

Элемент section

section группирует связанный контент.

Пример:

<section>
  <h2>Что Ты Изучишь</h2>
  <p>Ты изучишь HTML-структуру, текст, ссылки, изображения, формы и семантические элементы.</p>
</section>

Используй section, когда контент имеет ясную тему.

Хорошая section обычно имеет заголовок.

Если ты не можешь дать ей осмысленный заголовок, возможно, тебе не нужен section.

Возможно, тебе нужен просто div.

И это нормально.

Не каждая коробка нуждается в философской цели.

Элемент article

article представляет независимый контент.

Пример:

<article>
  <h2>Почему Стоит Изучать HTML?</h2>
  <p>HTML — это основа веба.</p>
</article>

Используй article для контента, который может существовать самостоятельно.

Примеры:

blog posts;
news articles;
уроки курса;
комментарии;
product cards;
forum posts.

Если контент имеет смысл сам по себе, article может быть хорошим выбором.

Article — это как маленький независимый гражданин твоего сайта.

Надеемся, платит налоги.

Элемент aside

Элемент aside используется для связанного бокового контента.

Пример:

<aside>
  <h2>Совет</h2>
  <p>Используй семантические элементы, чтобы HTML было легче понять.</p>
</aside>

Используй aside для:

советов;
боковых заметок;
связанных ссылок;
биографии автора;
дополнительной информации;
маленьких callouts.

Контент в aside связан.

Но он не является главным контентом.

Как друг, который комментирует сбоку.

Полезный.

Иногда слишком честный.

Элемент footer

Элемент footer представляет нижнюю или завершающую часть страницы или секции.

Пример:

<footer>
  <p>&copy; 2026 InnoMarts</p>
</footer>

Footer может содержать:

copyright;
контактные ссылки;
social links;
дополнительную навигацию;
legal information.

Footer страницы обычно находится внизу.

Но articles и sections тоже могут иметь собственные footers.

HTML имеет слои.

Как лазанья.

Но менее вкусный.

div Не Является Злом

Элемент div всё ещё полезен.

div — это универсальный контейнер.

Пример:

<div class="card">
  <h2>HTML Basics</h2>
  <p>Изучи основу веб-страниц.</p>
</div>

Используй div, когда нет лучшего семантического элемента.

Не используй семантические элементы только для того, чтобы звучать профессионально.

Используй значение там, где есть значение.

Используй div, когда нужен нейтральный контейнер.

div не злой.

Но слишком много div без значения создают div soup.

А этот суп никто не заказывал.

Плохая Структура: Div Soup

Это работает, но не имеет понятного значения:

<div>
  <div>
    <h1>Мой Сайт</h1>
  </div>

  <div>
    <div>Главная</div>
    <div>Курсы</div>
    <div>Контакт</div>
  </div>

  <div>
    <h2>Добро пожаловать</h2>
    <p>Это моя страница.</p>
  </div>

  <div>
    <p>Copyright 2026</p>
  </div>
</div>

Браузер может это показать.

Но структура непонятная.

Всё — просто div.

Это как подписать каждый инструмент в ящике словом “штука”.

Технически правда.

Абсолютно бесполезно.

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

Вот лучшая версия:

<header>
  <h1>Мой Сайт</h1>

  <nav>
    <a href="index.html">Главная</a>
    <a href="courses.html">Курсы</a>
    <a href="contact.html">Контакт</a>
  </nav>
</header>

<main>
  <section>
    <h2>Добро пожаловать</h2>
    <p>Это моя страница.</p>
  </section>
</main>

<footer>
  <p>Copyright 2026</p>
</footer>

Это намного понятнее.

Браузер понимает это лучше.

Разработчики понимают это лучше.

Будущий ты понимает это лучше.

Будущий ты благодарит.

Вероятно, уставшими глазами.

Создай Семантическую Страницу

Создай файл:

touch semantic.html

Добавь это:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Практика Семантического HTML</title>
</head>
<body>
  <header>
    <h1>Мой Учебный Сайт</h1>

    <nav>
      <a href="index.html">Главная</a>
      <a href="courses.html">Курсы</a>
      <a href="contact.html">Контакт</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Об Этом Сайте</h2>
      <p>Этот сайт помогает мне практиковать HTML и создавать лучшие страницы.</p>
    </section>

    <section>
      <h2>Последние Уроки</h2>

      <article>
        <h3>Основы HTML</h3>
        <p>Изучи базовую структуру HTML-документа.</p>
      </article>

      <article>
        <h3>Формы</h3>
        <p>Узнай, как пользователи могут отправлять информацию через формы.</p>
      </article>
    </section>

    <aside>
      <h2>Совет</h2>
      <p>Используй семантические элементы, когда они описывают назначение контента.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 Мой Учебный Сайт</p>
  </footer>
</body>
</html>

Открой её в браузере.

Она может выглядеть просто.

Это нормально.

Семантический HTML сначала про структуру.

Красота придёт позже с CSS.

Сначала скелет.

Потом куртка.

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

Использовать section для всего

Не каждый контейнер требует section.

Плохо:

<section>
  <section>
    <section>
      <p>Привет</p>
    </section>
  </section>
</section>

Используй section, когда контент имеет ясную тему.

Использовать article для случайных блоков

Не каждая card — это article.

Используй article, когда контент может существовать самостоятельно.

Blog post?

Да.

Случайный layout wrapper?

Нет.

Забыть main

Страница обычно должна иметь один main.

Плохо:

<header>...</header>
<section>...</section>
<footer>...</footer>

Лучше:

<header>...</header>
<main>
  <section>...</section>
</main>
<footer>...</footer>

Элемент main помогает определить центральный контент.

Практика

Создай страницу:

homepage.html

Она должна содержать:

header;
nav;
main;
минимум два элемента section;
минимум один article;
один aside;
footer;
заголовки в правильном порядке;
осмысленный контент.

Без CSS.

Без JavaScript.

Только семантический HTML.

Мини-Задание

Создай структуру страницы курса.

Она должна содержать:

site header;
navigation menu;
главное вступление курса;
section для списка уроков;
article для preview каждого урока;
aside с советом для обучения;
footer с copyright.

Используй семантические элементы внимательно.

Без div soup.

Мы уважаем суп.

Но не в HTML.

Итог

Сегодня ты узнал, что:

semantic HTML добавляет значение структуре страницы;
header представляет вводный контент;
nav представляет навигацию;
main содержит главный контент страницы;
section группирует связанный контент;
article представляет независимый контент;
aside содержит связанную боковую информацию;
footer представляет завершающий или нижний контент;
div полезен, когда не подходит ни один семантический элемент;
семантическая структура помогает доступности, SEO и поддержке кода.

Семантический HTML делает страницу легче для понимания.

Для браузеров.

Для пользователей.

Для разработчиков.

И для будущего тебя, у которого уже достаточно проблем.

Следующий Урок

В следующем уроке мы построим финальный HTML-проект.

Без паники.

Просто всё, что ты изучил, вместе — как маленький веб-оркестр.