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

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

Что уже умеем / что добавим

Вы поняли, зачем нужна семантика, и уже заменили пару контейнеров на header и main. Теперь разберём весь основной набор структурных тегов. В сквозном проекте мы разметим страницу целиком: добавим подвал, разделы и карточки-статьи.

Что вы узнаете в рамках статьи

• Для чего служат header, nav и footer.
• Что такое main и почему он один на странице.
• Чем отличаются section и article.
• Для чего нужен aside.
• Как эти теги складываются в структуру страницы.

Ключевые термины

• header — вводная часть страницы или раздела (шапка).
• nav — блок навигации по сайту.
• main — основное содержимое страницы, одно на странице.
• section — смысловой раздел страницы.
• article — самостоятельная, законченная единица контента.
• aside — второстепенное содержимое сбоку.
• footer — заключительная часть страницы или раздела (подвал).

Шапка, навигация и подвал

Три тега отвечают за «обрамление» страницы. header — вводная часть: обычно логотип и меню вверху. nav — блок ссылок навигации, его часто помещают внутрь header. footer — подвал внизу страницы с копирайтом, контактами и второстепенными ссылками.

<header>
  <div class="logo">Моя компания</div>
  <nav>
    <a href="#">Главная</a>
    <a href="#">Контакты</a>
  </nav>
</header>

<footer>
  <p>© 2026 Моя компания</p>
</footer>

header и footer можно использовать не только для всей страницы, но и внутри отдельных статей — как их локальные шапка и подвал. nav стоит применять для основной навигации, а не для каждой случайной ссылки.

Основное содержимое: main

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

<main>
  <h1>Наши услуги</h1>
  <section class="services">...</section>
</main>

Скринридеры позволяют быстро перепрыгнуть прямо к main, минуя навигацию, — поэтому единственность и чистота этого тега важны. Держите в main только основной контент, а обрамление оставляйте header и footer.

Разделы и статьи: section и article

Эти два тега чаще всего вызывают вопросы. section — смысловой раздел страницы, обычно с собственным заголовком: «Услуги», «О нас», «Отзывы». article — самостоятельная, законченная единица контента, которую можно вынуть со страницы, и она сохранит смысл: пост в блоге, новость, карточка товара, отзыв.

<section class="services">
  <h2>Наши услуги</h2>
  <article class="card">
    <h3>Веб-разработка</h3>
    <p>Создаём сайты под ключ.</p>
  </article>
  <article class="card">
    <h3>Дизайн</h3>
    <p>Рисуем красивые интерфейсы.</p>
  </article>
</section>

Простой ориентир: если блок — это часть страницы по теме, это section; если это независимый, самодостаточный кусок, который мог бы жить отдельно, — это article. Карточки услуг, повторяющиеся и самодостаточные, хорошо ложатся на article внутри section.

Боковое содержимое: aside

Тег aside предназначен для второстепенного содержимого, связанного с основным косвенно: боковая панель, блок «Похожие статьи», реклама, врезка с дополнительным фактом. Это то, что можно убрать без потери основного смысла страницы.

<main>
  <article>
    <h1>Статья про Flexbox</h1>
    <p>Основной текст статьи...</p>
  </article>
  <aside>
    <h2>Читайте также</h2>
    <p>Ссылки на другие материалы.</p>
  </aside>
</main>

aside сообщает: «это сопутствующая информация». Скринридер объявит её как дополнительную, и пользователь сам решит, нужна ли она ему. Не используйте aside для основного контента — только для того, что играет вспомогательную роль.

Применяем в проекте

Разметим сайт компании целиком. Шапка уже в header, содержимое в main — теперь превратим карточки услуг в article, обернём их в section с заголовком и добавим footer.

<header class="header">
  <div class="logo">Моя компания</div>
  <nav class="nav">
    <a href="#">Главная</a>
    <a href="#">Услуги</a>
    <a href="#">Контакты</a>
  </nav>
</header>

<main>
  <section class="services">
    <h2>Наши услуги</h2>
    <article class="card">
      <h3>Веб-разработка</h3>
      <p>Создаём сайты под ключ.</p>
    </article>
    <article class="card">
      <h3>Дизайн</h3>
      <p>Проектируем удобные интерфейсы.</p>
    </article>
  </section>
</main>

<footer class="footer">
  <p>© 2026 Моя компания. Все права защищены.</p>
</footer>

Обновите страницу: внешне всё как было, но структура стала полностью осмысленной. Браузер, поисковик и скринридер теперь видят шапку с навигацией, основное содержимое с разделом услуг из самостоятельных статей-карточек и подвал. Это профессиональная разметка.

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

• Несколько main на странице.
  Основное содержимое одно — и тег main должен быть один.
• section без заголовка.
  Раздел обычно подразумевает заголовок; если его нет, возможно, нужен просто div.
• Путаница section и article.
  article самодостаточен и осмыслен вне страницы, section — часть страницы по теме.
• aside для главного контента.
  В aside кладут только второстепенное, а не то, ради чего пришёл пользователь.

Итоги

Замечательно — теперь у вас есть полный набор структурных тегов! Вы знаете роли header, nav, main, section, article, aside и footer и умеете складывать из них осмысленную страницу. Это словарь, на котором говорит профессиональная вёрстка. Ваш сайт компании получил полноценную семантическую структуру от шапки до подвала.

Отличная работа! В следующем уроке уточним ещё один важный аспект осмысленной разметки: когда использовать списки, кнопки и ссылки — и чем они принципиально различаются.