Текст и структура страницы: заголовки, списки, семантика

Заголовки

В HTML шесть уровней заголовков — от <h1> до <h6>:

<h1>Рецепты пиццы</h1>
<h2>Тесто</h2>
<h3>Тесто на дрожжах</h3>
<h3>Тесто без дрожжей</h3>
<h2>Соусы</h2>

Они работают как оглавление книги: h1 — название страницы, h2 — главы, h3 — подглавы. Правила простые:

• h1 на странице обычно один;
• уровни не перескакивают: после h2 идёт h3, а не сразу h5;
• заголовок выбирают по смыслу, а не по размеру шрифта — размер настраивается в CSS.

По заголовкам поисковики понимают, о чём страница, а люди с экранными дикторами переходят между разделами.

Абзацы и выделение

<p>Пицца готовится <strong>не дольше 10 минут</strong> при высокой температуре.</p>
<p>Тесто должно <em>отдохнуть</em> хотя бы час.</p>

• <p> — абзац;
• <strong> — важный фрагмент, по умолчанию жирный;
• <em> — смысловое ударение, по умолчанию курсив.

Есть ещё теги <b> и <i>: выглядят так же, но не несут смысла. Если нужно просто сделать текст жирным для красоты — это задача CSS.

Списки

<ul>
  <li>мука</li>
  <li>вода</li>
  <li>дрожжи</li>
</ul>

<ol>
  <li>Замесите тесто.</li>
  <li>Дайте ему подняться.</li>
  <li>Раскатайте и выпекайте.</li>
</ol>

• <ul> — маркированный список, когда порядок не важен;
• <ol> — нумерованный, когда важен;
• <li> — пункт списка.

Списками размечают не только перечисления в тексте: меню сайта — это тоже обычно список ссылок.

Семантика: смысл частей страницы

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

<body>
  <header>
    <p>Пиццерия «Тесто»</p>
    <nav>Меню сайта</nav>
  </header>

  <main>
    <section>
      <h2>Наши пиццы</h2>
    </section>
    <article>
      <h2>Как мы готовим тесто</h2>
    </article>
  </main>

  <footer>
    <p>© 2026 Пиццерия «Тесто»</p>
  </footer>
</body>

А ещё есть <div> — блок без смысла, «просто коробка». Его используют, когда ни один семантический тег не подходит, например для обёртки, нужной только для оформления.

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

<body>
  <header>
    <p>Домашняя кухня</p>
  </header>

  <main>
    <h1>Блины на молоке</h1>

    <h2>Ингредиенты</h2>
    <ul>
      <li>молоко — 500 мл</li>
      <li>яйца — 2 шт.</li>
      <li>мука — 200 г</li>
    </ul>

    <h2>Приготовление</h2>
    <ol>
      <li>Взбейте яйца с молоком.</li>
      <li>Добавьте муку и перемешайте.</li>
      <li>Жарьте на разогретой сковороде.</li>
    </ol>
  </main>

  <footer>
    <p>© 2026 Домашняя кухня</p>
  </footer>
</body>