Правила для атрибута id в HTML: допустимые значения

Значение атрибута id в HTML должно быть уникальным в пределах документа (или «home subtree») и состоять как минимум из одного символа без пробелов; HTML5 снял требование начинать идентификатор с буквы, тогда как в HTML4 оно было. Практически стоит использовать короткие, читаемые идентификаторы (буквы, цифры, дефис, подчёркивание) и избегать служебных символов — это предотвратит проблемы с CSS‑селекторами, фрагментами URL и JavaScript.

Содержание

• Правила для атрибута id в HTML
• Различия между HTML4 и HTML5
• Синтаксис и допустимые символы (практически)
• Уникальность и область видимости id
• Практические рекомендации по использованию id
• Ошибки и как их исправить
• Частые вопросы (FAQ)
• Источники
• Заключение

Правила для атрибута id в HTML

Атрибут id — глобальный атрибут, он может применяться к любому элементу и служит для однозначной идентификации элемента в документе (ссылки через #, выбор в CSS, доступ из JavaScript). Спецификация ясно формулирует несколько базовых требований: значение id должно быть уникальным в пределах «home subtree» (обычно это весь документ), содержать хотя бы один символ и не содержать пробельных символов — см. спецификацию WHATWG по атрибуту id: https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute.
Также атрибут id входит в перечень глобальных атрибутов: https://html.spec.whatwg.org/multipage/dom.html#global-attributes.

Примеры валидных id:

• header, main-content, user_123

Примеры невалидных/плохих id:

• “main header” (с пробелом) — запрещено
• “” (пустая строка) — запрещено

Пример использования:

<nav id="main-nav">…</nav>
<a href="#main-nav">Перейти к меню</a>
<script>
 const nav = document.getElementById('main-nav');
</script>

Различия между HTML4 и HTML5

В HTML4 спецификация накладывала более жёсткие правила на формат ID-токенов: значение должно было начинаться с латинской буквы и далее могло содержать буквы, цифры, дефисы, подчёркивания, двоеточия и точки — см. W3C HTML 4.01: https://www.w3.org/TR/html401/types.html#type-name.
В HTML5 это ограничение на первый символ снято: теперь правило — хотя бы один символ и отсутствие пробелов; остальные детали — гибче (см. WHATWG: https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute). Иными словами, многие последовательности, допустимые в HTML5, были бы недопустимы в «старом» HTML4.

Последствие для разработчика: современные браузеры принимают id, начинающиеся с цифр или других символов, но совместимость с внешними инструментами (старые парсеры, CSS) стоит учитывать.

Синтаксис и допустимые символы (практически)

Технически HTML5 допускает широкий набор символов (включая Unicode), кроме пробельных символов. Но есть практические ограничения из-за взаимодействия с CSS, URL-фрагментами и инструментами:

• CSS: селектор по id — #id. Если id начинается с цифры или содержит символы, которые мешают синтаксису CSS (пробел, точка, двоеточие и т.п.), селектор нужно экранировать. Простой вариант — использовать селектор по атрибуту:

• [id=“123”]

• Или экранирование в CSS: #\31 23 { /* для id=“123” */ }
  Подробнее про практику можно посмотреть на примерах в справочниках (например, https://htmlbook.ru/html/attr/id).

• JavaScript: document.getElementById(‘идентификатор’) работает для большинства значений id, включая начинающиеся с цифры; то есть JS строгости по началу символа не накладывает.

• URL‑фрагменты: в адресной строке символы вне ASCII могут требовать кодирования, поэтому простые ASCII‑идентификаторы удобнее для создания читаемых ссылок.

Рекомендация: если нужен универсальный и простой в использовании id — используйте латинские буквы, цифры, дефис и подчёркивание (kebab-case или snake_case).

Уникальность и область видимости id

Uniqueness — ключевое требование. Спецификация говорит о необходимости уникальности в пределах «home subtree» элемента (обычно это весь документ). Дубликаты id формально недопустимы и ведут к неожиданностям:

• document.getElementById может вернуть не тот элемент, на который вы надеетесь; поведение в присутствии дубликатов непредсказуемо.
• Ссылки вида #id и ARIA‑атрибуты, которые ссылаются на id, могут работать неправильно.
• Стили через селектор #id применятся ко всем элементам с таким id (браузеры не предотвращают применение стилей), что нарушит семантику.

Поэтому: не дублируйте id; для многократных групп элементов используйте class.

Практические рекомендации по использованию id

• Делайте id короткими и осмысленными: header, user-list, form-login.
• Предпочитайте нижний регистр и kebab-case: main-header, user-item. Это уменьшает вероятность ошибок при обращении из CSS/JS.
• Не используйте пробелы; вместо этого — дефис или подчёркивание.
• Для данных используйте data-атрибуты: data-id, data-user — когда вы хотите привязать данные к элементу, но не делать его уникальным идентификатором для навигации.
• Для форм связывайте label и input через for/id: Email<input id=“email” …>. ARIA и assistive‑технологии часто зависят от корректных id.
• Проверяйте на дубликаты в процессе сборки/рендеринга (lint, тесты, шаблонизатор).

Если нужно быстро выбрать элемент по id и вы не хотите заморачиваться с экранированием CSS — используйте document.querySelector(‘[id=“…”]’) или document.getElementById(‘…’).

Ошибки и как их исправить

• Ошибка: id с пробелом

• Плохо:

  …

• Исправление:

  …

• Ошибка: дублирование id

• Плохо:

  …
  …

• Исправление: использовать уникальные id или class: id=“item-1”, class=“item”

• Ошибка: использование специальных символов без учёта CSS

• Плохо:

  …
  и CSS: #123 {…} (не сработает без экранирования)

• Исправление: [id=“123”] {…} или #\31 23

• Ошибка: попытка хранить данные в id

• Плохо: id=“user42-role-admin”

• Исправление: используйте data-атрибут: data-user-id=“42” data-role=“admin”

Частые вопросы (FAQ)

В: Можно ли начинать id с цифры?
О: В HTML5 — да, спецификация не запрещает; однако в CSS такие id придётся экранировать (#\31 23) или использовать селектор по атрибуту. Для простоты лучше начинать с буквы.

В: Можно ли использовать Unicode (кириллица) в id?
О: Технически допустимо в HTML5, но это осложняет фрагменты URL и совместимость с инструментами. Для переносимости предпочтительнее ASCII.

В: Являются ли id регистрозависимыми?
О: В HTML4 спецификация рассматривала ID‑токены как регистрозависимые; в практике HTML5 лучше придерживаться одного стиля регистра (например, всё в нижнем регистре), чтобы избежать путаницы при обращении из кода.

В: Что лучше — id или class?
О: id — для одиночного уникального элемента; class — для групп/повторяющихся блоков и стилизации. Не заменяйте class на id просто для удобства.

Источники

1. HTML 5.2 — The id attribute (W3C)
2. HTML Standard — The id attribute (WHATWG)
3. HTML Standard — Global attributes (WHATWG)
4. HTML 4.01 — Common attributes / ID tokens (W3C)
5. HTML id Attribute — W3Schools
6. Атрибут id — HTMLbook (ru)

Заключение

Коротко: id в HTML должен быть уникальным, содержать хотя бы один символ и не иметь пробелов; HTML5 снял требование начинать с буквы, но для надёжности и простоты поддержки используйте понятные ASCII‑идентификаторы (буквы, цифры, дефис/подчёркивание). Правильное применение атрибута id делает ваши ссылки, стили и скрипты предсказуемыми и доступными.