HTML entities — это специальные последовательности символов, позволяющие отображать зарезервированные и специальные символы в HTML-документах. Без них браузер может неверно интерпретировать код страницы.
Зачем нужны HTML entities
HTML использует угловые скобки < и > как разметку тегов, а амперсанд & — как начало entity. Если вы хотите показать эти символы как текст, а не как разметку, их нужно экранировать.
Типичные случаи, когда необходимо экранирование:
- Отображение HTML-кода внутри страницы (например, в уроках и документации)
- Вставка символов, которых нет на клавиатуре (©, ™, €)
- Защита от XSS при отображении пользовательского ввода
- Правильная вёрстка математических и типографских символов
Три формата записи
HTML entities можно записать тремя способами:
- Именной:
&имя;— наиболее читаемый, например&,<,© - Десятичный:
&#число;— числовой код символа, например&,© - Шестнадцатеричный:
&#xHEX;— hex-код, например&,©
Таблица наиболее используемых entities
| Символ | Именная | Десятичная | Описание |
|---|---|---|---|
< | < | < | Меньше |
> | > | > | Больше |
& | & | & | Амперсанд |
" | " | " | Кавычка |
' | ' | ' | Апостроф |
| |   | Неразрывный пробел |
© | © | © | Copyright |
® | ® | ® | Registered |
™ | ™ | ™ | Trademark |
€ | € | € | Евро |
– | – | – | Тире короткое |
— | — | — | Тире длинное |
« | « | « | Кавычка-ёлочка |
» | » | » | Кавычка-ёлочка |
Типичные сценарии использования
Отображение кода в документации
<!-- Неверно — браузер интерпретирует как тег -->
Используйте тег <b> для жирного текста.
<!-- Верно — entity отображается как текст -->
Используйте тег <b> для жирного текста.
Неразрывный пробел и типографика
<!-- Телефон не будет разбит на две строки -->
<p>+7 (495) 123-45-67</p>
<!-- Правильные кавычки и тире -->
<p>ООО «Компания» — надёжный партнёр</p>
Кодирование в JavaScript
В JavaScript для экранирования HTML используют разные подходы:
// textContent — безопасно, автоматически экранирует HTML
element.textContent = userInput;
// innerHTML без экранирования — XSS-уязвимость!
// Безопасное экранирование для innerHTML:
function escapeHtml(str) {
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
}
Для работы с URL-кодированием и escape-последовательностями смотрите также инструмент Escape/Unescape и URL-кодирование.
Инструмент на reChecker
Конвертер HTML entities на reChecker мгновенно преобразует текст с символами <, >, &, " в безопасный HTML с entities — и обратно. Удобно при работе с шаблонами, документацией или проверке пользовательского ввода.