HTML-сущности: кодирование спецсимволов
Каждый, кто работал с HTML-кодом, рано или поздно сталкивался с конструкциями вида &, < или ©. Это HTML-сущности — специальные последовательности символов, которые позволяют корректно отображать в браузере знаки, имеющие особое значение в разметке. В этой статье разберём, как они устроены, зачем нужны и когда стоит кодировать текст.
Что такое HTML-сущности
HTML-сущность (HTML entity) — это способ представления символа с помощью специальной текстовой записи. Браузер, встретив такую запись, заменяет её на соответствующий символ при рендеринге страницы. Сущности начинаются с амперсанда & и заканчиваются точкой с запятой ;.
Зачем это нужно? В HTML некоторые символы являются служебными. Например, угловые скобки < и > обозначают начало и конец тегов. Если вы хотите показать пользователю текст <div> как есть, а не создать элемент div, нужно закодировать скобки: <div>.
Именованные и числовые сущности
Существует два формата записи HTML-сущностей:
- Именованные сущности — используют понятное текстовое имя:
&для амперсанда,<для знака «меньше»,©для символа копирайта. Их легко запомнить и читать в коде. - Числовые сущности — используют код символа в таблице Unicode. Бывают десятичные (
&) и шестнадцатеричные (&). Числовой формат универсален и подходит для любого символа, включая эмодзи.
Именованные сущности доступны не для всех символов — их несколько сотен. Числовые же покрывают весь диапазон Unicode, поэтому с их помощью можно закодировать абсолютно любой символ.
Зачем кодировать символы
Кодирование спецсимволов решает несколько задач:
- Корректное отображение. Без кодирования браузер может неверно интерпретировать служебные символы. Незакодированный
<в тексте приведёт к «поломке» разметки: браузер решит, что начинается новый тег. - Защита от XSS-атак. Если пользовательский ввод выводится на странице без кодирования, злоумышленник может внедрить вредоносный JavaScript. Кодирование символов
<,>,&,"и'нейтрализует такие атаки — скрипт превращается в безобидный текст. - Символы, отсутствующие на клавиатуре. С помощью сущностей удобно вставлять специальные символы: тире (
—), кавычки-ёлочки («»), знак евро (€), стрелки и многое другое.
Наиболее часто используемые сущности
Вот список HTML-сущностей, с которыми разработчики сталкиваются чаще всего:
&— амперсанд (&)<— знак «меньше» (<)>— знак «больше» (>)"— двойная кавычка (")'— одинарная кавычка (') — неразрывный пробел©— знак копирайта (©)—— длинное тире (—)«и»— кавычки-ёлочки (« »)…— многоточие (…)
Первые пять из этого списка — обязательные к кодированию при выводе пользовательских данных.
Когда нужно кодировать, а когда — декодировать
Кодирование необходимо при выводе текста в HTML-разметку. Любой контент, поступающий от пользователя (формы, комментарии, поисковые запросы), должен проходить через функцию кодирования перед вставкой в HTML. В PHP для этого используют htmlspecialchars(), в JavaScript — создание текстового узла через document.createTextNode().
Декодирование нужно в обратной ситуации: когда вы получаете HTML-текст и хотите извлечь из него «чистую» строку. Например, при парсинге веб-страниц или обработке RSS-лент содержимое может быть закодировано дважды. В PHP декодирование выполняется функцией html_entity_decode().
Распространённые ошибки
Наиболее частая проблема — двойное кодирование, когда & превращается в &amp;. Это случается, если текст кодируется повторно, например при сохранении в базу данных и повторном выводе. Другая ошибка — забыть указать кодировку в htmlspecialchars(): без параметра ENT_QUOTES одинарные кавычки останутся незакодированными, что может открыть дорогу XSS-уязвимости.
Заключение
HTML-сущности — это фундаментальный механизм веб-разработки, который обеспечивает безопасность и правильное отображение контента. Знание основных сущностей и правил кодирования поможет избежать ошибок в вёрстке и защитить сайт от атак. Не пренебрегайте этим простым, но важным инструментом.
Быстро закодировать или декодировать HTML-сущности вы можете с помощью нашего инструмента кодирования HTML-сущностей. Если вам также нужно работать с URL-кодированием, воспользуйтесь кодировщиком URL.