<pre>
- 25 января 2023
Тег <pre>
используется для отображения предварительно отформатированного текста. Он сохраняет все пробелы и переносы строк, а также отображает содержимое в моноширинном шрифте.
Синтаксис тега <pre>
<pre>
<!-- Ваш предварительно отформатированный текст здесь -->
</pre>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <pre>
является семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Содержимое тега <pre>
представляет собой предварительно отформатированный текст, который должен быть отображён без изменений в моноширинном шрифте.
Примеры использования
В этом примере тег <pre>
используется для отображения JavaScript-функции с сохранением форматирования и отображением в моноширинном шрифте:
<pre>
function factorial(n) {
if (n === 0) {
return 1;
} else {
return n * factorial(n-1);
}
}
</pre>
Здесь тег используется для отображения CSS-стиля с сохранением форматирования и отображением в моноширинном шрифте.
<pre>
/* Комментарий к CSS-стилю */
body {
margin: 0;
padding: 0;
}
</pre>
А это пример неправильного использования, здесь тег добавлен для отображения HTML-кода с сохранением пробелов и переносов строк. Содержимое <pre>
не должно включать HTML-теги.
<pre>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</pre>
Для чего использовать тег <pre>
- Отображение кода программ на веб-страницах.
- Отображение CSS-стилей для примера кода.
- Отображение отформатированного текста: логов, сообщений об ошибках и так далее.
- Отображение HTML-кода для демонстрации или обучения.
- Отображение содержимого тега
<textarea>
, которое должно быть показано без изменений. - Отображение предварительно отформатированного текста для сохранения визуального форматирования
- Отображение ASCII-артов.
Атрибуты тега <pre>
У тега нет контентных атрибутов.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
- Тег
<pre>
не должен использоваться для вёрстки, так как может нарушить адаптивность сайта. - При использовании атрибутов
width
илиheight
следует учитывать, что их значения могут привести к обрезанию текста или к неожиданным переносам строк.
Поддержка браузерами
Тег поддерживается всеми современными браузерами. Актуальная информация — на caniuse.
Альтернативные теги
Вместо <pre>
можно использовать тег <code> для разметки кода, который должен отображаться в моноширинном шрифте.
Чем заменить тег
Если необходимо отображать отформатированный текст, можно использовать тег <code>
, а если необходимо выделить код на странице, можно использовать тег <pre>
в сочетании с другими тегами, например, <code>
и <span>
,.
Актуальность
Тег <pre>
актуален и может использоваться в веб-разработке.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023