Преобразование тегов в HTML сущности

 21 мая 2017      
 HTML & CSS / JAVA & PHP / WordPress / Вебмастеру      
 Комментариев еще нет      
 165

Когда необходимо опубликовать исходный HTML код у себя в статье на сайте, то часто браузер указанный текст понимает как код, то есть выполняет его. Решить проблему должны специально выделенные для этого теги PRE и CODE. Но если у вас что-то пошло не так, то в этой статье я расскажу, как преобразовать HTML теги в сущности (в изображения), чтобы они не воспринимались браузером как команды.

Написание HTML тегов

Как известно все HTML теги начинаются с левой угловой скобки (знак меньше). Если ее заменить на ее код-сущность, то браузер уже не будет воспринимать дальнейший текст как код тега.

Чтобы код отображался как текст, а не понимался браузером как команды, достаточно заменить следующие спецсимволы на их сущности:

  • < на &lt;
  • > на &gt;
  • " на &quot;
  • & на &amp;

Таблица специальных символов и коды их сущностей

Символ (вид) Цифровой код HTML-код CSS-код Описание

<
&#60; &lt; \003C Знак «меньше чем» (начало тега)

>
&#62; &gt; \003E Знак «больше чем» (конец тега)

"
&#34; &quot; \0022 Двойная кавычка

&
&#38; &amp; \0026 Амперсанд

Теги PRE CODE XMP

Немного о тегах которые должны помочь, но не помогут или являются невалидными.
<pre> — «preformatted» — блочный элемент, который определяет блок предварительно форматированного текста.
<code> — строчный элемент, предназначенный для отображения одной или нескольких строк текста, который представляет собой программный код.
Эти теги оформляют текст, но не преобразуют его в сущности!!!

<xmp> — позволяет отображать фрагмент текста том виде, в каком он представлен внутри тега. Вот то что нам нужно для отображения сущностей! Но, к сожалению, он уже давно исключён из HTML-спецификации и его поддержка может быть прекращена любым браузером в любой момент.

PHP функции по преобразованию кода в сущности

Чтобы преобразовать код в сущности можно воспользоваться PHP функций htmlspecialchars(). Пример ее использования:

<?php
echo  htmlspecialchars("<div>HTML</div>", ENT_QUOTES); 
// &lt;div&gt;HTML&lt;/div&gt; 
?>

Необязательный второй аргумент quote_style определяет режим обработки одиночных и двойных кавычек. В режиме по умолчанию, ENT_COMPAT, преобразуются двойные кавычки, одиночные остаются без изменений. В режиме ENT_QUOTES преобразуются и двойные, и одиночные кавычки. а в режиме ENT_NOQUOTES и двойные, и одиночные кавычки остаются без изменений.

Если у вас WordPress, то используйте функцию esc_html_e().

<?php esc_html_e('<div>HTML</div>'); //&lt;div&gt;HTML&lt;/div&gt;?>

На экране в обоих случая будет выведено:

<div>HTML</div>

То есть код будет отображаться, а не выполняться.

Благодарности

При написании статьи были использованы следующие источники:

  1. https://html5book.ru/specsimvoly-html/
  2. https://puzzleweb.ru/html/html_symbols.php
  3. http://www.html.by/threads/15600-Vyvesti-HTML-kod-na-stranice-sajta
  4. http://htmlbook.ru/html/xmp
  5. https://wp-kama.ru/function/esc_html_e

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" я даю свое согласие на обработку введенной мной персональной информации в соответствии с Федеральным Законом от 27.07.2006 №152-ФЗ "О персональных данных", на условиях и для целей определенных политикой конфиденциальности.

Технический блог © 2017
SQL - 63 | 0,217 сек. | 10.34 МБ
Политика конфиденциальности