Структура страницы

Зачем это нужно

Почти у каждого сайта одинаковый «скелет»: сверху шапка с логотипом и меню, в середине основное содержимое, сбоку иногда боковая колонка, внизу подвал с контактами. Для этих частей в HTML есть семантические теги — теги со смыслом. Внешне они ничем не отличаются от обычного блока, но:

• поисковик понимает, где главный текст, а где меню;
• незрячий человек может одной клавишей «перепрыгнуть» к основному содержимому;
• код читать легче: <nav> понятнее, чем безымянный блок.

Главные части страницы

<header>
  <a href="/">Логотип</a>
  <nav>
    <a href="/">Главная</a>
    <a href="/about">О нас</a>
  </nav>
</header>

<main>
  <h1>Добро пожаловать</h1>
  <p>Основной текст страницы.</p>
</main>

<footer>
  <p>© 2026 CodeWithMe</p>
</footer>

Результат: сверху ссылки-логотип и меню, в середине заголовок и текст, внизу строчка с копирайтом.

Тег	Что внутри
<header>	шапка: логотип, название, меню
<nav>	главная навигация — меню ссылок
<main>	основное содержимое; на странице он один
<footer>	подвал: контакты, копирайт, ссылки на правила
<aside>	побочное: боковая колонка, реклама, «читайте также»

Разделы и статьи

Внутри <main> содержимое делят дальше:

• <section> — раздел страницы на одну тему. У раздела обычно есть свой заголовок.
• <article> — самостоятельный кусок, который имеет смысл и отдельно: пост в блоге, новость, карточка товара, комментарий.

Как выбрать? Спроси себя: «Можно ли вырезать этот кусок и опубликовать на другом сайте?» Если да — <article>. Если это просто часть страницы — <section>.

<main>
  <section>
    <h2>Отзывы</h2>
    <article>
      <h3>Аня</h3>
      <p>Отличный курс!</p>
    </article>
    <article>
      <h3>Тимур</h3>
      <p>Всё понятно с первого раза.</p>
    </article>
  </section>
</main>

Результат: раздел «Отзывы» и в нём два отзыва, каждый со своим заголовком.

<header> и <footer> бывают и внутри статьи — например, шапка статьи с автором и датой.

Дата: <time>

Дату человек читает как «31 октября», а программе удобнее 2026-10-31. <time> даёт оба:

<p>Опубликовано <time datetime="2026-10-31">31 октября</time></p>

Результат: на странице видно «Опубликовано 31 октября».

<div> и <span> — блоки без смысла

Иногда нужна обёртка просто чтобы сгруппировать элементы и потом оформить их в CSS. Для этого есть «пустые» теги:

• <div> — блочный контейнер (с новой строки, на всю ширину);
• <span> — строчный контейнер (внутри текста).

<div class="card">
  <p>Цена: <span class="price">990 ₽</span></p>
</div>

Результат: выглядит как обычный абзац. Смысла у <div> и <span> нет — они нужны как «крючки» для CSS (атрибут class разберём в теме 9).

Правило: сначала ищи подходящий смысловой тег, а <div> бери, когда подходящего нет.

Как это работает внутри

Браузер показывает <header>, <main>, <section>, <div> одинаково — как обычные блоки. Разница видна не глазу, а программам: программа чтения с экрана строит по этим тегам «карту ориентиров» страницы, и человек может сказать «перейти к навигации» или «к основному содержимому».

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

1. Всё из <div>. «Дивная» вёрстка работает, но она немая для поисковиков и программ чтения.
2. Два <main>. Основное содержимое на странице одно.
3. <section> без заголовка. Если заголовка нет и не нужно — скорее всего, это просто <div>.
4. <nav> для любых ссылок. <nav> — для главных блоков навигации, а не для каждой ссылки в тексте.
5. Выбор тега ради внешнего вида. Семантический тег выбирают по смыслу, а вид настраивают в CSS.

Шпаргалка

Тег	Смысл
<header>	шапка страницы или статьи
<nav>	меню навигации
<main>	основное содержимое, один на странице
<section>	тематический раздел с заголовком
<article>	самостоятельная запись: пост, новость, карточка
<aside>	боковое, второстепенное
<footer>	подвал
<time datetime="…">	дата/время
<div> / <span>	блочная / строчная обёртка без смысла