HTML-тег `<pre>`

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

Содержимое тега отображается в браузере моноширинным шрифтом.

Внутри тега <pre> обычно размещаются строчные элементы. Хотя блочные элементы разрешены в HTML5, они могут добавлять неожиданные пробелы или отступы, поэтому обычно предпочтительнее использовать строчные элементы.

успех
Тег <pre> можно использовать при отображении текста с нестандартным форматированием или какого-либо компьютерного кода.

Синтаксис

Тег <pre> парный. Содержимое записывается между открывающим (<pre>) и закрывающим (</pre>) тегами.

Пример HTML-тега `<pre>`:

Пример HTML-тега <pre> | W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <pre>Spaces
               and line breaks
               within this element 
        are shown as typed.           
    </pre>
  </body>
</html>

Try it Yourself »

Результат

pre tag example

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

Пример HTML-тега `<pre>` с элементом `<code>`:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <pre>
      <code>
        body {
          color:orange;
        }
      </code>
    </pre>
  </body>
</html>

Try it Yourself »

Атрибуты

Атрибут	Значение	Описание
width	number	Устарел. Вместо него используйте CSS `max-width` или `overflow`.

Тег <pre> поддерживает Глобальные атрибуты и Атрибуты событий.

Как стилизовать HTML-тег <pre>

css

pre {
  background-color: #f4f4f4;
  padding: 10px;
  overflow-x: auto;
}

Практика

Какие особенности характерны для тега 'pre' в HTML?

Тег 'pre' используется для определения предварительно отформатированного текста.Тег 'pre' не сохраняет ни пробелы, ни переносы строк.Текст в теге 'pre' отображается моноширинным шрифтом.Тег 'pre' следует использовать, когда требуется точное форматирование текста.Тег 'pre' удаляет лишние пробелы и новые строки.

HTML-тег <pre> ​

Синтаксис ​

Пример HTML-тега <pre>: ​

Результат ​

Пример HTML-тега <pre> с элементом <code>: ​

Атрибуты ​