HTML тег <pre>
Тег <pre> определяет предварительно отформатированный текст, который отображается точно так, как написан в HTML-файле.
HTML-тег <pre> определяет предварительно отформатированный текст — текст, который отображается точно так, как написан в исходном коде, с сохранением всех пробелов и переносов строк. Браузеры отображают содержимое элемента <pre> моноширинным шрифтом фиксированной ширины. Чаще всего он используется для отображения исходного кода (обычно вместе с тегом <code>) или любого текста, в котором автор управляет точным расположением строк, например поэзии или ASCII-арта.
Почему <pre> сохраняет пробельные символы
По умолчанию браузеры сворачивают пробельные символы: последовательность пробелов, табуляций и переносов строк отображается как один пробел, а переносы строк в HTML-коде не имеют визуального эффекта. Именно поэтому несколько пробелов подряд или нажатие Enter внутри обычного абзаца не меняют вид текста.
Элемент <pre> отказывается от этого поведения. Внутри него каждый пробел, табуляция и перенос строки значимы и отображаются буквально — нет необходимости использовать или <br> для управления отступами. Под капотом это тот же эффект, что и применение CSS-объявления white-space: pre, которое является стилем по умолчанию, назначаемым браузерами тегу <pre>.
Используйте <pre>, когда точное расположение символов имеет значение: листинги кода, вывод командной строки, табличный текст или ASCII-арт.
Синтаксис
Тег <pre> идёт парами. Содержимое размещается между открывающим (<pre>) и закрывающим (</pre>) тегами. Обратите внимание, что текст обычно начинается на строке после открывающего тега, и любые отступы, добавленные внутри источника, появятся в выводе.
Внутри тега <pre> обычно размещают строчные элементы. Хотя блочные элементы разрешены в HTML5, они могут вносить неожиданные пробелы или отступы, поэтому строчные элементы предпочтительнее.
Пример HTML-тега <pre>
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>
<body>
<pre>Spaces
and line breaks
within this element
are shown as typed.
</pre>
</body>
</html>Результат
Шаблон <pre><code> для блоков кода
Каноничный и доступный способ отображения блока исходного кода — вложить элемент <code> внутрь элемента <pre>:
<pre>обеспечивает блочную компоновку и сохраняет пробелы и переносы строк.<code>добавляет семантику: он помечает содержимое как компьютерный код, а не обычный текст.
Вместе они сообщают поисковым системам и вспомогательным технологиям, что именно представляет собой содержимое. Экранные дикторы могут объявлять его как область кода, а библиотеки подсветки синтаксиса (Prism, highlight.js и др.) используют селектор pre > code для раскраски разметки. Использование только <pre> сохранило бы форматирование, но потеряло бы это значение, поэтому именно такая комбинация является рекомендуемым шаблоном.
Пример HTML-тега <pre> с элементом <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>body {
color: orange;
}</code></pre>
</body>
</html>Пробельные символы внутри <pre> буквальны, поэтому размещайте закрывающий </pre> вплотную к коду (как показано выше). Начальные переносы строк и отступы между <pre> и <code> отображаются, именно поэтому глубоко отступленный исходный код может отображаться с нежелательными пустыми строками и ведущими пробелами.
Экранирование <, > и & внутри <pre>
<pre> сохраняет пробельные символы, но не отключает HTML-разбор. Браузер по-прежнему читает его содержимое как разметку. Поэтому если вы хотите отобразить буквальный HTML или что-либо, содержащее символы <, > или &, их необходимо экранировать с помощью HTML-сущностей — иначе браузер попытается интерпретировать их как теги:
| Символ | Сущность |
|---|---|
< | < |
> | > |
& | & |
Например, чтобы отобразить текст <p>Hello & welcome</p>, необходимо написать:
<pre><code><p>Hello & welcome</p></code></pre>Тогда страница отобразит угловые скобки вместо того, чтобы рендерить абзац. Полный список именованных сущностей см. в справочнике HTML Unicode.
Стилизация <pre> и свойство white-space
Браузеры по умолчанию стилизуют <pre> с помощью white-space: pre. Вы можете изменить перенос предварительно отформатированного текста с помощью CSS-свойства white-space:
| Значение | Переносы строк | Пробелы / табуляции | Перенос по словам |
|---|---|---|---|
pre | сохраняются | сохраняются | никогда не переносится (по умолчанию для <pre>) |
pre-wrap | сохраняются | сохраняются | переносится при слишком длинной строке |
pre-line | сохраняются | сворачиваются | переносится при слишком длинной строке |
Поскольку pre никогда не переносит текст, длинная строка кода выйдет за пределы контейнера. Обычное решение — добавить горизонтальную полосу прокрутки с помощью overflow-x: auto, что сохраняет исходное форматирование и позволяет читателю прокручивать по горизонтали:
pre {
background-color: #f4f4f4;
padding: 10px;
overflow-x: auto; /* horizontal scroll for long lines */
}Если вы предпочитаете, чтобы текст переносился на следующую строку вместо прокрутки, используйте вместо этого white-space: pre-wrap.
Атрибуты
Элемент <pre> не имеет обязательных атрибутов. Старые атрибуты width, cols и wrap устарели и удалены из HTML5 — вместо них используйте CSS:
| Устаревший атрибут | Что он делал | Используйте вместо него |
|---|---|---|
width | задавал ширину в символах | CSS max-width |
cols | задавал количество столбцов | CSS width / max-width |
wrap | управлял переносом строк | CSS white-space: pre-wrap |
Тег <pre> поддерживает глобальные атрибуты и атрибуты событий.
Связанные теги
<code>— помечает фрагмент компьютерного кода.<samp>— пример вывода программы.<kbd>— ввод с клавиатуры.- Элементы компьютерного кода HTML — обзор всех тегов, связанных с кодом.