Семантические теги

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

Семантические теги — это теги, чьё имя говорит о роли блока: шапка, навигация, основное содержимое, подвал.

Зачем нужна семантика

Раньше всю страницу строили из безликих <div> — универсальных блоков без смысла. Глядя на такой код, невозможно понять, где меню, а где статья. HTML5 добавил семантические теги: они выглядят как обычные блоки, но их имя сообщает о назначении.

Главные семантические теги

Тег	Роль
`<header>`	шапка: логотип, название, верхнее меню
`<nav>`	блок навигации (меню, ссылки)
`<main>`	основное содержимое страницы (один на странице)
`<section>`	смысловой раздел внутри страницы
`<article>`	самостоятельный материал (статья, новость, карточка)
`<aside>`	боковое/дополнительное содержимое
`<footer>`	подвал: контакты, копирайт

Как из них собирается страница

Эти теги складываются в осмысленный скелет. Вот типичная раскладка страницы:

<body>
  <header>
    <nav>Меню сайта</nav>
  </header>
  <main>
    <article>
      <h1>Заголовок статьи</h1>
      <p>Текст статьи...</p>
    </article>
    <aside>Похожие материалы</aside>
  </main>
  <footer>
    <p>© 2026 Мой сайт</p>
  </footer>
</body>

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

section и article

Их часто путают. Простое различие: <article> — это нечто самостоятельное, что осмысленно и в отрыве от страницы (новость, пост, товар). <section> — просто тематический раздел внутри страницы, обычно со своим заголовком.

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

Семантические теги — это просто блоки

Важно снять возможный страх: семантические теги не делают ничего «магического» и почти не меняют внешний вид. По поведению <header>, <main>, <footer> — это такие же блочные контейнеры, как знакомый вам <div>. Разница только в одном: их имя несёт смысл. Где раньше вы написали бы <div> для шапки, теперь пишете <header> — и код сразу становится говорящим.

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

Итог

Семантические теги называют роль блока: header, nav, main, footer и другие.
<main> с основным содержимым на странице один; <article> — самостоятельный материал, <section> — раздел.
Семантика делает код понятным людям, поисковикам и программам доступности.