Как вывести символы и теги html на странице сайта. Теги <xmp> и <plaintext>

Браузеры интерпретируют 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="primer1">Пример №1. Рамка с тенью</div>
</body>
</html>

Для этого заменяем

< на <
> на >

&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
	.primer1{
	padding: 10px;
	margin: 10px;
	width: 200px;
	height: 100px;
	box-shadow: 0px 0px 15px 5px #a34b23;
	}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class="primer1"&gt;Пример №1. Рамка с тенью&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Заменять каждую знак муторно и долго. Поэтому проще всего определиться сразу какой код нужно вывести, а потом массово сделать замену. Это делается с помощью любого блокнота (например, notepad++). Открыв код в блокноте, нажмите комбинацию "CTRL + H" (заменить). Заполните поля что заменить и чем. Таким образом, можно автоматом массово заменить все нужные символы на другие.

В интернете есть специальные онлайн генераторы для замены.

В целом я придерживаюсь этого метода, т.к. он кроссбраузерный и валидный (отвечает всем стандартам).

Используя теги <xmp> и <plaintext>

В html есть специальные теги для отображения кода как есть: <xmp>...</xmp> и <plaintext>...</plaintext>. Весь html-код нужно поместить как есть между открывающим и закрывающим тегами и все.

В целом этот метод работает во всех браузерах. Однако этот код не проходит валидацию.

Пользоваться этим методом или нет? Конечно, вряд ли это может как-то сказаться на позициях сайта и траста сайта со стороны поисковых систем, но лично я придерживаюсь к мнению, что если делать код, то сразу отвечающим всем стандартам. Сейчас это не важно, а завтра может быть это станет уже критично.

Пример с <xmp>

<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="primer1">Пример №1. Рамка с тенью</div>
	</body>
	</html>
</xmp>

Пример с <plaintext>

<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="primer1">Пример №1. Рамка с тенью</div>
	</body>
	</html>
</plaintext>

Из этих двух тегов, советую выбирать <plaintext>, т.к. он более новый и есть шансы пройти валидность кода.

← Перейти в каталог html уроков и советов