Разрешенные символы в DOM ID: тире, подчеркивания и другие

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

Для идентификаторов DOM в HTML верно следующее: они должны начинаться с букв (A-Z/a-z) и могут включать буквы, цифры (0-9), дефисы (-), подчеркивания (_), двоеточия (:) и точки (.):

<div id="id-123"></div> <!-- Верный идентификатор, проблем не возникнет! 👍 -->

Начинать идентификатор с цифр или использовать специальные символы противоречит правилам:

<div id="123abc"></div> <!-- Подобное использование ошибочно 😅 -->

Важно обеспечивать уникальность идентификаторов, ведь в рамках одного документа они должны быть не повторяющимися.

Правила идентификаторов в HTML и XHTML

Правила допускается символов в атрибуте ID в HTML и XHTML отличаются. HTML крайне толерантен в этом отношении, XHTML же строго следует правилам XML.

От простого к сложному: символы и строки

UTF-16: представление DOMString

В JavaScript идентификаторы обозначаются типом DOMString с кодировкой UTF-16, что позволяет использовать практически любой символ UTF-16. Однако следование стандартам HTML обязательно для избежания ошибок.

Подробнее об этом расскажет наш спикер на видео

Специальные символы: использовать или нет?

Специальные символы, отличные от стандартных, а также пробелы или знаки пунктуации (кроме дефисов и подчеркиваний), использовать, несмотря на приятность их восприятия, все же не стоит.

Взаимодействие с двоеточиями: использование пространств имён XML

В XHTML идентификаторы с двоеточиями имеют большое значение из-за их роли в XML namespaces. В XHTML значительно больше внимания уделяется соблюдению правил, чем в HTML.

Упрощаем себе жизнь

Исторические особенности HTML

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

Важность доступности

Ваши идентификаторы могут взаимодействовать с скринридерами, инструментами доступности и ролями ARIA Landmark. Важно сделать их максимально очевидными и информативными.

Визуализация — понятные и четкие обозначения

Представьте, что символы стоят в очереди за правом быть частью вашего "Города идентификаторов":

 Добро пожаловать в "Город идентификаторов"! Ваш адрес соответствует символу вашего ID. 🏠

[🏠1a] [🏠-2b] [🏠_3c] ... [🏠N]
|         |        |            |
Допустимо! Допустимо! Допустимо! ... Допустимо!

Адреса, основанные на недопустимых символах, не пройдут отбор и не смогут стать частью "Города идентификаторов":

В нашем "Городе идентификаторов" каждый адрес начинается с буквы или подчеркивания, идущих впереди цифр, дефисов, букв или подчеркиваний.

 **Пример ID дома: [🏠_myHouse123]**  <!-- В продаже: уютный дом с тремя комнатами! -->

Если ваш идентификатор состоит только из допустимых символов, добро пожаловать в "Город идентификаторов"!

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

1. Глобальная структура HTML-документа – Спецификация W3C, включая атрибут id.
2. Свойство id элемента – Веб API | MDN – Подробные примеры и описания использования атрибута id.
3. HTML Стандарт – Актуальная спецификация WhatWG для атрибута ID.
4. Разница между ID и классом | CSS-Tricks – Анализ ID по сравнению с классами и наиболее эффективные практики их использования.
5. Глобальный атрибут id в HTML – Руководство по использованию атрибута id и примеры.
6. Какие значения могут быть у атрибута id в HTML? – Stack Overflow – Обсуждение сообщества о атрибуте id в HTML.
7. Представление в HTML – Обзор W3C представления символов в HTML.