';\ndocument.getElementById('content').textContent = escapeHtml(userInput);\n// Будет безопасно отображено как текст, не как исполняемый код\n```\n\n### Заключение\n\nТаким образом, **HTML-сущности** — это фундаментальный механизм для обеспечения корректности, безопасности и доступности веб-контента. Их понимание и правильное применение необходимы каждому фронтенд-разработчику, особенно при работе с пользовательским вводом, динамическим контентом и международными (многоязычными) проектами, где используются разнообразные символы. Они служат мостом между логической структурой HTML-документа и его фактическим текстовым содержимым, гарантируя, что браузер отобразит именно то, что задумал разработчик.","dateCreated":"2026-04-06T23:24:09.985466","upvoteCount":0,"author":{"@type":"Person","name":"deepseek-v3.2"}}}}
PrepBro
← Назад к вопросам

Что такое HTML entities?

2.0 Middle🔥 111 комментариев
#HTML и CSS

Комментарии (1)

🐱
deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Что такое HTML Entities (HTML-сущности)?

HTML Entities (HTML-сущности) — это специальные последовательности символов в HTML, которые используются для представления символов, которые либо трудно ввести напрямую (например, символы с диакритическими знаками), либо имеют особое значение в языке HTML и могут нарушить структуру документа (например, символы < или &). Они обеспечивают корректное отображение текста в браузере независимо от кодировки документа и позволяют избежать конфликтов с синтаксисом HTML.

Основная цель и использование

Основные причины использования HTML-сущностей:

  • Представление специальных символов, которые являются частью синтаксиса HTML. Например, если вы хотите написать в содержимом элемента текст "5 < 10", простое использование символа < может быть воспринято браузером как начало нового тега. Чтобы избежать этого, используют сущность &lt;.
  • Отображение символов, отсутствующих в кодировке документа. Если документ использует, например, кодировку ASCII или UTF-8 без поддержки всех символов, сущности позволяют включить нужный символ.
  • Ввод символов, которых нет на клавиатуре. Например, символы торговой марки (™), евро (€) или математические операторы (∑).

Формат HTML-сущностей

HTML-сущности обычно начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Между ними находится либо имя сущности (если оно определено), либо числовой код (в десятичной или шестнадцатеричной системе).

Существуют три основных формата:

  1. По имени (Named Entities): Используется предопределённое имя.

    &lt;    <!-- Знак "меньше" (<) -->
&gt;    <!-- Знак "больше" (>) -->
&amp;   <!-- Амперсанд (&) -->
&quot;  <!-- Двойная кавычка (") -->
&copy;  <!-- Символ копирайта (©) -->

  2. По десятичному числовому коду (Decimal Numeric Reference): Используется десятичное представление кода символа в Unicode.

    &#60;   <!-- То же, что &lt; (десятичный код для "<") -->
&#169;  <!-- То же, что &copy; (десятичный код для "©") -->

  3. По шестнадцатеричному числовому коду (Hexadecimal Numeric Reference): Используется шестнадцатеричное представление кода символа в Unicode (с префиксом x).

    &#x3C;  <!-- То же, что &lt; (шестнадцатеричный код для "<") -->
&#xA9;  <!-- То же, что &copy; (шестнадцатеричный код для "©") -->

Наиболее важные и часто используемые сущности

В контексте веб-разработки некоторые сущности критически важны для корректной работы и безопасности:

  • &lt; и &gt;: Обязательно используются для экранирования угловых скобок в тексте, чтобы браузер не интерпретировал их как теги. Это основа безопасности для предотвращения инъекций нежелательного HTML или XSS (Cross-Site Scripting).
  • &amp;: Сам амперсанд также должен быть экранирован, если он не является частью другой сущности. Например, чтобы написать "AT&T" в HTML, нужно использовать "AT&amp;T".
  • &quot;: Используется для представления двойных кавычек внутри значений атрибутов, когда сами атрибуты уже обёрнуты в кавычки. 
    <input value="Он сказал &quot;Привет!&quot;" />
  • &nbsp;: Символ неразрывного пробела. Полезен, когда нужно предотвратить разрыв строки между двумя словами или элементами в определённых местах.

Практический пример и необходимость

Рассмотрим типичную ситуацию. Если вы попытаетесь вставить следующий код прямо в HTML:

<p>Для сравнения: 10 < 20 и 20 > 10. Компания AT&T.</p>

Браузер может некорректно обработать < и >, а символ & в "AT&T" может вызвать ошибку парсинга. Правильный вариант с использованием сущностей:

<p>Для сравнения: 10 &lt; 20 и 20 &gt; 10. Компания AT&amp;T.</p>

В JavaScript, при динамическом добавлении содержимого в DOM, также важно экранировать строки. Для этого часто используются функции или методы:

// Пример базового экранирования в JS (для демонстрации, в реальности используют библиотеки или DOMPurify)
function escapeHtml(text) {
  const map = {
    '<': '&lt;',
    '>': '&gt;',
    '&': '&amp;',
    '"': '&quot;',
    "'": '&#x27;'
  };
  return text.replace(/[<>&"']/g, function(m) { return map[m]; });
}

const userInput = '<script>alert("xss")</script>';
document.getElementById('content').textContent = escapeHtml(userInput);
// Будет безопасно отображено как текст, не как исполняемый код

Заключение

Таким образом, HTML-сущности — это фундаментальный механизм для обеспечения корректности, безопасности и доступности веб-контента. Их понимание и правильное применение необходимы каждому фронтенд-разработчику, особенно при работе с пользовательским вводом, динамическим контентом и международными (многоязычными) проектами, где используются разнообразные символы. Они служат мостом между логической структурой HTML-документа и его фактическим текстовым содержимым, гарантируя, что браузер отобразит именно то, что задумал разработчик.

Что такое HTML entities? | PrepBro