Зачем кодировать '&' как '&' в HTML5: анализ W3C

Быстрый ответ

Для обеспечения корректного отображения HTML-документа и избежания ошибок, символ & следует кодировать как &. Необдуманное использование амперсанда может привести к сбоям.

Пример правильного использования: Особенность символа & заключается в том, что на странице он возвращается обратно в &, что исключает путаницу с другими HTML-сущностями, например, < или ©.

Иллюстрация: Строка Cookies & Cream в конечном итоге отобразится как Cookies & Cream.

Разве обязательно проводить кодирование? Следует вспомнить о валидности и безопасности

Всегда стоит кодировать символ & как & в атрибутах HTML, чтобы обеспечить валидность документа и минимизировать риски безопасности. Это особенно важно, когда речь идет о данных, вводимых пользователем: неэкранированный амперсанд может привести к нежелательному вводу данных, чтобы бы потенциально создать уязвимости.

Соответствие HTML, предсказуемость и совместимость

Для того чтобы HTML-код вашего сайта был совместим с различными браузерами и инструментами и не вызывал ошибок отображения, он должен строго соответствовать стандартам W3C.

HTML5 и его скрытая толерантность

HTML5 может иногда прощать использование неэкранированного &, однако для обеспечения безопасности всегда лучше кодировать & как &. Это исключает возможные неоднозначности, которые могут возникать, если контекст вокруг & напоминает HTML-сущность.

Визуализация

Кодирование в HTML можно представить как перевод для браузеров.

Язык для общения:              "Я мог бы есть пиццу и мороженое каждый день!"

Язык для веб-браузера (HTML):   "Я мог бы есть пиццу & мороженое каждый день!"

В каких случаях следует использовать &, а не просто &?

• Воспринимайте & как работящего бобра, напряженно стремящегося создать порядок:

Без кодирования:   "Я мог бы есть пиццу &... стоп, что это за сущность?" 🤷‍♂️

С кодированием:    "Я мог бы есть пиццу & мороженое..." 👍

Соблюдайте последовательность – ваш новый лучший друг

Всегда используйте & для поддержания последовательности в коде. Ваши коллеги, которые будут работать с вашими проектами, оценят четкость вашего кода. Для легкой совместимости между платформами следуйте общепринятым стандартам.

Где и когда следует проводить кодирование

Использование неэкранированных амперсандов в атрибутах HTML считается недопустимым. Всегда кодируйте их для корректного парсинга. Также не забывайте кодировать их в текстовом содержимом, чтобы избежать путаницы с HTML-сущностями. И, конечно, не пренебрегайте URL: правильное кодирование обеспечивает корректный парсинг и улучшает SEO показатели.

Как избежать подводных камней при работе с URL

Амперсанды в URL означают параметры запроса и всегда должны быть кодированы:

Безопасная HTML ссылка:

<a href="https://example.com/?key1=value1&amp;key2=value2">Ссылка с параметрами</a>
<!-- Я просто ссылка, без подводных камней! – скажет она -->

Амперсанды в URL выступают в роли разделителей параметров, и их корректное восприятие оказывается критически важным для правильного функционирования сайта.

Полезные материалы

1. Справочник символьных сущностей HTML 4 — официальная таблица W3C для кодирования символов в HTML.
2. HTML Стандарт — все подробности про символьные сущности и их использование в современном HTML.
3. Влияет ли на SEO использование уникальных заголовков вместо общих? — дискуссия о влиянии кодирования URL на SEO.
4. HTML Символьные сущности — инструкция по использованию HTML-сущностей от W3Schools.
5. Glyphs | CSS-Tricks — объяснение важности кодирования спецсимволов в HTML.