Все
Истории
Дизайн
Код
Геймдев
Бизнес
Маркетинг
Управление
Кино
Музыка
Проектная фотография
Развитие
Здоровье
Деньги
Образование
EdTech
Корп. обучение
Блог Skillbox
Глоссарий
Спецпроекты
Профориентация
Тег <pre> в HTML: как использовать предварительно отформатированный текст
Рассказываем, как отображать код и сохранять пробелы и переносы.
Если вы когда-либо пытались вставить на сайт кусок кода или ASCII-арт, то могли заметить проблему: браузер съедает все пробелы, табуляции и переносы строк. В результате аккуратно отформатированный текст превращается в скомканный и трудночитаемый блок.
Чтобы сохранить исходное форматирование — пробелы, табуляцию и переносы, — используется тег <pre>. В HTML <pre> помогает правильно отображать такие тексты на странице.
Содержание
- Тег <pre>: что это и как пишется
- Когда стоит использовать тег <pre>
- Как правильно применять тег <pre> на практике
- Возможности тега <pre>: стилизация, адаптивность, интерактивность
- Частые ошибки
- Полезные советы и лайфхаки
Тег <pre>: что это и как пишется
Тег <pre> (от англ. preformatted text) используется для вывода текста «как есть», без автоматического удаления лишних пробелов или игнорирования переносов строк. Это особенно важно, если мы хотим точно воспроизвести форматирование исходного текста, например при работе с кодом, логами и поэзией.
<pre> — парный, то есть имеет тег закрытия </pre>. Он создаёт внутри себя блок с предварительно отформатированным текстом. При этом браузер не трогает пробелы, переносы и табуляцию.
Читайте также:
<!-- С <pre> все отступы сохраняются -->
<pre>
/\_/\
( o.o )
> ^ <
</pre>
<!-- а без него — теряются -->
<div>
/\_/\
( o.o )
> ^ <
</div>Если использовать <pre>, на выходе получится картинка, а без него всё оформление сломается.
А это пример использования тега <pre> для вывода блока кода:
<pre>
function hello() {
console.log("Hello, world!");
}
</pre>
<div>
function hello() {
console.log("Hello, world!");
}
</div>Получится вот так:
Обратите внимание, что текст внутри <pre> выглядит иначе, чем обычный текст на странице: код будто напечатан на печатной машинке. В типографике такие шрифты называют моноширинными (или monospaced). По умолчанию браузер самостоятельно меняет шрифт внутри тега <pre> на моноширинный — например, на Courier или Menlo (в зависимости от операционной системы и браузера).
Когда стоит использовать тег <pre>
Тег <pre> применяется для отображения специфичных текстов, в которых важно сохранить исходное форматирование. Это могут быть:
- исходный код — для демонстрации фрагментов программного кода;
- логи и терминал — для отображения вывода командной строки;
- поэзия и таблицы ASCII — чтобы сохранить табуляцию, переносы и точное расположение слов и символов;
- ASCII-арт и псевдографика — для создания символьных картинок и ретростилей.
Как правильно применять тег <pre> на практике
Сохранение форматирования
Одна из главных особенностей тега <pre> — он не сжимает пробелы и табуляции. Мы можем поставить столько пробелов, сколько требуется, без риска, что браузер их проигнорирует.
<p>Текст в теге pre</p>
<pre>
Проходя мимо камина, бросила взгляд на стишок в рамке.
Десять негритят решили пообедать,
Один внезапно подавился — их осталось девять.
«Какой ужас — прямо как у нас сегодня вечером...» — подумала девушка.
</pre>
<p>Текст в теге div</p>
<div>
Проходя мимо камина, бросила взгляд на стишок в рамке.
Десять негритят решили пообедать,
Один внезапно подавился — их осталось девять.
«Какой ужас — прямо как у нас сегодня вечером...» — подумала девушка.
</div>Результат:
Семантика и доступность
Сам по себе тег <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>
Тег <pre> поддерживает стандартные глобальные атрибуты: class, id, style, title, hidden и другие, поэтому легко будет и стилизовать тег, и добавить ему интерактивности.
Возможности тега <pre>: стилизация, адаптивность, интерактивность
Стилизация тега <pre>
Через 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> не адаптивный. Решение может быть такое:
pre {
overflow-x: auto; /* Добавляем горизонтальную прокрутку */
white-space: pre-wrap; /* Переносим длинные строки */
word-break: break-all; /* Разбиваем длинные слова (на крайний случай) */
}Интерактивные приёмы с тегом <pre>
Тег <pre> может быть помощником при создании интерактивных решений на странице.
1. Показать/скрыть содержимое — скрываем логи и показываем их по клику.
<pre id="log" hidden>[1] Загрузка данных... [2] Обработка... [3] Готово</pre>
<button onclick="document.getElementById('log').hidden ^= true">Показать/скрыть</button>
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;
}
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();
ASCII-арт и ретростиль
В 1990–2000-е годы, когда возможности HTML только формировались, тег <pre> был незаменим для организации табличных и формовых макетов. В то время тегов <table> и <form> ещё не существовало, и разработчики выравнивали колонки с помощью пробелов, а интерактивные элементы, например кнопки, создавали при помощи ASCII‑графики — то есть картинок из символов, вроде нашего котика. Сегодня подобные приёмы воспринимаются как элемент ностальгии, но они забавные. Вот пара сайтов, где используются возможности тега <pre>:
А в целом с его помощью можно:
- встраивать в веб‑страницы оригинальные ASCII‑логотипы, создавая неожиданный дизайнерский эффект;
- разрабатывать текстовые игры в стиле классических консольных приложений и инди‑проектов начала 2000‑х;
- генерировать «мемы» из символов, придавая интерфейсу уникальность.
Частые ошибки
1. Символы не экранированы
Не забывайте экранировать символы <, > и &, используя для этого & lt;, & gt;, & amp;. Иначе браузер решит, что вы хотите записать реальный код.
<!-- Неправильно: -->
<pre>10 <span>20</span></pre>Браузер выведет «10 20».
<!-- Правильно: -->
<pre>10 <span>20</span></pre>Браузер выведет:
10 <span>20</span>2. Используются вложенные блочные элементы
Нельзя помещать блочные теги, такие как <div> или <p>, внутрь <pre> — это нарушает спецификацию. Соответствие разметки правилам можно проверить с помощью валидатора.
3. Адаптивность проигнорирована
На мобильных устройствах текст внутри <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 — поэкспериментировать со шрифтами.
Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!
