Семантическая разметка

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

div и span

Тег <div> — блок без собственного смысла, просто контейнер. <span> — такой же нейтральный, но строчный контейнер внутри текста:

<div style="background: #eef; padding: 8px;">
  Блок div занимает всю ширину.
  <span style="background: #fd8;">А span — только ширину текста.</span>
</div>

Их используют, когда нужно что-то сгруппировать или оформить, а подходящего смыслового тега нет.

Смысловые теги

Выглядят они как обычный <div> — разница только в смысле.

Каркас страницы

Соберём типичную страницу. Рамки добавлены в CSS, чтобы было видно границы блоков:

<style>
  header, nav, main, aside, footer { border: 1px dashed #888; padding: 6px; margin: 4px 0; }
</style>
 
<header>Кофейня «Зерно»</header>
<nav>
  <a href="#">Меню</a> · <a href="#">О нас</a> · <a href="#">Контакты</a>
</nav>
<main>
  <h1>Наше меню</h1>
  <p>Кофе, чай и выпечка каждый день.</p>
</main>
<aside>Сегодня скидка на круассаны.</aside>
<footer>© 2026 Кофейня «Зерно»</footer>

Расставить блоки по колонкам — задача CSS; HTML лишь описывает, какие части есть на странице.

article и section

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

<article>
  <h2>Как заварить пуэр</h2>
  <section>
    <h3>Посуда</h3>
    <p>Понадобится глиняный чайник.</p>
  </section>
  <section>
    <h3>Время</h3>
    <p>Первая заварка — десять секунд.</p>
  </section>
</article>

Шапка и подвал внутри статьи

<header> и <footer> бывают не только у всей страницы, но и у отдельной статьи:

<article>
  <header>
    <h2>Открываем вторую кофейню</h2>
    <p><small>Анна, 12 мая</small></p>
  </header>
  <p>Новая кофейня откроется у парка.</p>
  <footer><a href="#">Все новости</a></footer>
</article>

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

Программа чтения с экрана позволяет перескочить сразу к <main> или <nav>, не слушая всю шапку. Поисковики лучше понимают, где основной текст. А разработчику проще читать код, в котором вместо десяти одинаковых <div> стоят понятные имена.

Частая ошибка

Страница целиком из <div> работает, но ничего не сообщает о себе — такую разметку называют «div-суп». Сначала подумайте, есть ли подходящий смысловой тег, и только если нет — берите <div>. И помните: <main> на странице один, а <section> без заголовка обычно стоит заменить на <div>.