#12. Семантические теги: header, nav, main, section, article, aside, footer - HTML c нуля

В уроке #11 мы верстали страницу коробками div и обещали рассказать про их осмысленные аналоги. Семантические теги — такие же блочные контейнеры, но их названия говорят браузеру, программам для незрячих и поисковикам, какую роль играет блок.

Типичная страница

Схематично страницу с семантическими тегами изображают так:

+--------------------------------------------------+
|                     header                       |
+--------------------------------------------------+
|                       nav                        |
+---------------------------+----------------------+
|                           |                      |
|           main            |        aside         |
|                           |                      |
|   +-------------------+   |  (боковая колонка:   |
|   |      article      |   |   советы, ссылки)    |
|   +-------------------+   |                      |
|                           |                      |
+---------------------------+----------------------+
|                      footer                       |
+--------------------------------------------------+

Важно: схема показывает типичное расположение частей, но сами теги ничего не расставляют — за расположение отвечает CSS (это тема будущей части курса). Семантические теги описывают смысл.

Справочник тегов

header

шапка страницы или её раздела: логотип, название, поиск

nav

навигация: меню сайта, обычно список ссылок

main

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

section

тематический раздел страницы, обычно со своим заголовком

article

самостоятельный материал: статья, запись блога, комментарий

aside

побочный контент: боковая колонка, советы, сноски

footer

подвал: копирайт, контакты, вспомогательные ссылки

article или section?

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

Пример

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Мой блог</title>
</head>
<body>
    <header>
        <h1>Мой блог</h1>
    </header>

    <nav>
        <ul>
            <li><a href="index.html">Главная</a></li>
            <li><a href="about.html">О себе</a></li>
        </ul>
    </nav>

    <main>
        <article>
            <h2>Заголовок статьи</h2>
            <p>Текст статьи…</p>
        </article>
    </main>

    <aside>
        <h3>Совет дня</h3>
        <p>Пишите семантичный код!</p>
    </aside>

    <footer>
        <p>&copy; 2026 Мой блог</p>
    </footer>
</body>
</html>

Обратите внимание на © в подвале — это мнемоника (спецсимвол) для значка ©. О них — в следующем уроке.

Практика

Переверстайте свою страницу из урока #11: вместо div возьмите header, nav с меню в виде списка ссылок (как в уроке #7), main со статьёй в article, aside и footer.