Тег <​pre​> в HTML: как использовать предварительно отформатированный текст
2026-02-21 15:54 Diff
https://skillbox.ru/media/base/teg-pre-v-html-kak-ispolzovat-predvaritelno-otformatirovannyy-tekst/

#База знаний

  • 9 июн 2025
  • 0

Рассказываем, как отображать код и сохранять пробелы и переносы.

Иллюстрация: Polina Vari для Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

Если вы когда-либо пытались вставить на сайт кусок кода или ASCII-арт, то могли заметить проблему: браузер съедает все пробелы, табуляции и переносы строк. В результате аккуратно отформатированный текст превращается в скомканный и трудночитаемый блок.

Чтобы сохранить исходное форматирование — пробелы, табуляцию и переносы, — используется тег <pre>. В HTML <pre> помогает правильно отображать такие тексты на странице.

Содержание

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

<pre> — парный, то есть имеет тег закрытия </pre>. Он создаёт внутри себя блок с предварительно отформатированным текстом. При этом браузер не трогает пробелы, переносы и табуляцию.

<!-- С <pre> все отступы сохраняются --> <pre> /\_/\ ( o.o ) > ^ < </pre> <!-- а без него — теряются --> <div> /\_/\ ( o.o ) > ^ < </div>

Если использовать <pre>, на выходе получится картинка, а без него всё оформление сломается.

Скриншот: Google Chrome / Skillbox Media

А это пример использования тега <pre> для вывода блока кода:

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

Получится вот так:

Скриншот: Google Chrome / Skillbox Media

Обратите внимание, что текст внутри <pre> выглядит иначе, чем обычный текст на странице: код будто напечатан на печатной машинке. В типографике такие шрифты называют моноширинными (или monospaced). По умолчанию браузер самостоятельно меняет шрифт внутри тега <pre> на моноширинный — например, на Courier или Menlo (в зависимости от операционной системы и браузера).

Тег <pre> применяется для отображения специфичных текстов, в которых важно сохранить исходное форматирование. Это могут быть:

  • исходный код — для демонстрации фрагментов программного кода;
  • логи и терминал — для отображения вывода командной строки;
  • поэзия и таблицы ASCII — чтобы сохранить табуляцию, переносы и точное расположение слов и символов;
  • ASCII-арт и псевдографика — для создания символьных картинок и ретростилей.

Одна из главных особенностей тега <pre> — он не сжимает пробелы и табуляции. Мы можем поставить столько пробелов, сколько требуется, без риска, что браузер их проигнорирует.

<p>Текст в теге pre</p> <pre> Проходя мимо камина, бросила взгляд на стишок в рамке. Десять негритят решили пообедать, Один внезапно подавился — их осталось девять. «Какой ужас — прямо как у нас сегодня вечером...» — подумала девушка. </pre> <p>Текст в теге div</p> <div> Проходя мимо камина, бросила взгляд на стишок в рамке. Десять негритят решили пообедать, Один внезапно подавился — их осталось девять. «Какой ужас — прямо как у нас сегодня вечером...» — подумала девушка. </div>

Результат:

Скриншот: Google Chrome / Skillbox Media

Сам по себе тег <pre> не семантический — он влияет только на внешний вид текста, но не помогает поисковым системам понять его смысл. Скринридеры (программы, которые озвучивают текст людям с нарушениями зрения) читают текст внутри него без выделения интонацией.

Есть теги, которые можно использовать внутри <pre> и которые помогут скринридерам и поисковым системам определить, что за контент лежит внутри, а также правильно его интерпретировать.

Примеры таких тегов:

  • <code> — для записи кода;
  • <samp> — для записи вывода результатов скриптов (например, сообщения об ошибках);
  • <kbd> — для обозначения ввода пользователя (например, комбинации клавиш).
<pre><code>const x = 10;</code></pre> <!-- Код --> <pre><samp>Ошибка: файл не найден</samp></pre> <!-- Вывод программы --> <pre><kbd>Ctrl + C</kbd></pre> <!-- Клавиша -->

Можно также добавить рядом с блоком тега <pre> описание или подпись, чтобы помочь поисковым системам понять, о чём этот блок:

<p>Ниже представлен код ошибки в консоли:</p> <pre>...</pre>

Если вы хотите показать HTML-код внутри <pre>, обязательно экранируйте символы <, >, &, а то браузер решит, что это настоящие теги, и не отобразит их. Для этого нужно использовать специальные конструкции:

& lt; — для обозначения <;

& gt; — для обозначения >;

& amp; — для символа &.

Тег <pre> поддерживает стандартные глобальные атрибуты: class, id, style, title, hidden и другие, поэтому легко будет и стилизовать тег, и добавить ему интерактивности.

Через CSS можно улучшить внешний вид <pre>, сделав его более современным и удобным. Стили позволяют изменить шрифт на более подходящий — например, сейчас популярны моноширинные Fira Code или Consolas. Помимо шрифта, для соответствия стилистике страницы настраиваются фон блока, цвет текста, его размер и другие свойства.

pre { background: #282a36; color: #f8f8f2; padding: 20px; border-radius: 8px; font-family: 'Fira Code', monospace; line-height: 1.6; overflow-x: auto; }

На узких экранах, например на мобильных устройствах, длинные строки будут обрезаться, потому что сам по себе тег <pre> не адаптивный. Решение может быть такое:

pre { overflow-x: auto; /* Добавляем горизонтальную прокрутку */ white-space: pre-wrap; /* Переносим длинные строки */ word-break: break-all; /* Разбиваем длинные слова (на крайний случай) */ }

Тег <pre> может быть помощником при создании интерактивных решений на странице.

1. Показать/скрыть содержимое — скрываем логи и показываем их по клику.

<pre id="log" hidden>[1] Загрузка данных... [2] Обработка... [3] Готово</pre> <button onclick="document.getElementById('log').hidden ^= true">Показать/скрыть</button>Скриншот: Google Chrome / Skillbox Media

2. Ленивая загрузка логов — показываем первые десять строк логов, а остальное подгружаем сначала по клику на кнопке, а затем по скроллу.

HTML

<div> <pre id="lazy"> </pre> <button id="loadMore">Загрузить ещё</button> </div>

JavaScript

// Пример "лога" из 22 строк const logs = Array.from({length: 22}, (_, i) => `Лог ${i+1}: пример записи`); const container = document.getElementById("lazy"); const btn = document.getElementById("loadMore"); let start = 0; const limit = 10; let allLoaded = false; // Функция для рендеринга новых строк логов function renderLines(lines) { // Добавляем строки через переносы (\n), чтобы сохранить форматирование внутри <pre> container.textContent += lines.join('\n') + '\n'; } // Функция загрузки новых логов function loadLogs() { if (allLoaded) return; const slice = logs.slice(start, start + limit); renderLines(slice); start += slice.length; if (start >= logs.length) { allLoaded = true; btn.style.display = "none"; // Скрываем кнопку, если все логи загружены } } // Обработчик события прокрутки контейнера container.addEventListener("scroll", () => { // Проверяем, достигнут ли конец контейнера if ( container.scrollTop + container.clientHeight >= container.scrollHeight - 5 ) { loadLogs(); } }); // Обработчик клика по кнопке "Загрузить ещё" btn.addEventListener("click", loadLogs); // Загружаем первые 10 строк при старте loadLogs();

CSS

div { padding: 40px; } pre { background: #f5f5f5; color: #333; padding: 16px; border-radius: 4px; overflow-x: auto; /* Горизонтальная прокрутка */ white-space: pre-wrap; /* Перенос строк */ word-break: break-word; /* Разрыв длинных слов */ font-family: 'Fira Code', monospace; margin: 0 30px 30px; width: 500px; height: 200px; /* Ограничиваем блок по высоте, чтобы включить прокрутку */ overflow-y: auto; /* Вертикальная прокрутка */ } button { background: #353c8c; padding: 10px; width: 300px; border-radius: 10px; color: #fefefe; font-size: 16px; letter-spacing: 0.06em; margin: 0 30px 30px; cursor: pointer; }Скриншот: Google Chrome / Skillbox Media

3. Анимация набора текста: создаём эффект печатания.

HTML

<pre id="terminal"></pre>

CSS

#terminal { background: #000000; color: #00ff00; padding: 10px; height: 200px; width: 500px; overflow-y: auto; border-radius: 4px; box-shadow: inset 0 0 5px rgba(0,0,0,0.5); }

JavaScript

const lines = ['> npm install', '> npm run start', 'App запущено']; const charDelay = 100; // задержка между символами (мс) const lineDelay = 500; // задержка после окончания строки (мс) const term = document.getElementById('terminal'); let lineIndex = 0; let charIndex = 0; function type() { if (lineIndex >= lines.length) return; const currentLine = lines[lineIndex]; if (charIndex < currentLine.length) { // печатаем следующий символ term.textContent += currentLine[charIndex++]; term.scrollTop = term.scrollHeight; setTimeout(type, charDelay); } else { // завершили строку -- печатаем переход на новую строку term.textContent += '\n'; term.scrollTop = term.scrollHeight; lineIndex++; charIndex = 0; setTimeout(type, lineDelay); } } // Стартуем эффект type();Скриншот: Google Chrome / Skillbox Media

В 1990–2000-е годы, когда возможности HTML только формировались, тег <pre> был незаменим для организации табличных и формовых макетов. В то время тегов <table> и <form> ещё не существовало, и разработчики выравнивали колонки с помощью пробелов, а интерактивные элементы, например кнопки, создавали при помощи ASCII‑графики — то есть картинок из символов, вроде нашего котика. Сегодня подобные приёмы воспринимаются как элемент ностальгии, но они забавные. Вот пара сайтов, где используются возможности тега <pre>:

А в целом с его помощью можно:

  • встраивать в веб‑страницы оригинальные ASCII‑логотипы, создавая неожиданный дизайнерский эффект;
  • разрабатывать текстовые игры в стиле классических консольных приложений и инди‑проектов начала 2000‑х;
  • генерировать «мемы» из символов, придавая интерфейсу уникальность.

Не забывайте экранировать символы <, > и &, используя для этого & lt;, & gt;, & amp;. Иначе браузер решит, что вы хотите записать реальный код.

<!-- Неправильно: --> <pre>10 <span>20</span></pre>

Браузер выведет «10 20».

<!-- Правильно: --> <pre>10 &lt;span&gt20&lt;/span&gt</pre>

Браузер выведет:

10 <span>20</span>

Нельзя помещать блочные теги, такие как <div> или <p>, внутрь <pre> — это нарушает спецификацию. Соответствие разметки правилам можно проверить с помощью валидатора.

На мобильных устройствах текст внутри <pre> может вылезти за границы экрана. Использование overflow-x: auto для добавления горизонтального скролла внутри <pre> улучшает адаптивность страницы.

  • Использовать <pre> для таблиц не совсем корректно. Для таблиц существует тег <table>, а для нетабличных сеток — CSS Grid.
  • Для подсветки синтаксиса внутри <pre> можно использовать библиотеки, например Prism.js.
  • Если тег <pre> по каким-то причинам не подходит, можно применить только стилизацию: white-space: pre-line заменяет <pre>, если нужно сохранить переносы.
  • Лучше минимизировать объём текста в <pre> на первичном просмотре: можно показывать первые строки, а остальное загружать по скроллу или кнопке.
  • Попробуйте сгенерировать ASCII-логотип и разместить его в README.md своего пет-проекта на GitHub — это будет выглядеть интересно. Для этого пригодятся:
  • ASCII Generator — чтобы создать логотип из текста;
  • Text to ASCII Art  — поэкспериментировать со шрифтами.
Научитесь: Профессия Фронтенд-разработчик + ИИ Узнать больше