Как правильно разметить страницу семантическими тегами

Короткий ответ

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

<style>
  header, nav, main, aside, footer { padding: 6px 10px; margin: 4px 0; border: 1px dashed silver; }
</style>
 
<header>Logo · <nav><a href="#">Home</a> · <a href="#">Blog</a></nav></header>
<main>
  <article>
    <h1>How we roast coffee</h1>
    <p>An article text…</p>
  </article>
  <aside>Related: Ten ways to brew</aside>
</main>
<footer>© 2026 The Bean</footer>

Что означает каждый тег

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

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

Внешне такие теги ничем не отличаются от <div>. Но программы чтения с экрана показывают по ним карту страницы и позволяют прыгнуть сразу к меню или к основному тексту. Поисковики лучше понимают, где главное, а код легче читать.

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

Семантические теги выбирают по внешнему виду или ставят <section> вместо каждого <div>. Если блок нужен только для оформления — сетки, отступа, фона, — это по-прежнему <div>. Семантический тег описывает смысл содержимого, а не то, как оно выглядит.