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

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

Категории контента Основной поток, Явный контент
Разрешённый контент Фразовый контент
Tag omission Нет, открывающий и закрывающий теги обязательны.
Разрешённые родители Любой элемент, который принимает содержимое потока
Неявная роль ARIA Нет соответствующей роли
Разрешённые роли ARIA Любые
Интерфейс DOM HTMLPreElement (en-US)

Атрибуты

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

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

Пример

HTML

<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>

Характеристики

Спецификация Статус Комментарий
HTML Living Standard
Определение '<pre>' в этой спецификации.
Живой стандарт No significant change from HTML5
HTML5
Определение '<pre>' в этой спецификации.
Рекомендация No significant change from HTML 4.01 Specification
HTML 4.01 Specification
Определение '<pre>' в этой спецификации.
Рекомендация Deprecated the cols attribute

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

BCD tables only load in the browser

Смотреть также