HTML тег <pre>

Элемент <pre> (от англ. "preformatted" ‒ «предварительно отформатированный») определяет блок в который помещают предварительно отформатированный текст. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Элемент <pre> позволяет обойти эту особенность, внутри этого блочного элемента сохраняются все пробелы и переносы строк, установленные автором.

По умолчанию браузеры отображают содержимое элемента <pre> с помощью моноширинных шрифтов, таких как Courier или Monaco. Это обычное дело для вывода программного кода.

Внутри тега <pre> разрешается использовать любые элементы кроме следующих: <big>, <img>, <object>, <small>, <sub> и <sup>. Также запрещено использовать любые блочные теги, так как в большинстве своем они создают дополнительные поля свободного пространства от окружающего контекста и, соответственно, изменяют расстояния между строк.

Элемент <pre> чаще всего используется в следующих случаях:

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

Примечание: Если вы хотите отобразить блок исходного кода HTML документа, то используйте элемент <code>, вложенный в элемент <pre>. Это позволит поисковым роботам, социальным приложениям, RSS ридерам сразу же понять, что перед ними программный код.

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

Синтаксис

<pre>...</pre>

Закрывающий тег

Обязателен.

Атрибуты

widthУстарел в HTML5: Устанавливает максимальное количество символов, отображаемых на одной строке.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <pre> со следующими значениями CSS по умолчанию:

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

Различия между HTML 4.01 и HTML5

Атрибут width тега <pre> не поддерживается в HTML5.

Пример использования:

Заранее отформатированный текст:

Пример HTML:

Попробуй сам

<p>А.С. Пушкин</p>
<pre>
Буря мглою небо кроет, 
  Вихри снежные крутя; 
    То, как зверь, она завоет, 
      То заплачет, как дитя, 
      То по кровле обветшалой 
    Вдруг соломой зашумит, 
  То, как путник запоздалый, 
К нам в окошко застучит.
</pre>

Спецификации

Спецификация	Статус
WHATWG HTML Living Standard (WHATWG)	Живой стандарт
HTML 4.01 (W3C)	Рекомендация
HTML5 (W3C)	Рекомендация
HTML 5.1 (W3C)	Рекомендация

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

Элемент
<pre>	3+	1+	4+	1+	1+	1+

Попробуйте сами - Примеры

Как сделать текст жирным и привлечь к нему внимание:
Важный и жирный текст

Как сделать акцент на фрагменте текста:
Акцент и курсив

Как отобразить текст в нижнем или верхнем индексе:
Форматирование текста

Учебник HTML

HTML уроки: HTML Форматирование

HTML Элементы

Справочники