Полное руководство по HTML-сущностям
HTML-сущности — один из самых фундаментальных, но часто неправильно понимаемых аспектов веб-разработки. Они являются механизмом, позволяющим браузерам отображать символы, которые в противном случае были бы интерпретированы как HTML-разметка, и играют критическую роль в веб-безопасности. Независимо от того, кодируете ли вы специальные символы для предотвращения атак межсайтового скриптинга, отображаете ли математические символы или обеспечиваете корректный рендеринг контента в разных кодировках, понимание HTML-сущностей необходимо каждому веб-разработчику.
Что такое HTML-сущности?
HTML-сущность — это последовательность символов, представляющая один символ в HTML. Сущность начинается с амперсанда (&) и заканчивается точкой с запятой (;). Когда браузер встречает сущность, он заменяет её соответствующим символом во время рендеринга. Этот механизм позволяет включать в HTML символы, которые иначе были бы невозможны или проблематичны.
<) начинает тег, знак больше (>) завершает тег, а амперсанд (&) начинает ссылку на сущность. Если вы хотите отобразить эти символы как видимый контент, а не как разметку, вы должны закодировать их как сущности.
Распространённые HTML-сущности
Хотя HTML определяет более 2 000 именованных сущностей, лишь некоторые из них часто используются в повседневной веб-разработке. Вот сущности, с которыми вы столкнётесь и будете использовать чаще всего:
Пять обязательных сущностей
| Символ | Именованная сущность | Десятичная сущность | Шестнадцатеричная сущность | Применение |
|---|---|---|---|---|
| & | & | & | Всегда необходимо кодировать, чтобы избежать неоднозначности со ссылками на сущности | < |
| < | < | < | Необходимо кодировать, чтобы предотвратить открытие HTML-тегов | > |
| > | > | > | Необходимо кодировать, чтобы предотвратить закрытие HTML-тегов | " |
| " | " | " | Необходимо кодировать внутри значений атрибутов в двойных кавычках | ' |
| ' | ' | Необходимо кодировать внутри значений атрибутов в одинарных кавычках | Неразрывный пробел (предотвращает перенос строки) | Символ авторского права |
Часто используемые символьные сущности
| Символ | Именованная сущность | Описание |
|---|---|---|
| Символ зарегистрированного товарного знака | Символ товарного знака | Тире (длинное тире) |
| Короткое тире (для диапазонов) | Левая двойная угловая кавычка | Правая двойная угловая кавычка |
| Символ маркера списка | Горизонтальное многоточие (три точки) | Registered trademark symbol |
| ™ | ™
| Trademark symbol |
| — | —
| Em dash (long dash) |
| – | –
| En dash (short dash, for ranges) |
| « | «
| Left-pointing double angle quotation mark |
| » | »
| Right-pointing double angle quotation mark |
| • | •
| Bullet character |
| … | …
| Horizontal ellipsis (three dots) |
Числовые и именованные сущности
HTML-сущности бывают двух форм: именованные и числовые. Понимание разницы помогает выбрать правильный тип в каждой ситуации.
Именованные сущности
< представляет знак меньше, а © — символ авторского права. Именованные сущности легче читать и запоминать, что делает ваш исходный HTML-код более удобным для сопровождения. Однако именованные сущности существуют только для ограниченного набора символов — около 2 000, в то время как в Unicode более 140 000 символов.
Числовые сущности
Числовые сущности ссылаются на символы по их кодовой позиции Unicode. Они бывают двух форм: десятичной и шестнадцатеричной. Десятичные числовые сущности используют формат &#NNN;, где NNN — десятичная кодовая позиция. Шестнадцатеричные сущности используют формат &#xHHH;, где HHH — шестнадцатеричная кодовая позиция. Например, символ авторского права можно записать как © (десятичный) или © (шестнадцатеричный).
Числовые сущности могут представлять любой символ Unicode, что делает их незаменимыми для символов, не имеющих именованных ссылок. Если вам нужно отобразить редкий CJK-символ, глиф исторической письменности или эмодзи без именованной сущности, вы должны использовать числовую форму.
Когда что использовать
- <, >, ", ') и распространённых символов, таких как ©, ®, ™, используйте именованные сущности. Они более читаемы и самодокументируемы.
- Используйте числовые сущности, когда нужный вам символ не имеет именованной сущности, или когда вы программно генерируете HTML и нуждаетесь в единообразном, универсальном методе кодирования.
- Используйте шестнадцатеричные числовые сущности при работе с кодовыми позициями Unicode, поскольку шестнадцатеричная система является стандартным представлением в документации и таблицах символов Unicode.
Когда использовать HTML-сущности
Знать, когда использовать сущности, так же важно, как и знать, как их использовать. Вот основные сценарии, в которых сущности необходимы или полезны:
1. Отображение зарезервированных символов
<. Если вы напишете голый <, браузер попытается разобрать его как начало HTML-тега, что может сломать макет вашей страницы или создать уязвимость безопасности.
2. Предотвращение неоднозначности амперсанда
Амперсанд, за которым следует буква и точка с запятой, всегда интерпретируется как ссылка на сущность. Если в вашем контенте есть амперсанд, не являющийся частью сущности (например, в "Tom & Jerry"), вы должны закодировать его как &. Некодированный амперсанд, за которым следует текст, случайно совпадающий с именем сущности, будет декодирован неправильно. Например, некодированная строка "AT&T" может превратиться в "AT&T", если браузер интерпретирует &T как ссылку на сущность (хотя &T не является действительной сущностью, такое поведение технически некорректно).
3. Включение символов, отсутствующих на клавиатуре
Такие символы, как тире, символ авторского права и математические операторы, может быть трудно ввести на стандартной клавиатуре. Сущности предоставляют надёжный способ включения этих символов без зависимости от метода ввода редактора или таблицы символов. Например, — обычно проще ввести, чем искать символ тире на клавиатуре.
4. Неразрывный пробел
Сущность создаёт неразрывный пробел, который предотвращает разрыв строки браузером в этой позиции. Это важно для сохранения связанных слов на одной строке, например, "10 kg", "Глава 3" или названий брендов, которые не должны разделяться переносом строки. Она также часто используется для создания визуальных отступов в макетах, где CSS неуместен.
Влияние на безопасность: защита от XSS
Кодирование HTML-сущностей — одна из самых важных линий защиты от атак межсайтового скриптинга (XSS). XSS возникает, когда злоумышленник может внедрить исполняемый код в веб-страницу, просматриваемую другими пользователями. Кодирование сущностей предотвращает это, преобразуя опасные символы в их безопасные эквиваленты-сущности.
Как кодирование сущностей предотвращает XSS
и страница отображает это без кодирования, браузер выполнит скрипт. Однако если вывод закодирован сущностями, он становится <script>alert('xss')</script>, и браузер отображает это как буквальный текст, а не выполняет код.
Правила кодирования для конкретных контекстов
Кодирование сущностей работает в контексте HTML-контента и атрибутов, но разные контексты требуют разных стратегий кодирования:
- <, >, & как сущности. Это предотвращает внедрение новых HTML-тегов.
- <, >, &, ", ' как сущности. Кавычки должны быть закодированы, чтобы предотвратить выход за пределы значения атрибута.