Тег <pre>

Синтаксис

Описание

Тег <pre> (от англ. preformatted text — форматированный текст) устанавливает блок предварительно форматированного текста. Такой текст отображается моноширинным шрифтом и со всеми пробелами между словами.

По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег <pre> позволяет обойти эту особенность и отображает текст как требуется разработчику.

Примечание!

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

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

Атрибуты

Атрибут	Значение	Описание
width	число	Задает максимальное количество символов в строке. Не поддерживается в HTML5

Пример

HTML-код:

<!DOCTYPE html>

<head>

</head>

<body>

<pre>
Белая берёза

Под моим окном

Принакрылась снегом,

Точно серебром.

На пушистых ветках
Снежною каймой
Распустились кисти
Белой бахромой.

И стоит берёза
В сонной тишине,
И горят снежинки
В золотом огне.

А заря, лениво
Обходя кругом,
Обсыпает ветки
Новым серебром.
</pre>
</body>
</html>

Отображение в браузере:

Белая берёза

Под моим окном

Принакрылась снегом,

Точно серебром.

На пушистых ветках
Снежною каймой
Распустились кисти
Белой бахромой.

И стоит берёза
В сонной тишине,
И горят снежинки
В золотом огне.

А заря, лениво
Обходя кругом,
Обсыпает ветки
Новым серебром.

Параметры CSS по умолчанию

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
}

Поддержка браузера

Элемент	Chrome	Opera	Firefox	Safari	Microsoft Edge
<pre>	Да	Да	Да	Да	Да

Элемент

Chrome

Opera

Firefox

Safari

Microsoft Edge

<pre>

Да