HTML Entities: &, <, > и кодирование

HTML entities — это специальные последовательности символов, позволяющие отображать зарезервированные и специальные символы в HTML-документах. Без них браузер может неверно интерпретировать код страницы.

Зачем нужны HTML entities

HTML использует угловые скобки < и > как разметку тегов, а амперсанд & — как начало entity. Если вы хотите показать эти символы как текст, а не как разметку, их нужно экранировать.

Типичные случаи, когда необходимо экранирование:

• Отображение HTML-кода внутри страницы (например, в уроках и документации)
• Вставка символов, которых нет на клавиатуре (©, ™, €)
• Защита от XSS при отображении пользовательского ввода
• Правильная вёрстка математических и типографских символов

Три формата записи

HTML entities можно записать тремя способами:

• Именной: &имя; — наиболее читаемый, например &, <, ©
• Десятичный: &#число; — числовой код символа, например &, ©
• Шестнадцатеричный: &#xHEX; — hex-код, например &, ©

Таблица наиболее используемых entities

Символ	Именная	Десятичная	Описание
<	&lt;	&#60;	Меньше
>	&gt;	&#62;	Больше
&	&amp;	&#38;	Амперсанд
"	&quot;	&#34;	Кавычка
'	&apos;	&#39;	Апостроф
	&nbsp;	&#160;	Неразрывный пробел
©	&copy;	&#169;	Copyright
®	&reg;	&#174;	Registered
™	&trade;	&#8482;	Trademark
€	&euro;	&#8364;	Евро
–	&ndash;	&#8211;	Тире короткое
—	&mdash;	&#8212;	Тире длинное
«	&laquo;	&#171;	Кавычка-ёлочка
»	&raquo;	&#187;	Кавычка-ёлочка

Типичные сценарии использования

Отображение кода в документации

<!-- Неверно — браузер интерпретирует как тег -->
Используйте тег <b> для жирного текста.

<!-- Верно — entity отображается как текст -->
Используйте тег &lt;b&gt; для жирного текста.

Неразрывный пробел и типографика

<!-- Телефон не будет разбит на две строки -->
<p>+7&nbsp;(495)&nbsp;123-45-67</p>

<!-- Правильные кавычки и тире -->
<p>ООО &laquo;Компания&raquo; &mdash; надёжный партнёр</p>

Кодирование в JavaScript

В JavaScript для экранирования HTML используют разные подходы:

// textContent — безопасно, автоматически экранирует HTML
element.textContent = userInput;

// innerHTML без экранирования — XSS-уязвимость!
// Безопасное экранирование для innerHTML:
function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
}

Для работы с URL-кодированием и escape-последовательностями смотрите также инструмент Escape/Unescape и URL-кодирование.

Инструмент на reChecker

Конвертер HTML entities на reChecker мгновенно преобразует текст с символами <, >, &, " в безопасный HTML с entities — и обратно. Удобно при работе с шаблонами, документацией или проверке пользовательского ввода.

Открыть инструмент на reChecker →