Тег <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>,.

Актуальность

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


Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023