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

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

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

Атрибуты

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

cols
Содержит предпочтительное количество символов, которое должна иметь строка. Это был нестандартный синоним width. Чтобы добиться такого эффекта, используйте CSS width.
width
Содержит предпочтительное количество символов, которое должна иметь строка. Хотя технически он все еще реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте 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

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
preChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
cols
УстаревшаяНестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Нет поддержки 1 — 29IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетFirefox Android Нет поддержки 4 — 29Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет
width
УстаревшаяНестандартная
Chrome Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Specifying the width attribute has no layout effect.
Edge Полная поддержка 12
Замечания
Полная поддержка 12
Замечания
Замечания Specifying the width attribute has no layout effect.
Firefox Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания Since Firefox 29, specifying the width attribute has no layout effect.
IE Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Specifying the width attribute has no layout effect.
Opera Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Specifying the width attribute has no layout effect.
Safari Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Specifying the width attribute has no layout effect.
WebView Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Specifying the width attribute has no layout effect.
Chrome Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Specifying the width attribute has no layout effect.
Firefox Android Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Since Firefox 29, specifying the width attribute has no layout effect.
Opera Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Specifying the width attribute has no layout effect.
Safari iOS Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Specifying the width attribute has no layout effect.
Samsung Internet Android Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания Specifying the width attribute has no layout effect.
wrap
УстаревшаяНестандартная
Chrome ? Edge ? Firefox Полная поддержка 1IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android Полная поддержка 4Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах
Смотрите замечания реализации.
Смотрите замечания реализации.

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