Вёрстка текста в HTML: теги, стилизация и семантика (гайд)

Содержание

1. Введение: почему текст остаётся ядром веба и поисковой оптимизации
2. Каркас документа: структурные теги текста
   • Иерархия заголовков h1–h6
   • Абзацы и параграфы: тег p
   • Перенос строки br и разделитель hr
3. Логическое и визуальное выделение текста
   • Жирный шрифт: strong против b
   • Курсив: em против i
   • Подсветка текста: тег mark
   • Редактирование и вспомогательные теги (del, ins, s, small)
4. Семантическая типографика HTML5 и работа с контекстом
   • Контейнеры текста: article, section, aside
   • Цитаты: blockquote, q и cite
   • Иллюстрации и сниппеты с подписями: figure и figcaption
   • Технический текст: pre и code
5. Стилизация и веб-типографика в CSS
   • Выравнивание текста: text-align и перенос слов
   • Шрифты, размеры и интерлиньяж (font-family, line-height)
   • Форматирование списков: ul, ol и свойство list-style
6. Сводная таблица тегов форматирования текста
7. 7 критических ошибок при вёрстке текста
8. Итоговый шаблон семантической текстовой страницы
9. Часто задаваемые вопросы (FAQ)

1. Почему текст остаётся ядром веба и поисковой оптимизации

Вёрстка текста в HTML is the process (процесс структурирования текстового содержимого с помощью специальных тегов разметки для корректного отображения браузерами и понимания поисковыми системами).

HTML-тег is a fundamental markup element (базовый элемент разметки, указывающий браузеру на тип, семантический вес и предназначение текстового блока).

Семантика в HTML refers to semantic structuring (использование тегов строго по их смысловому значению, а не ради визуального эффекта).

Текст остаётся ключевым каналом передачи информации в интернете. Согласно руководствам Google Search Central по основам поиска, роботы ранжируют страницы на основе анализа текстовых сущностей. Документация MDN Web Docs по основам HTML подчеркивает: более 80% данных на сайтах передаются через текст.

Грамотная вёрстка текста решает сразу три важнейшие задачи: 1. Пользовательский опыт (UX): структурированный материал легко сканируется глазами, снижает показатель отказов (Bounce Rate) и увеличивает время на странице. 2. Поисковая оптимизация (SEO): правильные заголовки и логические акценты подсказывают алгоритмам ключевые сущности, формируя кликабельные быстрые ответы (Featured Snippets). 3. Доступность (Accessibility / a11y): программы экранного доступа озвучивают текст с правильными смысловыми интонациями и позволяют незрячим пользователям перемещаться по заголовкам.

Фундаментальный принцип современного веб-стандарта: HTML отвечает исключительно за структуру и смысл (семантику), а CSS — за визуальное оформление (стиль). Любая попытка стилизовать текст устаревшими тегами вроде <font> или злоупотреблением <b> разрушает архитектуру проекта.

2. Каркас документа: структурные теги текста

Структурные теги формируют скелет документа. Согласно спецификации WHATWG HTML Sectioning Specification, без явных структурных контейнеров браузер воспринимает контент как недифференцированный поток данных.

Иерархия заголовков h1–h6

Заголовки уровней от <h1> до <h6> определяют логическую иерархию документа: * <h1> — главный заголовок документа (тема страницы). На странице должен присутствовать строго один заголовок первого уровня. * <h2> — основные смысловые разделы статьи. * <h3> — подразделы внутри <h2>. * <h4>–<h6> — мелкие смысловые блоки внутри подразделов.

<!-- Главный заголовок документа: задается ровно один раз на всю страницу -->
<h1>Вёрстка текста в HTML: базовое руководство</h1>

<!-- Основной тематический раздел статьи -->
<h2>Работа со шрифтами</h2>

<!-- Подраздел, детально раскрывающий тему основного раздела -->
<h3>Подключение веб-шрифтов через Google Fonts</h3>

Важное правило иерархии: Никогда не перескакивайте через уровни заголовков (например, с <h2> сразу на <h4>). Это нарушает логику дерева документа (DOM) и дезориентирует скринридеры. Если заголовок <h3> кажется слишком крупным, уменьшайте его через CSS-свойство font-size, а не подменяйте тегом <h5>.

Подробнее о правилах иерархии и SEO-влиянии читайте в нашем детальном материале:
👉 Структурные теги в HTML: подробный разбор заголовков h1–h6, абзацев p, br и hr.

Абзацы и параграфы: тег p

Тег <p> (paragraph) представляет собой блочный элемент для форматирования смысловых абзацев текста. По умолчанию браузеры автоматически добавляют вертикальные внешние отступы (margin-block) сверху и снизу от каждого абзаца.

<!-- Первый абзац текста: отдельный законченный фрагмент мысли -->
<p>
  Текст внутри абзаца автоматически форматируется браузером с учётом ширины
  родительского контейнера. Браузер объединяет несколько идущих подряд пробелов в один.
</p>

<!-- Второй абзац текста: отделяется от первого визуальным вертикальным отступом -->
<p>
  Внутрь тега p нельзя помещать другие блочные элементы, такие как div, ul или table.
</p>

Перенос строки br и разделитель hr

• Тег <br> (line break) выполняет принудительный перенос строки внутри текстового потока без создания нового абзаца. Он используется исключительно там, где разрыв строки имеет смысловое значение: в стихах, адресах доставки или программных логах. Использовать <br><br> для создания расстояния между блоками — грубейшая ошибка вёрстки. Для этого применяется CSS margin.
• Тег <hr> (horizontal rule) в современном стандарте HTML5 означает не просто декоративную черту, а тематический разрыв (смену темы повествования или переход к заключению).

<!-- Пример легитимного использования тега br в контактных данных -->
<p>
  ООО «Веб-Технологии»<br>
  ул. Строителей, д. 10, оф. 402<br>
  г. Москва, 101000
</p>

<!-- Тематический переход к следующей части статьи -->
<hr>

<p>
  В следующей главе мы перейдем к правилам оформления логических акцентов.
</p>

3. Логическое и визуальное выделение текста

В HTML существует строгое разделение между физическим отображением (как текст выглядит) и семантическим значением (что текст означает). Как подчеркивается в MDN Text Formatting Guide, это наглядно видно на парах тегов <strong>/<b> и <em>/<i>.

Жирный шрифт: strong против b

Внешне оба тега по умолчанию делают текст полужирным (font-weight: bold), однако их смысловая нагрузка принципиально различается: * <strong> — сообщает браузеру, поисковикам и скринридерам о высокой важности фрагмента (срочное предупреждение, критический вывод). * <b> — привлекает визуальное внимание читателя без придания тексту дополнительной семантической важности (ключевые слова в карточке товара, наименование продукта в обзоре).

<!-- strong указывает на важность информации: скринридер изменит интонацию -->
<p>
  <strong>Внимание!</strong> Никогда не передавайте пароли по открытым каналам связи.
</p>

<!-- b привлекает внимание к терминам или сущностям без изменения важности -->
<p>
  В нашем каталоге представлен новый ноутбук <b>ZenBook Pro 15</b> с ярким экраном.
</p>

Курсив: em против i

• <em> (emphasis) — логическое ударение (эмфаза), меняющее смысл всей фразы при прочтении вслух.
• <i> (idiomatic text) — выделение текста другим голосом или настроением: латинские термины (Homo sapiens), технические обозначения, мысли героя книги.

<!-- em меняет логический акцент: ударение падает на выделенное слово -->
<p>Я <em>не брал</em> эти документы вчера. (смысл: отрицание факта взятия)</p>
<p>Я не брал <em>эти</em> документы вчера. (смысл: взял какие-то другие)</p>

<!-- i выделяет иноязычный термин или название без изменения интонации предложения -->
<p>В медицине это явление называют термином <i>placebo effect</i>.</p>

Хотите знать больше о различиях скринридеров и влиянии на SEO? Читайте наш гайд:
👉 Выделение текста в HTML: подробное сравнение strong, b, em, i и mark.

Подсветка текста: тег mark

Тег <mark> указывает на текст, подсвеченный или помеченный из-за его актуальности в текущем контексте. Типичный сценарий — подсветка найденных поисковых запросов в результатах выдачи. По умолчанию браузеры отображают его с желтым фоновым цветом (background-color: yellow).

<!-- Пример подсветки ключевого слова при реализации поиска по странице -->
<p>
  По запросу «семантика» найдено: правильная <mark>семантика</mark> вёрстки
  улучшает восприятие сайта как пользователями, так и поисковиками.
</p>

Редактирование и вспомогательные теги (del, ins, s, small)

Для указания истории изменений документа используются семантические маркеры: * <del> — удалённый фрагмент текста (перечёркнут по умолчанию). * <ins> — добавленный в документ фрагмент (подчёркнут по умолчанию). Идеально подходит для скидок в интернет-магазинах в паре с <del>. * <s> — текст, который больше не актуален (но не был удалён из документа). * <small> — мелкий текст примечаний, авторских прав, дисклеймеров и сносок.

<!-- Семантически корректная разметка старой и новой цены товара со скидкой -->
<p>
  Цена со скидкой: <del>5 000 ₽</del> <strong>3 990 ₽</strong>
</p>

<!-- Мелкий текст юридического уведомления и копирайта -->
<p>
  <small>© 2026 Все права защищены. Цены не являются публичной офертой.</small>
</p>

4. Семантическая типографика HTML5 и работа с контекстом

Официальный стандарт W3C HTML5 Specification on Grouping Content ввёл специализированные контейнеры, позволяющие поисковым системам и алгоритмам режима чтения (Safari Reader, Firefox Reader View) моментально определять границу полезного контента.

Контейнеры текста: article, section, aside

• <article> — самодостаточный фрагмент контента, который имеет законченный смысл вне контекста страницы (статья блога, карточка товара, пост в ленте соцсети, комментарий пользователя).
• <section> — логический раздел внутри документа или статьи, объединенный общей темой. Согласно стандарту W3C, секция практически всегда должна содержать собственный заголовок (<h2>–<h6>).
• <aside> — косвенно связанный контент (боковая панель, врезка, сноска автора, блок с рекомендуемыми статьями).

<!-- Основной независимый материал страницы -->
<article>
  <!-- Заголовок независимой статьи -->
  <h2>Как настроить типографику в CSS</h2>

  <!-- Логический смысловой раздел внутри статьи -->
  <section>
    <h3>Выбор шрифтовой пары</h3>
    <p>Для заголовков лучше использовать выразительный шрифт с засечками...</p>
  </section>

  <!-- Боковая врезка со сноской автора -->
  <aside>
    <p><strong>Совет эксперта:</strong> Не используйте более двух шрифтов на одном сайте.</p>
  </aside>
</article>

Глубокий разбор логики вложенности контейнеров доступен в отдельной статье:
👉 Семантическая вёрстка текста в HTML5: article, section, figure и blockquote.

Цитаты: blockquote, q и cite

Для оформления цитат в HTML предусмотрена строгая триада элементов: 1. <blockquote> — развернутая блочная цитата. Атрибут cite может содержать URL-ссылку на первоисточник цитаты. 2. <q> — короткая строчная цитата внутри абзаца. Браузер сам подставляет нужные кавычки (с учетом атрибута lang текущего документа). 3. <cite> — название произведения, книги, исследования или нормативного акта (в HTML5 внутри <cite> указывается название источника, а не имя человека).

<!-- Оформление блочной развернутой цитаты с указанием источника -->
<blockquote cite="https://www.w3.org/TR/html52/">
  <p>
    Семантические элементы помогают браузерам и поисковым системам понимать
    значение веб-страниц, а не только их визуальное представление.
  </p>
  <footer>
    — <cite>Спецификация HTML5 W3C</cite>
  </footer>
</blockquote>

<!-- Оформление встроенной строчной цитаты с автоматическими кавычками -->
<p>
  Как отмечал автор статьи, <q>чистый код начинается с правильной структуры</q>,
  что подтверждается практикой веб-разработки.
</p>

Иллюстрации и сниппеты с подписями: figure и figcaption

Контейнер <figure> изолирует визуальные или текстовые элементы (графики, диаграммы, листинги программного кода), а <figcaption> задаёт официальную текстовую подпись к ним:

<!-- Семантическая иллюстрация с поясняющей подписью -->
<figure>
  <img src="/images/typography-hierarchy.png" alt="Схема иерархии заголовков в HTML" width="800" height="450">
  <figcaption>Рис. 1. Иерархия уровней заголовков h1–h6 на веб-странице.</figcaption>
</figure>

Технический текст: pre и code

• <code> — обозначает строчный фрагмент программного кода, имя функции или название переменной (по умолчанию отображается моноширинным шрифтом).
• <pre> — сохраняет исходные пробелы, табуляции и переносы строк, как они написаны в коде. В связке <pre><code> они формируют стандартный блок отображения листингов кода.

<!-- Связка pre и code для отображения многострочного фрагмента кода -->
<pre><code class="language-html">&lt;p&gt;
  Пример кода с сохранением всех пробелов и переносов.
&lt;/p&gt;</code></pre>

Форматирование текста онлайн
Автоматическая и ручная разметка текста тегами заголовков, списков и абзацев. Поддерживает Markdown-синтаксис и экспорт в 1 клик. Автоматические абзацы, очистка лишних стилей и подготовка контента к публикации.

👉 Конвертер текста в HTML онлайн

5. Стилизация и веб-типографика в CSS

HTML задает структуру, но читать сплошной текст без типографической настройки тяжело. Согласно спецификации W3C CSS Text Module Level 3, профессиональная веб-типографика в CSS опирается на принципы удобочитаемости и контраста.

Выравнивание текста: text-align и перенос слов

Свойство text-align управляет выравниванием строчного контента внутри блока: * text-align: left; — левосторонний флаг (золотой стандарт чтения для европейских языков). * text-align: center; — выравнивание по центру (допустимо только для коротких заголовков или плашек). * text-align: justify; — выравнивание по ширине страницы. В вебе использовать его без переносов крайне опасно, так как появляются неравномерные пробелы («речные коридоры»), затрудняющие чтение. При использовании justify всегда подключайте hyphens: auto.

/* Базовый класс для текста статьи с идеальной удобочитаемостью */
.article-text {
  /* Выравнивание по левому краю: предотвращает дыры между словами */
  text-align: left;

  /* Автоматический перенос длинных слов по слогам */
  hyphens: auto;

  /* Ограничение длины строки: 65-75 символов для комфортного чтения */
  max-width: 68ch;
}

Шрифты, размеры и интерлиньяж (font-family, line-height)

1. Единицы измерения: задавайте размеры шрифта (font-size) в относительных единицах rem, а не фиксированных px. Это сохраняет доступность для пользователей, увеличивших масштаб шрифта в браузере.
2. Межстрочный интервал (line-height): задавайте коэффициент без единиц измерения (например, 1.6, а не 24px или 160%). Для основного текста идеален интервал 1.5–1.7, а для крупных заголовков — 1.1–1.25.
3. Безопасное подключение шрифтов: всегда указывайте системный шрифт-запасник (fallback stack) и используйте свойство font-display: swap для предотвращения скачков макета (CLS):

/* Подключение шрифтов без сдвига макета и с правильным интерлиньяжем */
body {
  /* Стек шрифтов: фирменный шрифт -> системный аналог -> стандартный гротеск */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Базовый размер шрифта: 1rem = 16px по умолчанию */
  font-size: 1.125rem; /* 18px для комфортного чтения с экранов */

  /* Межстрочный интервал: обеспечивает легкое скольжение взгляда по строкам */
  line-height: 1.6;

  /* Цвет текста: мягкий темный оттенок вместо жесткого #000 снижает усталость глаз */
  color: #1f2937;
}

/* Настройка заголовка h2 */
h2 {
  font-size: 1.875rem;
  line-height: 1.25;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

Форматирование списков: ul, ol и свойство list-style

Списки незаменимы для структурирования информации. По умолчанию браузеры добавляют к спискам внутренний отступ padding-left: 40px и дефолтные маркеры. В современном CSS маркеры легко кастомизируются через псевдоэлемент ::marker:

/* Кастомизация маркеров ненумерованного списка */
.custom-list {
  /* Сброс стандартных браузерных отступов */
  margin: 1.5rem 0;
  padding-left: 1.5rem;
}

/* Стилизация маркеров списка с помощью псевдоэлемента ::marker */
.custom-list li::marker {
  /* Окрашиваем точку маркера в фирменный акцентный цвет бренда */
  color: #2563eb;
  font-size: 1.2em;
}

Полный курс по оформлению текста и свойствам CSS читайте в нашем гиде:
👉 Стилизация текста в CSS: выравнивание text-align, шрифты, интервалы и списки.

6. Сводная таблица тегов форматирования текста

Для удобства верстальщиков ниже собрана полная матрица всех основных тегов работы с текстом:

7. 7 критических ошибок при вёрстке текста

По данным всемирного исследования WebAIM Screen Reader Survey Results, свыше 67% пользователей со скринридерами используют навигацию исключительно по заголовкам. Нарушение правил верстки лишает таких пользователей доступа к контенту.

1. Несколько заголовков <h1> на одной странице: Хотя стандарт HTML5 технически допускает использование нескольких <h1> внутри тегов <article>, поисковые роботы Яндекса и Google по-прежнему ожидают один главный <h1>, формулирующий тему страницы.
2. Перескок через уровни заголовков: Использование <h3> сразу после <h1> ломает дерево доступности для скринридеров и снижает баллы технического качества сайта в аудитах Lighthouse.
3. Использование тегов оформления ради визуального эффекта: Выделение заголовков через тег <b> или создание пустот через <br><br><br> разрушает архитектуру сайта. Все декоративные задачи должны решаться в CSS.
4. Неправильное выравнивание по ширине (text-align: justify): Без подключенного свойства hyphens: auto текст покрывается разрывами и «дырами» между словами, что вызывает дискомфорт у читателей, особенно на мобильных смартфонах.
5. Фиксированный размер шрифта в пикселях (px): Задание шрифтов через жесткие пиксели мешает пользователям со слабым зрением масштабировать текст стандартными настройками операционной системы. Всегда используйте единицы rem.
6. Оборачивание блочных элементов в параграф <p>: Помещение тегов <div>, <ul> или <table> внутрь <p> является грубым нарушением валидности HTML. Браузер принудительно закроет тег <p> перед первым же блочным элементом, исказив верстку.
7. Игнорирование семантики цитат: Использование тега <cite> для имени человека, а не названия книги или документа противоречит стандарту W3C HTML5.

8. Итоговый шаблон семантической текстовой страницы

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

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Вёрстка текста в HTML: эталонный пример</title>
  <style>
    /* Базовые стили для комфортного чтения */
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      line-height: 1.6;
      color: #1f2937;
      background-color: #f9fafb;
      margin: 0;
      padding: 2rem;
    }
    .article-container {
      max-width: 720px;
      margin: 0 auto;
      background: #ffffff;
      padding: 2.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
    h1 { font-size: 2.25rem; line-height: 1.2; margin-bottom: 1.5rem; }
    h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.75rem; }
    blockquote {
      border-left: 4px solid #3b82f6;
      margin: 1.5rem 0;
      padding: 0.5rem 1rem;
      background-color: #eff6ff;
      border-radius: 0 8px 8px 0;
    }
    figure { margin: 2rem 0; text-align: center; }
    figcaption { font-size: 0.875rem; color: #6b7280; margin-top: 0.5rem; }
    code { background: #f3f4f6; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.9em; }
  </style>
</head>
<body>

  <!-- Основной семантический контейнер лонгрида -->
  <article class="article-container">

    <!-- Главный заголовок статьи первого уровня -->
    <h1>Современная веб-типографика в HTML5</h1>

    <!-- Вводный параграф с датой публикации через тег time -->
    <p>
      Опубликовано: <time datetime="2026-10-14">14 октября 2026 года</time>.
      В этой статье мы рассмотрим, как соединить семантику с визуальной эстетикой.
    </p>

    <!-- Первый тематический раздел -->
    <section>
      <h2>Роль семантической разметки</h2>
      <p>
        Использование тега <code>&lt;article&gt;</code> сообщает алгоритмам поисковых систем,
        что данный контент представляет собой <strong>самостоятельный материал</strong>,
        готовый к синдикации.
      </p>

      <!-- Пример развернутой цитаты -->
      <blockquote cite="https://html.spec.whatwg.org/">
        <p>Элемент article представляет собой законченную или самостоятельную композицию в документе.</p>
        <footer>— <cite>Спецификация WHATWG</cite></footer>
      </blockquote>
    </section>

    <!-- Второй тематический раздел со списком -->
    <section>
      <h2>Ключевые преимущества</h2>
      <ul>
        <li>Увеличение скорости индексации страниц.</li>
        <li>Повышение доступности для программ чтения с экрана.</li>
        <li>Снижение ошибок отображения в мобильных браузерах.</li>
      </ul>
    </section>

    <!-- Блок иллюстрации с поясняющей подписью -->
    <figure>
      <img src="https://via.placeholder.com/640x360" alt="Иллюстрация верстки текста" style="max-width: 100%; border-radius: 8px;">
      <figcaption>Демонстрация чистого макета статьи</figcaption>
    </figure>

  </article>

</body>
</html>

9. Часто задаваемые вопросы (FAQ)

Сколько заголовков h1 можно использовать на странице?

Согласно лучшим практикам поисковой оптимизации (SEO) и доступности, на странице рекомендуется использовать строго один заголовок <h1>. Несмотря на то, что спецификация HTML5 формально допускает свой <h1> внутри каждого контейнера <article> или <section>, алгоритмы Google и Яндекс отдают предпочтение страницам с единым однозначным главным заголовком.

В чём разница между тегами strong и b?

Тег <strong> наделен высокой семантической важностью — он сообщает поисковым системам и программам экранного доступа (скринридерам), что текст имеет критическое значение, и скринридер выделяет его интонацией. Тег <b> предназначен исключительно для привлечения визуального внимания читателя без изменения смыслового веса фразы.

Можно ли вкладывать списки ul внутрь параграфа p?

Нет, стандарт HTML строго запрещает вкладывать блочные элементы (такие как <ul>, <ol>, <div>, <table>) внутрь тега <p>. При обнаружении блочного тега внутри абзаца браузер автоматически разорвет тег <p>, что приведёт к нарушению разметки и ошибкам валидации.

Почему не стоит делать отступы с помощью нескольких тегов br?

Тег <br> предназначен исключительно для смыслового переноса строки (в стихах или почтовых адресах). Использование нескольких <br><br> подряд создает пустые разрывы, которые скринридеры читают как пустоты, а при адаптивном отображении на смартфонах такие отступы ломают гармонию дизайна. Все внешние отступы между блоками необходимо задавать через CSS-свойство margin.