Как вывести символы и теги html на странице сайта
Браузеры интерпретируют html-теги в свой синтаксис. В итоге любой html-тег при написании его в виде не отображается на странице, так как мы видим его в коде. Рассмотрим все способы как можно выводить теги html на странице сайта так, как они написаны в коде.
Существует три способа. Каждый из них не идеален. Я пользуюсь первым.
Замена левой и правой скобки на коды
Чем характеризуется любой html-тег? Наличием открывающей и закрывающий скобки: < и >. Если мы будем писать эти скобки с помощью html-кодов, то добьемся как раз нужного нам результата, а точнее, что браузер поймет этот код, как простой текст.
Например, мы хотим вывести следующий html-код на странице сайта:
html> head> style> .primer1< padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 15px 5px #a34b23; > /style> /head> body> div class css">primer1">Пример №1. Рамка с тенью/div> /body> /html>
Для этого заменяем
<html> <head> <style> .primer1< padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 15px 5px #a34b23; > </style> </head> <body> <div class css">primer1">Пример №1. Рамка с тенью</div> </body> </html>
Заменять каждую знак муторно и долго. Поэтому проще всего определиться сразу какой код нужно вывести, а потом массово сделать замену. Это делается с помощью любого блокнота (например, notepad++). Открыв код в блокноте, нажмите комбинацию «CTRL + H» (заменить). Заполните поля что заменить и чем. Таким образом, можно автоматом массово заменить все нужные символы на другие.
В интернете есть специальные онлайн генераторы для замены.
В целом я придерживаюсь этого метода, т.к. он кроссбраузерный и валидный (отвечает всем стандартам).
Используя теги и
В html есть специальные теги для отображения кода как есть:
В целом этот метод работает во всех браузерах. Однако этот код не проходит валидацию.
Пользоваться этим методом или нет? Конечно, вряд ли это может как-то сказаться на позициях сайта и траста сайта со стороны поисковых систем, но лично я придерживаюсь к мнению, что если делать код, то сразу отвечающим всем стандартам. Сейчас это не важно, а завтра может быть это станет уже критично.
xmp> html> head> style> .primer1< padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 15px 5px #a34b23; > /style> /head> body> div class css">primer1">Пример №1. Рамка с тенью/div> /body> /html> /xmp>
plaintext> html> head> style> .primer1< padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 15px 5px #a34b23; > /style> /head> body> div class css">primer1">Пример №1. Рамка с тенью/div> /body> /html> /plaintext>
Из этих двух тегов, советую выбирать , т.к. он более новый и есть шансы пройти валидность кода.
Как отобразить теги на веб-странице?
Любые теги (вроде
) никак не показываются в браузере, поскольку воспринимаются браузером как команды для вставки элементов и изменения их свойств. Но иногда требуется на веб-странице вывести теги, например, для демонстрации HTML-кода. В этом случае используйте спецсимволы < и > для замены угловых скобок < и >. При этом
будет выглядеть как <p> (пример 1).
Пример 1. Теги на веб-странице
Пример страницы
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Формула этанола</title> </head> <body> <p>Формула этанола С<sub>2</sub>Н<sub>5</sub>ОН</p> </body> </html>
В данном примере выводится код веб-страницы, а чтобы браузер не воспринимал теги напрямую, скобки < и >заменены специальными символами < и >. Результат примера показан на рис. 1.

Рис. 1. Теги в документе
См. также
- Работа с текстом
- Типографика в Bootstrap 5
Как отобразить теги на веб-странице?
Любые теги никак не показываются в окне браузера, поскольку воспринимаются браузером как команды для вставки элементов и изменения их свойств. Но иногда требуется на веб-странице вывести теги, например, для демонстрации HTML-кода. В этом случае используйте спецсимволы < и > для замены угловых скобок < и >. При этом тег
будет выглядеть как <p> (пример 1)
Пример 1. Теги на странице
HTML5 CSS 2.1 IE Cr Op Sa Fx
Вывод тегов .ex Пример страницы
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Формула этанола</title>
</head>
<body>
<p>Формула этанола С<sub>2</sub>Н<sub>5</sub>ОН</p>
</body>
</html>
В данном примере выводится код веб-страницы, а чтобы браузер не воспринимал теги напрямую, скобки < и >заменены специальными символами < и > . Результат примера показан на рис. 1.

Рис. 1. Теги в документе
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?
Как растянуть фон на всю ширину окна?
Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
Как открыть ссылку в новом окне?
Вывод кода HTML страницы на экран
Приветствую. Если тема была — прошу перенаправить, поиск не помог. Представим, на странице нажимаем Ctrl+U, видим код, запихиваем его в БД, затем выводим. Просто, в ‘pre’ или ‘textarea’ ест-но, если внутри HTML будут закрывающие тэги, то вывод будет ‘неполный’. Вопрос, как всегда предельно неадекватен: Как вывести переменную с кодом HTML для просмотра? p.s. прошу не издеваться, чую ответ какой то очень простой, или его вообще нету p.p.s. ну вот иногда встречаю на всяких ресурсах выводят полный код страницы, для показа, его причем можно от туда копировать манипуляцией ctrl+c/ctrl+v.. как надо — начал искать, и нет нигде
Отслеживать
задан 16 июл 2014 в 10:16
1,928 11 11 золотых знаков 54 54 серебряных знака 104 104 бронзовых знака
Можно вывести код как value инпута)0))
23 июл 2019 в 17:33
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Если вопрос был «как вывести код страницы, а не результат его отображения», то ответ: экранируйте символы < и >, заменяя их на < и > соответственно.
Если вопрос был «как вывести результат отображения кода, не повредив окружающую разметку», то ответ: используйте iframe . Посмотрите, как это реализовано на http://jsfiddle.net, например.
Отслеживать
ответ дан 16 июл 2014 в 10:41
23.4k 3 3 золотых знака 50 50 серебряных знаков 70 70 бронзовых знаков
Можно в input это вставить:
var input = document.createElement('input'); input.value = "code"; input.innerHTML = "code"; document.body.appendChild(input);