Как работает тег pre?

Как работает тег <pre> в HTML?

Тег <pre> (сокращение от preformatted text — предварительно отформатированный текст) — один из фундаментальных HTML-элементов, сохраняющих пробелы, переносы строк и исходное форматирование текста. В отличие от большинства HTML-тегов, которые «схлопывают» множественные пробелы и игнорируют переносы строк (преобразуя их в одиночные пробелы), <pre> отображает содержимое точно так, как оно записано в исходном коде.

Ключевые особенности и принцип работы

1. Сохранение пробелов и переносов строк Любой текст внутри <pre> отображается с учётом всех пробелов (включая множественные) и символов перевода строки (\n). Это делает тег незаменимым для отображения:

• Кода программирования.
• Форматированного текста (например, ASCII-графики).
• Стихотворений с определённой структурой.
• Данных с фиксированной шириной столбцов.

Пример:

<pre>
function hello() {
    console.log("Hello, world!");
}
</pre>

В браузере текст будет отображён с теми же отступами и переносами, что и в HTML-коде.

2. Моноширинный шрифт по умолчанию Браузеры автоматически применяют к <pre> моноширинный шрифт (обычно monospace), где все символы имеют одинаковую ширину. Это обеспечивает визуальную согласованность для табличных данных или кода.

3. Автоматическая прокрутка Если содержимое выходит за границы контейнера, по умолчанию добавляется горизонтальная полоса прокрутки (в отличие от обычного текста, который переносится). Это поведение можно изменить через CSS-свойство overflow.

Важные аспекты использования

Экранирование символов HTML Поскольку внутри <pre> текст интерпретируется буквально, символы HTML (например, <, >, &) нужно заменять на HTML-сущности (<, >, &). Иначе они будут восприняты как часть разметки.

<pre>
<!-- Неправильно: тег <strong> будет распознан -->
&lt;div&gt;Пример&lt;/div&gt;  <!-- Правильно -->
</pre>

Стилизация с помощью CSS Хотя <pre> имеет стили по умолчанию, их можно полностью переопределить:

pre {
    font-family: 'Courier New', monospace;
    background-color: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto; /* Горизонтальная прокрутка при необходимости */
    white-space: pre-wrap; /* Перенос строк по словам */
}

Свойство white-space CSS-свойство white-space управляет обработкой пробелов. Для <pre> актуальны значения:

• pre (значение по умолчанию) — сохраняет все пробелы и переносы.
• pre-wrap — сохраняет форматирование, но добавляет перенос строк при необходимости.
• pre-line — схлопывает множественные пробелы, но сохраняет переносы строк.

Практическое применение и примеры

Для вставки кода: Чаще всего <pre> используется в паре с тегом <code> для семантически корректного отображения фрагментов кода:

<pre><code class="language-javascript">
const user = {
    name: "Alice",
    age: 30
};
console.log(user.name);
</code></pre>

Для табличных данных: Когда таблица CSS/HTML избыточна, можно использовать простое форматирование пробелами:

<pre>
Имя      Возраст  Город
Анна     25       Москва
Иван     30       Санкт-Петербург
</pre>

Ограничения и лучшие практики:

• Избегайте вложенных интерактивных элементов (например, <a>, <button>) внутри <pre> без дополнительной стилизации — это может нарушить визуальное форматирование.
• Для длинного содержимого рекомендуется добавлять overflow-x: auto для горизонтальной прокрутки.
• Для улучшения доступности сочетайте с атрибутом role="text" или обёрткой в <figure> с <figcaption>.

Заключение

Тег <pre> — мощный инструмент для отображения предварительно отформатированного текста, критически важный для веб-разработки, особенно при публикации кода, логирования или данных с фиксированным форматированием. Его правильное использование, дополненное CSS-стилизацией и соблюдением правил экранирования, позволяет создавать читаемые и функциональные блоки контента, сохраняющие авторское форматирование без искажений. В современном фронтенде <pre> часто используется в синтаксических подсветчиках кода (например, в библиотеках Prism.js или Highlight.js), где служит контейнером для размещённых внутри тегов <code> с раскрашенным содержимым.