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

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

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

Если вам необходимо отобразить зарезервированные символы, такие как <, >, &, и " внутри тега <pre>, символы необходимо экранировать, используя соответствующие символьные ссылки.

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

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

width Устаревший Нестандартный

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

wrap Нестандартный Устаревший

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

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

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

Комбинация элементов <figure> и <figcaption>, дополненная атрибутами ARIA role и aria-label на элементе pre позволяет объявить предварительно отформатированный графический рисунок 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, эмотиконов и леетспика | 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><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>