Как вывести текст как есть в HTML

Выводим текст как есть: тег pre

Вы обратили внимание на то, что в HTML-редакторе и браузере отображение кода имеет определенные различия? Если нет, то сделайте на этом для себя акцент.

Например, набирая HTML-код, вы можете сделать в тексте огромное количество пробелов подряд. Однако, браузер при этом все это количество заменит одним пробелом. Аналогично – с переносом строки. Сделайте их так много, как вам хочется, но браузер не осуществит перенос, если будут отсутствовать теги <p> или <br>.

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

Как правило, этот тег примеряют в тех случаях, когда необходимо в тексте привести пример какого-то кода.

Пример:

между    словами    отображается    только    один    пробел
<pre>
    между    словами    отображаются    все    пробелы
</pre>

Результат в браузере:

Советую всегда оформлять примеры исходного кода в данном теге.

Присоединяйтесь к нам в Twitter, ВКонтакте, Facebook и Google+, а также вступайте в наш чат в Telegram, чтобы не пропустить новые уроки и быть в курсе последних новостей из мира веб-разработки.
Читайте также
Комментарии


ol
ol

Спасибо, интересно.

ivashkevich
ivashkevich

Рад помочь :)

Kolyan
Kolyan

Интересно, почему стиль и размер шрифта тоже меняются?