Текст — основа большинства сайтов. Заголовки разного уровня, абзацы, маркированные и нумерованные списки встречаются буквально на каждой странице: в статьях, карточках товаров, меню, разделах «Преимущества» и «Как это работает». Умение правильно размечать текст делает страницу понятной и человеку, и поисковику.

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

Что уже умеем / что добавим

Вы уже знаете, как устроен HTML-документ и как вкладываются элементы. Теперь наполним страницу настоящим содержанием. В сквозной проект-лендинг мы добавим новую секцию с подзаголовком и списком преимуществ курса.

Что вы узнаете в рамках статьи

• Как работают заголовки шести уровней h1–h6 и зачем нужна их иерархия.
• Как разбивать текст на абзацы тегом p.
• Как создавать маркированные списки ul.
• Как создавать нумерованные списки ol.
• Почему пункт списка li нельзя использовать сам по себе.

Ключевые термины

• Заголовок — элемент h1–h6, обозначающий название раздела; чем больше число, тем ниже уровень.
• Абзац — элемент p, блок обычного текста.
• Маркированный список — ul (unordered list), пункты помечаются точками.
• Нумерованный список — ol (ordered list), пункты нумеруются автоматически.
• Пункт списка — li (list item), одна строка внутри ul или ol.

Заголовки: шесть уровней

В HTML есть шесть уровней заголовков — от h1 до h6. h1 — самый главный и крупный, h6 — самый мелкий. Уровни задают иерархию, как оглавление в книге: h1 — название, h2 — крупные разделы, h3 — подразделы внутри них.

<h1>Курс по вёрстке</h1>
<h2>Программа обучения</h2>
<h3>Модуль 1. HTML</h3>

В браузере заголовки отобразятся разным размером: h1 крупнее h2, а h2 крупнее h3. Важно выбирать уровень по смыслу, а не по размеру: если нужен заголовок помельче, его позже уменьшат стилями, а «сломанная» иерархия запутает поисковые системы и программы для незрячих.

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

Абзацы

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

<p>Этот курс подойдёт даже тем, кто никогда не писал код.</p>
<p>Мы двигаемся от простого к сложному и много практикуемся.</p>

Вы увидите два абзаца, стоящие друг под другом с промежутком. Не пытайтесь разделять текст множеством переносов <br> — для смысловых блоков текста используют именно p. Тег <br> уместен лишь там, где перенос строки — часть содержимого, например в адресе или стихотворении.

Маркированные списки

Когда порядок пунктов не важен (перечень возможностей, преимуществ, ингредиентов), используют маркированный список ul. Каждый пункт оборачивается в li.

<ul>
  <li>Практика с первого урока</li>
  <li>Понятные объяснения</li>
  <li>Готовый проект в портфолио</li>
</ul>

В браузере появится список с маркерами-точками перед каждым пунктом. Обратите внимание на структуру: li всегда лежат внутри ul, а не сами по себе. Пункт списка без списка-контейнера — это ошибка разметки.

Нумерованные списки

Если порядок важен — шаги инструкции, рейтинг, этапы, — берут нумерованный список ol. Синтаксис такой же, но контейнер другой:

<ol>
  <li>Установите редактор кода</li>
  <li>Создайте файл index.html</li>
  <li>Откройте страницу через Live Server</li>
</ol>

Браузер сам расставит номера 1, 2, 3 — вручную их писать не нужно. Если вы поменяете пункты местами или добавите новый, нумерация пересчитается автоматически. В этом и смысл ol: вы описываете порядок, а нумерацию берёт на себя браузер.

Применяем в проекте

Добавим на лендинг новую секцию — «Почему стоит выбрать этот курс» — с подзаголовком и маркированным списком преимуществ. Разместим её после титульного блока.

<body>
  <div>
    <h1>Научитесь верстать сайты с нуля</h1>
    <p>Практический курс по HTML и CSS для начинающих. От первой страницы до готового лендинга.</p>
  </div>

  <div>
    <h2>Почему стоит выбрать этот курс</h2>
    <ul>
      <li>Практика с первого урока</li>
      <li>Объяснения простым языком</li>
      <li>Готовый проект в портфолио</li>
    </ul>
  </div>
</body>

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

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

• li вне списка.
  Пункт li обязан находиться внутри ul или ol, иначе разметка некорректна.
• Выбор заголовка по размеру, а не по смыслу.
  Уровень заголовка отражает иерархию; внешний размер потом задаётся стилями.
• Несколько h1 на странице.
  Главный заголовок обычно один; для подразделов берите h2–h6.
• Ручная нумерация в ol.
  Не пишите цифры в тексте пунктов — браузер нумерует их сам.

Итоги

Поздравляем — теперь ваша страница умеет говорить! Вы освоили заголовки шести уровней, научились делить текст на абзацы и оформлять оба вида списков. Это одни из самых востребованных тегов: без них не обходится ни один реальный сайт. А ваш лендинг вырос — в нём появилась вторая секция со списком преимуществ.

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