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

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

Интерактивный пример
--------------------

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

Атрибуты
--------

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

`cols` 
Non-standard

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

`width`

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

`wrap` 
Non-standard

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

Пример
------

### HTML


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

### Результат

Проблемы доступности
--------------------

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

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

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

### Пример


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


* MDN Understanding WCAG, Guideline 1.1 explanations (en-US)
* H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0
Характеристики
--------------

| Specification |
| --- |
| HTML Standard # the-pre-element |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

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