<pre> элемент предварительно отформатированного текста HTML

Элемент <pre> HTML представляет предварительно отформатированный текст, который должен отображаться в точности так, как он записан в HTML-файле. Обычно текст отображается шрифтом с одинаковой шириной символов, или моноширинным.

Пробелы внутри этого элемента отображаются так, как записаны, за одним исключением. Если сразу после открывающего тега <pre> указаны один или несколько символов перевода строки, первый символ перевода строки удаляется. Это преобразование выполняет HTML-парсер; оно не применяется при использовании XHTML.

Текстовое содержимое элементов <pre> разбирается как HTML, поэтому, если вы хотите, чтобы текстовое содержимое оставалось обычным текстом, некоторые синтаксические символы, например <, может потребоваться экранировать с помощью соответствующих ссылок на символы. Подробнее см. в разделе Экранирование неоднозначных символов.

Элементы <pre> обычно содержат элементы <code>, <samp> и <kbd>, которые обозначают программный код, вывод программы и пользовательский ввод соответственно.

По умолчанию <pre> является блочным элементом, то есть значение его свойства display по умолчанию — block.

Попробуйте

<pre>
             S
             A
            LUT
             M
            O N
            D  E
            DONT
          JE SUIS
          LA  LAN
          G U E  É
         L O Q U E N
        TE      QUESA
       B  O  U  C  H  E
      O        P A R I S
     T I R E   ET   TIRERA
    T O U             JOURS
   AUX                  A  L
 LEM                      ANDS   - Apollinaire
</pre>

pre {
  font-size: 0.7rem;
  margin: 0;
}

Атрибуты

Этот элемент поддерживает только глобальные атрибуты.

width

Содержит предпочтительное количество символов в строке. Хотя этот атрибут всё ещё реализован, он не оказывает визуального эффекта; чтобы добиться такого эффекта, используйте вместо него CSS-свойство width.

wrap

Это подсказка, указывающая, как должно происходить переполнение. В современных браузерах эта подсказка игнорируется и не оказывает визуального эффекта; чтобы добиться такого эффекта, используйте вместо неё CSS-свойство white-space.

Доступность

Важно предоставлять альтернативное описание для любых изображений или диаграмм, созданных с помощью предварительно отформатированного текста. Альтернативное описание должно чётко и кратко описывать содержимое изображения или диаграммы.

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

Сочетание элементов <figure> и <figcaption>, дополненное атрибутами role ARIA и aria-label у элемента pre, позволяет представить предварительно отформатированный ASCII-арт ASCII как изображение с альтернативным текстом, а figcaption будет служить подписью к изображению.

Пример

<figure>
  <pre role="img" aria-label="ASCII COW">
      ___________________________
  &lt; I'm an expert in my field. &gt;
      ---------------------------
          \   ^__^
           \  (oo)\_______
              (__)\       )\/\
                  ||----w |
                  ||     ||
  </pre>
  <figcaption id="cow-caption">
    A cow saying, "I'm an expert in my field." The cow is illustrated using
    preformatted text characters.
  </figcaption>
</figure>

• Пояснения к рекомендациям MDN по WCAG 1.1
• H86: предоставление текстовых альтернатив для ASCII-арта, смайликов и л33тспика | Рекомендации W3C по WCAG 2.0

Примеры

Базовый пример

HTML

<p>Using CSS to change the font color is easy.</p>
<pre><code>
body {
  color: red;
}
</code></pre>

Результат

Экранирование неоднозначных символов

Предположим, вы хотите показать HTML-код внутри элемента <pre>. Последовательности символов, определяющие допустимые HTML-теги (начинающиеся с < и заканчивающиеся на >), отображаться не будут. Чтобы показать символы тегов как текст, необходимо экранировать как минимум символ < с помощью ссылки на соответствующий символ, чтобы эти последовательности больше не определяли допустимые теги.

На самом деле HTML-парсер рассматривает большинство символов как обычный текст, кроме случаев, когда они находятся в определённых контекстах. Например, < code допустимо, а <code будет разобрано неправильно; &am; допустимо, а & — нет. Тем не менее рекомендуется экранировать все неоднозначные символы, чтобы избежать путаницы, особенно если вы программно генерируете HTML и вставляете содержимое <pre>. В таком случае можно руководствоваться следующим правилом экранирования символов:

1. Сначала запишите содержимое так, как вы хотите видеть его в HTML-документе.
2. Замените все амперсанды (&) на &. Выполните этот шаг первым, чтобы новые символы &, появившиеся на следующем шаге, не были экранированы.
3. Замените все символы < на <.

В результате содержимое должно отображаться так, как задумано. Заменять другие символы синтаксиса HTML необязательно (например, > на >, " на " и ' на '), но это не повредит.

HTML

<pre><code>
let i = 5;

if (i &lt; 10 &amp;&amp; i &gt; 0)
  return &quot;Single Digit Number&quot;
</code></pre>

Результат

Техническая сводка

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

Совместимость с браузерами

См. также

• CSS: white-space, word-break
• Ссылка на символ
• Связанные элементы: <code>, <samp>, <kbd>