Чат PHP-разработчиков
Как вывести текст как есть в HTML

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

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

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

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

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

Пример:

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

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

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

Присоединяйтесь к нам в ВКонтакте и в Facebook, чтобы не пропустить новые уроки. А также вступайте в наш чат PHP-разработчиков в Telegram.
Онлайн обучение PHP
Путь с полного нуля до джуниора!
Начать бесплатно
Читайте также
Курс программирования на PHP
Подготовка до уровня устройства на работу!
Начать бесплатно
Комментарии (6)


ol

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

ivashkevich

Рад помочь :)

Kolyan

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

Foont7

и правда, меняются

ndadakhanov@gmail.com

с помощью этого <pre> можно что-то передвинуть на середину кучей пробелов?

ivashkevich

Если только под какую-то конкретную ширину экрана. На разных разрешениях центр будет удален от края разным числом пробелов.

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Популярное за сутки
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Сейчас читают
Онлайн-курсы PHP и MySQL
Обучение с полного нуля до уровня джуниора!
Начать бесплатно
Новые статьи
Логические задачи с собеседований