Тег <pre> в HTML означает "preformatted text" (предварительно отформатированный текст). Он используется для отображения текста точно так, как он записан в исходном коде, сохраняя пробелы, переносы строк и другие форматирование.
Ключевые особенности и назначение тега <pre>
- Сохранение пробелов и переносов строк: В отличие от обычного текста в HTML, который может быть сжат и переформатирован браузером, текст внутри
<pre>отображается с сохранением всех пробелов и переносов строк. - Моноширинный шрифт: Браузеры обычно отображают текст внутри
<pre>моноширинным шрифтом (например, Courier New, Monospace), что делает его подходящим для отображения кода или текстовых блоков, где важна визуальная структура. - Предварительное форматирование: Изначально
<pre>использовался для отображения текста, который уже был отформатирован другим способом (например, с помощью текстового редактора). - В основном для кода: Сейчас
<pre>чаще всего используется для отображения фрагментов кода, т.к. оно позволяет сохранить отступы, пробелы и структуру кода, что делает его более читаемым.
Пример использования:
Это
текст
внутри
тега <pre>.
Обратите внимание,
как сохраняются
пробелы и
переносы строк.
Как видите, текст отображается с сохранением всех пробелов и переносов строк, а код обернут в <code> для стилизации.
Отличия от тега <code>:
<code>обычно используется для отображения небольшого фрагмента кода в строке, в сочетании с другими тегами.<pre>используется для отображения более длинных и структурированных блоков кода, где важно сохранить форматирование.