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

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

  • < на &lt;
  • > на &gt;

&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 текста с помощью AJAX

• Вывод html текста с помощью JavaScript

• Как сделать фон для сайта

• Как сделать бегущую строку на сайте

• Как вставить музыку на сайте

• Как изменить вид ссылки при наведении

• Как разместить элементы списка горизонтально

• Как поменять скролл бар на сайте

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

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.