<pre>

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

        
          
          <pre aria-label="Изображение кота, собранное из текстовых символов.">  ../\„„./\.  .(='•'= ) .  .(") „. (").  . \,\„„/,/  . │„„. „│  . /„/„ \„\  .(„)''l l''(„)  . .. ((...  . . . ))..  . . .((..</pre>
          <pre aria-label="Изображение кота, собранное из текстовых символов.">
  ../\„„./\.
  .(='•'= ) .
  .(") „. (").
  . \,\„„/,/
  . │„„. „│
  . /„/„ \„\
  .(„)''l l''(„)
  . .. ((...
  . . . ))..
  . . .((..
</pre>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В HTML-коде браузер схлопывает все пробелы в один и игнорирует переносы строк.

Если поместить нашего котика в обычный <div>, мы увидим его таким:

../\„„./\. .(='•'= ) . .(") „. ("). . \,\„„/,/ . │„„. „│ . /„/„ \„\ .(„)''l l''(„) . .. ((... . . . )).. . . .((..

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

К тегу <pre> можно применить все глобальные атрибуты.

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

💡 Для вывода кода нужно дополнительно обернуть содержимое тега <pre> в тег <code>, чтобы подчеркнуть, что внутри именно код, а не схематичный котик или стихотворение.

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

• < (less than — знак «меньше») для левой угловой скобки;
• > (greater than — знак «больше») для правой угловой скобки.

        
          
          <pre><code>  &lt;div&gt;Какой-то текст&lt;/div&gt;</code></pre>
          <pre><code>
  &lt;div&gt;Какой-то текст&lt;/div&gt;
</code></pre>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Схлопывание пробелов и переносов строк вне тега <pre> также можно избежать с помощью CSS, а именно свойства white-space: pre.

💡 Слишком длинные строчки могут выходить за пределы тега <pre>, решить проблему поможет CSS, а именно добавление прокрутки – overflow: auto, или переноса строк – white-space: pre-wrap.