Нужно показать пример кода на странице, а браузер принимает <script> за настоящий тег и пытается его выполнить. Или в тексте встретился &, и разметка поехала. Или наоборот: пришла строка с « и , а нужно получить обычные символы. HTML Encoder/Decoder кодирует текст для безопасной вставки в HTML (< > & ") и раскодирует HTML-сущности обратно в символы, включая числовые (©) и именованные ( ).
В этой статье разберём, зачем кодировать текст, какие сущности бывают, чем HTML-кодирование отличается от URL-кодирования и Base64 и почему раскодировать чужой HTML безопасно.
Что умеет инструмент
HTML Encoder/Decoder принимает текст или HTML с сущностями и выполняет одно из двух действий.
| Действие | Что делает |
|---|---|
| Закодировать | Заменяет специальные символы на HTML-сущности |
| Раскодировать | Заменяет HTML-сущности обратно на символы |
| Все символы вне ASCII — числовыми сущностями | Заменяет и кириллицу числовыми кодами |
Результат показывается строкой с кнопкой копирования.
Всё выполняется в браузере: введённые данные никуда не отправляются.
Зачем кодировать текст для HTML
В HTML некоторые символы имеют особое значение: браузер воспринимает их как разметку, а не как текст.
| Символ | Что делает в HTML | Сущность |
|---|---|---|
< |
Начало тега | < |
> |
Конец тега | > |
& |
Начало сущности | & |
" |
Кавычка в атрибуте | " |
" |
Кавычка в атрибуте | ' |
Если вставить <script> в HTML как есть, браузер попытается выполнить скрипт. Если закодировать — покажет как текст.
Зачем это нужно:
| Задача | Почему кодирование обязательно |
|---|---|
| Показать пример кода | Теги должны отображаться как текст, а не выполняться |
| Безопасная вставка пользовательских данных | Защита от XSS: скрипт не выполнится |
Текст с & |
Иначе браузер попытается прочитать сущность |
| Кавычки в атрибутах | Иначе атрибут разорвётся |
| Отображение спецсимволов | Например, © как © |
Именованные и числовые сущности
HTML-сущности бывают двух видов.
Именованные — с мнемоническим именем: <, >, &, ", , ©, «, ».
Числовые — с кодом символа: © для ©,   для неразрывного пробела, ' для апострофа.
| Сущность | Символ | Тип |
|---|---|---|
< |
< |
Именованная |
> |
> |
Именованная |
& |
& |
Именованная |
" |
" |
Именованная |
' |
" |
Числовая |
|
Неразрывный пробел | Именованная |
© |
© |
Именованная |
© |
© |
Числовая |
Инструмент поддерживает оба вида: и кодирует, и раскодирует.
Опция «Все символы вне ASCII»
По умолчанию инструмент кодирует только специальные символы: <, >, &, ", ". Кириллица остаётся как есть.
С опцией «Все символы вне ASCII — числовыми сущностями» заменяются и все нелатинские символы: кириллица, эмодзи, типографские знаки. Каждый символ становится числовой сущностью вида П.
Когда это нужно:
| Задача | Зачем |
|---|---|
| Гарантированная совместимость | Если кодировка страницы неизвестна или может быть неверной |
| Защита от проблем с кодировкой | Числовые сущности не зависят от charset |
| Текст в письмах и старых системах | Некоторые системы не поддерживают UTF-8 |
| Отладка | Увидеть, какие именно коды у символов |
Когда можно не включать: если страница в UTF-8, кириллица в тексте работает нормально и без сущностей. Опция — для специфических случаев, а не по умолчанию.
HTML-кодирование и другие кодирования: не путать
Три разных способа кодирования, которые часто путают.
| HTML-кодирование | URL-кодирование | Base64 | |
|---|---|---|---|
| Что кодирует | Спецсимволы разметки | Символы в адресе | Двоичные данные в текст |
| Пример | < → < |
< → %3C |
Тест → 0KLQtdGB0YI= |
| Зачем | Показать как текст, защитить от XSS | Передать в URL | Передать байты в тексте |
| Где используется | HTML-страницы, письма | Адреса, параметры | JSON, JWT, Data URI |
HTML-кодирование — для разметки, URL-кодирование — для адресов, Base64 — для бинарных данных. Это разные задачи.
Безопасно ли раскодировать чужой HTML
Да. Инструмент выводит результат как текст: скрипты не выполняются. Даже если раскодировать строку с <script>, она покажется как текст, а не выполнится.
Это важно, потому что многие инструменты вставляют результат в HTML-страницу как разметку — и тогда скрипт может сработать. Здесь результат безопасен.
Зачем кодировать и раскодировать
| Задача | Что даёт инструмент |
|---|---|
| Показать пример кода | Теги отображаются как текст |
| Безопасная вставка данных | Защита от XSS |
| Разбор чужого HTML | Понять, что закодировано в сущностях |
| Текст для письма | Гарантированная совместимость с кодировкой |
| Отладка | Увидеть, какие символы скрыты за сущностями |
| Подготовка данных для CMS | Вставка без риска сломать разметку |
Ограничения инструмента
- Только текст и HTML-сущности. Инструмент не форматирует HTML и не валидирует разметку.
- Опция «вне ASCII» меняет кириллицу. Результат длиннее и менее читаемый, но совместимее.
- Не заменяет валидатор. Для проверки разметки нужен отдельный инструмент.
- Результат — текст. Он не интерпретируется как HTML, поэтому безопасен.
Как пользоваться: пошагово
- Вставьте текст или HTML с сущностями.
- Отметьте «Все символы вне ASCII», если нужно заменить и кириллицу числовыми сущностями.
- Нажмите «Закодировать» или «Раскодировать» и скопируйте результат.
Типичные ошибки
Вставлять пользовательские данные в HTML без кодирования. Это путь к XSS. Спецсимволы нужно кодировать.
Путать HTML-кодирование с URL-кодированием. < → < в HTML, < → %3C в URL. Разные задачи.
Включать «вне ASCII» без необходимости. Кириллица в UTF-8 работает и без сущностей. Опция нужна для специфических случаев.
Считать, что кодирование заменяет валидацию. Кодирование защищает от XSS, но не проверяет корректность разметки.
Ожидать, что & останется как есть. В HTML & — начало сущности, его нужно кодировать как &.
Забывать про апостроф. В атрибутах он тоже опасен, поэтому кодируется как '.
Вопросы и ответы
Зачем кодировать текст? Чтобы символы < и > показывались как текст, а не воспринимались браузером как теги. Так показывают примеры кода на страницах.
Безопасно ли раскодировать чужой HTML? Да: результат выводится как текст, скрипты не выполняются.
Чем именованные сущности отличаются от числовых? Именованные используют мнемоническое имя (<, ), числовые — код символа (©, '). Инструмент поддерживает оба вида.
Что делает опция «Все символы вне ASCII»? Заменяет и кириллицу, и другие нелатинские символы числовыми сущностями. Полезно для гарантированной совместимости с кодировкой.
HTML-кодирование — это шифрование? Нет. Это способ записи, который любой может обратить. Для защиты данных нужны шифрование или хеширование с солью.
Чем HTML-кодирование отличается от URL-кодирования? HTML-кодирование работает с разметкой (< → <), URL-кодирование — с адресом (< → %3C). Это разные задачи.
Итог
HTML Encoder/Decoder — инструмент для кодирования текста в HTML-сущности и раскодирования обратно. Он поддерживает именованные и числовые сущности, опцию замены всех символов вне ASCII и безопасен при раскодировании: результат выводится как текст, скрипты не выполняются. Используйте его, чтобы показать пример кода, защитить вставку пользовательских данных и разобрать чужой HTML, — и разметка не сломается, а XSS не пройдёт.