Параграфы и контейнеры

Элементы <p>, <div>, <span> и другие текстовые/контейнерные теги формируют основу текстового контента и группировки элементов.

Зачем нужно

Текстовый контент -- ядро большинства сайтов. Параграфы структурируют текст, контейнеры группируют элементы для стилизации и логической организации. Правильный выбор элемента влияет на семантику, доступность и SEO.

Где используется

  • Статьи, блоги, документация
  • Любая веб-страница с текстом
  • Компоненты UI

Предпосылки

Параграф <p>

Блочный элемент для абзаца текста:

<p>Первый абзац текста. Может содержать <strong>жирный</strong>,
<em>курсив</em>, <a href="#">ссылки</a> и другие строчные элементы.</p>

<p>Второй абзац. Между параграфами браузер автоматически добавляет отступ
(margin сверху и снизу).</p>

Нельзя вкладывать блочные элементы в <p>:

<!-- НЕПРАВИЛЬНО: браузер разорвёт <p> -->
<p>Текст <div>блок внутри</div> ещё текст</p>
<!-- Станет: <p>Текст</p><div>блок внутри</div> ещё текст<p></p> -->

<!-- ПРАВИЛЬНО -->
<p>Текст</p>
<div>Блок</div>
<p>Ещё текст</p>

Контейнеры <div> и <span>

<div> -- блочный контейнер

Универсальный блочный контейнер без семантического значения. Используется для группировки и стилизации:

<!-- Обёртка для стилей -->
<div class="card">
  <div class="card__header">
    <h2>Заголовок карточки</h2>
  </div>
  <div class="card__body">
    <p>Содержимое карточки.</p>
  </div>
  <div class="card__footer">
    <button>Подробнее</button>
  </div>
</div>

Правило: если можно заменить <div> на семантический элемент (<section>, <article>, <nav>, <aside>) -- замени.

<span> -- строчный контейнер

Универсальный строчный контейнер без семантики:

<p>Цена: <span class="price">1 500</span> <span class="currency">руб.</span></p>

<p>Статус: <span class="status status--active">Активен</span></p>

<span> полезен когда нужно стилизовать часть текста, но ни один семантический строчный элемент не подходит.

Переносы и разделители

<br> -- перенос строки

<!-- Адрес (естественный перенос) -->
<address>
  ул. Пушкина, д. 10<br>
  Москва, 123456<br>
  Россия
</address>

<!-- Стихи -->
<p>
  Мороз и солнце; день чудесный!<br>
  Ещё ты дремлешь, друг прелестный —
</p>

Не используй <br> для отступов -- для этого есть CSS margin/padding.

<wbr> -- возможное место переноса

<!-- Длинный URL может переноситься в указанных точках -->
<p>Документация доступна по адресу:
  https://developer.<wbr>mozilla.<wbr>org/<wbr>ru/<wbr>docs/<wbr>Web/<wbr>HTML
</p>

<!-- Длинное слово -->
<p>Сверх<wbr>длинно<wbr>составное<wbr>немецкое<wbr>слово</p>

<hr> -- тематический разделитель

<article>
  <h2>Глава 1</h2>
  <p>Содержимое первой главы...</p>

  <hr>

  <h2>Глава 2</h2>
  <p>Содержимое второй главы...</p>
</article>

<hr> -- это тематический разделитель (thematic break), а не просто линия. Он обозначает смену темы или сцены.

Предформатированный текст и код

<pre> -- сохранение форматирования

Сохраняет пробелы, табы и переносы строк:

<pre>
  Этот    текст
  сохраняет   все
    пробелы и
      переносы.
</pre>

<code> -- фрагмент кода

Строчный элемент для кода:

<p>Используйте <code>console.log</code> для отладки.</p>
<p>Свойство <code>display: flex</code> включает flexbox.</p>

<pre> + <code> -- блок кода

<pre><code class="language-javascript">
function greet(name) {
  return `Привет, ${name}!`;
}

console.log(greet('Мир'));
</code></pre>

<kbd> -- клавиатурный ввод

<p>Нажмите <kbd>Ctrl</kbd> + <kbd>S</kbd> чтобы сохранить.</p>
<p>Откройте DevTools: <kbd>F12</kbd> или <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></p>

<samp> -- вывод программы

<p>Терминал выведет: <samp>Hello, World!</samp></p>

<var> -- переменная

<p>Площадь прямоугольника: <var>S</var> = <var>a</var> &times; <var>b</var></p>

Цитаты

<blockquote> -- блочная цитата

<blockquote cite="https://example.com/source">
  <p>Веб -- для всех. Это фундаментальный принцип.</p>
  <footer>-- <cite>Тим Бернерс-Ли</cite></footer>
</blockquote>

<q> -- строчная цитата

<p>Как сказал Тим Бернерс-Ли:
  <q cite="https://example.com">Веб -- для всех</q>.
</p>
<!-- Браузер автоматически добавит кавычки -->

<cite> -- название произведения

<p>Книга <cite>Чистый код</cite> Роберта Мартина.</p>

Другие текстовые элементы

<!-- <abbr> -- аббревиатура с расшифровкой -->
<p><abbr title="HyperText Markup Language">HTML</abbr> -- язык разметки.</p>

<!-- <dfn> -- определение термина -->
<p><dfn>Семантика</dfn> -- использование элементов в соответствии с их значением.</p>

<!-- <small> -- мелкий шрифт (копирайт, примечания) -->
<footer>
  <p><small>&copy; 2026 Компания. Все права защищены.</small></p>
</footer>

<!-- <s> -- неактуальная информация (зачёркнутый) -->
<p>Цена: <s>2000 руб.</s> <strong>1500 руб.</strong></p>

<!-- <del> и <ins> -- удалённый и вставленный текст -->
<p>Цена: <del>2000</del> <ins>1500</ins> руб.</p>

<!-- <mark> -- выделение -->
<p>Результаты для <mark>HTML</mark>: найдено 42 страницы.</p>

<!-- <sub> и <sup> -- подстрочный/надстрочный -->
<p>H<sub>2</sub>O -- формула воды.</p>
<p>E = mc<sup>2</sup></p>

<!-- <time> -- дата/время -->
<p>Опубликовано <time datetime="2026-04-06">6 апреля 2026</time></p>

<!-- <data> -- машиночитаемое значение -->
<p>Товар: <data value="SKU-12345">Клавиатура</data></p>

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

Ошибка Почему плохо Как правильно
<br><br> для отступов Семантически бессмысленно Используй CSS margin
<div> вместо <p> для текста Потеря семантики <p> для абзацев
Блок внутри <p> Браузер разорвёт параграф Блочные элементы вне <p>
<b> вместо <strong> <b> не несёт семантики важности <strong> для важного текста
<i> вместо <em> <i> не несёт семантики акцента <em> для акцентирования
<div> для всего Div soup Семантические элементы

Практика

  1. Создай страницу с параграфами, цитатами (<blockquote>, <q>), кодом (<pre><code>)
  2. Используй <abbr>, <time>, <mark> в тексте
  3. Проверь, что <br> используется только для естественных переносов (адрес, стихи), а не для отступов
  4. Открой DevTools и убедись, что <p> нельзя вложить в <p> -- браузер автозакроет первый
  5. Создай блок кода с <pre><code> и стилизуй его через CSS

Связанные темы

Ресурсы