Экранирование HTML

Вставьте текст или HTML, чтобы экранировать спецсимволы или вернуть исходные символы из кодов. Например, <b> превращается в &lt;b&gt; — браузер покажет сам тег, а не сделает текст жирным. Такие коды называют HTML-сущностями.

Как пользоваться

Вставьте текст или фрагмент HTML — результат появится сразу. «Кодировать кириллицу и другие символы вне ASCII» заменяет кириллицу, тире, кавычки-ёлочки и эмодзи числовыми ссылками — это нужно, если страница или письмо сохраняются не в UTF-8. При смене действия результат переносится во ввод.

Текст обрабатывается в браузере, не отправляется на сервер и не вставляется в страницу как разметка.

Действие

Экранируем…

Текст

<p class="note">Цена: 5 000 ₽ — «скидка» & доставка</p>

HTML

Для экранирования включите JavaScript. Пример: <p> записывается как &lt;p&gt;, чтобы показаться текстом, а не тегом.


Зачем экранировать


Браузер читает < как начало тега, а & — как начало сущности. Если вставить в разметку текст «<div> — блочный элемент» как есть, тег исчезнет со страницы. Экранирование нужно, когда вы показываете код в статье, выводите введённый пользователем текст или подставляете значение в атрибут: незаэкранированная кавычка в title="…" обрывает атрибут.


HTML
<p>Тег &lt;div&gt; — блочный элемент</p>
<img alt="Логотип &quot;Ромашка&quot;" src="logo.svg">


В JavaScript безопаснее не экранировать вручную, а записывать текст через textContent: браузер сам не даст ему стать разметкой.


Невидимые символы


    
    
  • Неразрывный пробел &nbsp; не даёт перенести строку: «5&nbsp;000&nbsp;₽» не разорвётся посередине числа. Но поиск по сайту и сравнение строк считают его отличным от обычного пробела.
    • 
    
  • Мягкий перенос &shy; — место, где слово можно перенести с дефисом; на экране он не виден.
    • 
    
  • Символы нулевой ширины появляются при копировании из мессенджеров и редакторов и ломают проверку форм и поиск.
    • 





Вопросы и ответы


Нужно ли кодировать кириллицу?


Нет, если страница в кодировке UTF-8 — это стандарт для современных сайтов (<meta charset="utf-8">). Числовые коды пригодятся для старых систем и некоторых почтовых шаблонов.


Чем &#39; отличается от &apos;?


Обе записи означают апостроф, но &apos; появилась только в HTML5 и XML, поэтому числовой код &#39; надёжнее для старых парсеров.


Защищает ли экранирование от XSS?


Экранирование & < > " ' защищает текст внутри элементов и атрибутов в кавычках. Внутри <script>, атрибутов-обработчиков и адресов ссылок нужны другие правила — там надёжнее не подставлять пользовательские данные вовсе.




Справочник


Полный список именованных сущностей — в справочнике мнемоник HTML. Кодирование адресов — в инструменте «URL-кодирование».