Семантика в HTML нужна не только для SEO. Она делает страницу понятной: тебе, поисковику и людям, которые используют скринридеры.

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

Шаг 1. Собираем базовый каркас документа

Сначала создаем минимальную структуру: язык, кодировку, viewport и корневые блоки страницы.

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Семантическая страница</title>
</head>
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>
</html>

Шаг 2. Добавляем шапку и навигацию

В header размещаем логотип/название и меню. Само меню оформляем через nav.

<header class="site-header">
  <a class="logo" href="/">Инди Код</a>

  <nav aria-label="Основная навигация">
    <ul>
      <li><a href="/html">HTML/CSS</a></li>
      <li><a href="/javascript">JavaScript</a></li>
      <li><a href="/games">Games</a></li>
    </ul>
  </nav>
</header>

Шаг 3. Описываем смысловые блоки контента

Главная часть страницы — это main. Внутри него используем section для крупных смысловых зон и article для самостоятельного материала.

<main>
  <section aria-labelledby="latest-title">
    <h1 id="latest-title">Свежие материалы по HTML/CSS</h1>

    <article>
      <h2>Как сверстать карточку статьи</h2>
      <p>Разбираем структуру карточки и типичные ошибки новичков.</p>
    </article>
  </section>
</main>

Шаг 4. Не ломаем иерархию заголовков

Обычно на странице один h1. Дальше подзаголовки идут последовательно: h2, h3 и так далее. Это важно и для SEO, и для читаемости.

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

  • Все блоки сделаны через div, без смысла.
  • Несколько h1 на одной странице без причины.
  • section используют только ради отступов, без заголовка.
  • Навигацию ставят в обычный div, а не в nav.

Мини-чеклист перед публикацией

  • Есть header, main, footer.
  • Меню находится в nav.
  • На странице один основной h1.
  • Самостоятельные материалы оформлены как article.

Если этот чеклист зеленый, у тебя уже сильная и понятная HTML-структура.

Обложка книги JavaScript с нуля: учимся программировать, создавая игры

Книга по JavaScript для начинающих

«JavaScript с нуля: учимся программировать, создавая игры»

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

Читать книгу на ЛитРес →