<pre>

25 января 2023

Тег <pre>используется для отображения предварительно отформатированного текста. Он сохраняет все пробелы и переносы строк, а также отображает содержимое в моноширинном шрифте.

Синтаксис тега <pre>

<pre>
  <!-- Ваш предварительно отформатированный текст здесь -->
</pre>

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <pre> является семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Содержимое тега <pre> представляет собой предварительно отформатированный текст, который должен быть отображён без изменений в моноширинном шрифте.

Примеры использования

В этом примере тег <pre> используется для отображения JavaScript-функции с сохранением форматирования и отображением в моноширинном шрифте:

<pre>
  function factorial(n) {
    if (n === 0) {
      return 1;
    } else {
      return n * factorial(n-1);
    }
  }
</pre>

Здесь тег используется для отображения CSS-стиля с сохранением форматирования и отображением в моноширинном шрифте.

<pre>
  /* Комментарий к CSS-стилю */
  body {
    margin: 0;
    padding: 0;
  }
</pre>

А это пример неправильного использования, здесь тег добавлен для отображения HTML-кода с сохранением пробелов и переносов строк. Содержимое <pre> не должно включать HTML-теги.

<pre>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</pre>

Для чего использовать тег <pre>

Отображение кода программ на веб-страницах.
Отображение CSS-стилей для примера кода.
Отображение отформатированного текста: логов, сообщений об ошибках и так далее.
Отображение HTML-кода для демонстрации или обучения.
Отображение содержимого тега <textarea>, которое должно быть показано без изменений.
Отображение предварительно отформатированного текста для сохранения визуального форматирования
Отображение ASCII-артов.

Атрибуты тега <pre>

У тега нет контентных атрибутов.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <pre> не должен использоваться для вёрстки, так как может нарушить адаптивность сайта.
При использовании атрибутов width или height следует учитывать, что их значения могут привести к обрезанию текста или к неожиданным переносам строк.

Поддержка браузерами

Тег поддерживается всеми современными браузерами. Актуальная информация — на caniuse.

Альтернативные теги

Вместо <pre> можно использовать тег <code> для разметки кода, который должен отображаться в моноширинном шрифте.

Чем заменить тег

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