Сущности HTML

Некоторые символы в HTML особые. Если в обычном тексте страницы набрать сырой <, браузер может решить, что начинается тег. Если набрать сырой &, он может решить, что начинается сущность. Символьные сущности — безопасные коды, которые показывают эти знаки как видимый текст, а не сбивают разборщик. Без них урок, который хочет показать разметку, начинает её выполнять: ломается вёрстка, появляются лишние элементы, и ученик винит пример, хотя проблема — незакодированный зарезервированный символ. Эта сессия учит самой системе сущностей — не только один раз вставить <. Освоив её, вы сможете писать туториалы, документацию и справочные страницы, где <, > и & надёжно видны как текст в любом редакторе. Думайте о сущностях как о мосте между тем, что хотите видеть, и тем, что HTML интерпретирует: код в исходнике отличается от глифа на экране — и это сделано намеренно. На учебных страницах именно этот мост отделяет читаемый пример от сломанного документа.

Что такое сущность HTML?

Сущность HTML — закодированный способ записать символ в разметке. Большинство именованных сущностей начинается с & и заканчивается ;. Браузер при отрисовке подменяет код настоящим символом. Сущности чаще всего нужны для символов, которые HTML уже использует как синтаксис разметки, а иногда — для знаков, которые неудобно набирать. Есть и числовые формы (например < для <), но в этой сессии акцент на самых частых именованных: lt, gt, amp, nbsp, плюс полезные quot и copy. Конечная точка с запятой — не украшение: она закрывает сущность, чтобы разборщик понял, где код кончается и начинается обычный текст. Без неё браузер может «съесть» следующие буквы или показать странный результат. Учите пару &…; как цельную единицу — так избежите большинства ошибок новичков. Когда видите сущность в примере, читайте слева направо: амперсанд, имя, точка с запятой — три части, одна единица.

Прямой ответ

Используйте сущности, когда символ как сырой текст был бы небезопасен или неоднозначен. Запомните в первую очередь: < для <, > для >, & для &, и   для неразрывного пробела. Всегда завершайте именованную сущность ;. Применяйте их в абзацах и внутри примеров, которые учат HTML, всякий раз, когда сырой символ сломал бы или неверно прочитал документ. Если из этой сессии запомнить одно правило, запомните это: показать зарезервированный знак — не то же самое, что активировать его как синтаксис, и сущность — граница между ними. Остальное (аккуратный nbsp, не кодировать обычную прозу, сравнивать исходник и экран) следует той же честности разметки. На учебных страницах рефлекс < / > / & становится мышечной памятью: сначала escape, потом проверка в браузере. Эта привычка экономит часы отладки, когда туториал «съедает» собственные примеры тегов.

Распространённые сущности одним взглядом

Зарезервированные символы в предложениях

Когда в обычном абзаце вы учите или упоминаете теги, показывайте их сущностями, чтобы они остались текстом. Туториал, который пишет «используйте тег <p>» без escape, может создать настоящий абзац посреди фразы. То же с <div>, <span>, <a> и любым другим тегом, который хотите процитировать. Амперсанды в названиях брендов (AT&T), заголовках фильмов (Tom & Jerry) или в тексте со знаком «и» тоже нуждаются в &, если хотите видимый глиф без риска начать неверную сущность. Тренируйте привычку: если символ — часть синтаксиса HTML и вы хотите видеть его как глиф — кодируйте. В технической документации этот шаблон встречается десятки раз на странице — поэтому рефлекс стоит автоматизировать до длинного гайда.

Читаем пример

• <p> показывает символы <p>, не создавая элемент абзаца на этом месте
• Tom & Jerry отображается как Tom & Jerry
• Сырой & без допустимой сущности может вызвать проблемы разбора
• Обычным буквам вроде p и Jerry сущности не нужны
  Шаблон масштабируется: в одной фразе может быть несколько сущностей без разрыва потока. Частая ошибка — перепутать < и > при показе закрывающих тегов или забыть точку с запятой и увидеть «съеденные» буквы. Всегда сравнивайте исходный код с отрисовочным текстом — разница между <p> в исходнике и <p> на экране и есть работа сущности. Увидев это раз, правило перестаёт быть магией и становится механикой. Держите в уме контраст: исходник = код; экран = глиф.

Неразрывные пробелы

  — пробел, который браузеры не должны использовать как мягкую точку переноса между соединёнными частями. Он полезен, чтобы держать короткую подпись с числом или слова, которые должны остаться вместе. Не разбрасывайте его повсюду как инструмент вёрстки — для настоящего дизайна предпочитайте обычные пробелы и CSS. В цифровой типографике неразрывный пробел решает узкую задачу: «Глава 4», «10 кг», «стр. 12» или короткое имя, которое не должно рваться в конце строки. Если   имитирует отступы, колонки или отступы абзаца, вы боретесь с CSS невидимыми символами — это хрупко, трудно поддерживать и плохо для доступности. Оставляйте   для склейки типографских единиц; для остального визуального интервала используйте margin, padding, gap и white-space. Сомневаетесь — начните с обычного пробела; меняйте на   только если видите некрасивый разрыв между частями, которые должны быть вместе.

Именованные сущности против ввода символа

Для многих знаков можно вставить сам символ, если файл сохранён как UTF-8 (см. сессию Charset позже). Сущности особенно важны для <, > и &, потому что эти символы — часть синтаксиса HTML. Знание распространённых именованных форм делает учебные страницы и примеры надёжными в разных редакторах. Вставка «©» или «→» в UTF-8 часто работает хорошо; вставка сырого < посреди абзаца туториала почти никогда небезопасна. Поэтому сессия настаивает на сущностях для трёх синтаксических символов, даже если остальной документ свободно использует Unicode. Редакторы, копирование между системами и сборщики иногда меняют кодировку; < и & переживают такие путешествия лучше двусмысленного глифа. Когда вы учите HTML внутри HTML, именованные сущности — общий язык автора, разборщика и ученика. Сначала освоите их; потом решайте по случаю, нужен ли декоративному знаку сущность или прямой Unicode.

Практика в редакторе

1. Напишите абзац, показывающий текст <div> через < и >.
2. Добавьте строку с безопасно записанным AT&T через &.
3. Поставьте   между коротким заголовком и числом, которые не хотите разделять по строкам.
4. Откройте страницу и убедитесь, что символы выглядят правильно.
5. Посмотрите исходник и найдите коды сущностей — сравните исходник с отрисованным текстом.
6. Намеренно забудьте точку с запятой у одной сущности, обновите страницу, заметьте странный результат, затем исправьте.
   Эти шаги замыкают цикл: написать, отрисовать, проверить исходник и намеренно вызвать ошибку. Шаг 6 особенно полезен — увидеть, что бывает без ;, закрепляет правило лучше простого чтения. Если ведёте проект документации, повторите тот же шаблон в трёх местах: прозаический абзац, пример тега и строка с торговой маркой, содержащей &. Мысленно отмечайте каждый контраст исходник/экран, пока рефлекс не станет автоматическим.

Ошибки, которые ломают сущности

• Забыть ; в конце сущности
• Писать одиночный & в тексте, который не является полной сущностью (когда нужен амперсанд, предпочитайте &)
• Кодировать обычные буквы и слова, которым сущности никогда не были нужны
• Использовать   вместо margin и вёрстки вместо изучения интервалов в CSS
• Путать < и > при показе примеров тегов
  Другие частые сбои: копировать разметку из блога, который уже «съел» сущности (в редакторе видно <, и вы снова вставляете сырое); смешивать HTML-сущности с URL-escape (%3C) не в том месте; считать, что атрибуты и текст абзаца подчиняются одним правилам без чтения контекста. В атрибутах кавычки и амперсанды тоже важны — но центральный рефлекс этой сессии тот же: видимый синтаксический символ → сущность. Просматривайте страницу в режиме исходника, когда пример «пропадает» или делает дыру в вёрстке. Исправлять рано дешевле, чем отлаживать весь туториал потом.

Итог

• Сущности безопасно показывают зарезервированные или особые символы в тексте HTML
• Начните с <, >, & и  
• Именованные сущности начинаются с & и заканчиваются ;
• Кодируйте угловые скобки и амперсанды, когда они должны быть текстом
• Не кодируйте сущности обычные буквы прозы без причины
• Сущности особенно полезны, когда HTML-страница учит HTML
  Держите эти шесть строк как мысленную шпаргалку. В следующих сессиях о символах и charset снова появится привычка «код в исходнике / глиф на экране» — но ядро синтаксических сущностей (lt, gt, amp) уже должно быть твёрдым. Если можете объяснить коллеге, почему сырой Tom & Jerry рискован, а Tom & Jerry безопасен, вы освоили суть урока. Практикуйте, пока escape трёх синтаксических символов не станет автоматическим.