<pre>: Предварительно отформатированный текстовый элемент

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Этот элемент включает в себя только глобальные атрибуты.

cols

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

width

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

wrap

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

<p>Использовать CSS для изменения цвета шрифта легко.</p>
<pre>
body {
  color: red;
}
</pre>

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

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

Комбинация элементов <figure> и <figcaption>, дополненная id и ARIA role и aria-labelledby, позволяет объявить предварительно отформатированный текст как изображение, а figcaption служит альтернативным описанием изображения.

<figure role="img" aria-labelledby="cow-caption">
  <pre>
  ____________________________
<  Я эксперт в своей области.  >
  ----------------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  </pre>
  <figcaption id="cow-caption">
     Корова говорит: «Я эксперт в своей области». Корова проиллюстрирована с использованием предварительно отформатированных текстовых символов.
  </figcaption>
</figure>

• MDN Understanding WCAG, Guideline 1.1 explanations
• H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0

• CSS: white-space, word-break
• Связанный элемент: <code>