Каковы допустимые значения атрибута id в HTML?

при создании id атрибуты для HTML-элементов, какие правила существуют для значение?

21 ответов


на HTML 4, ответ технически:

маркеры ID и NAME должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("-"), подчеркиваний ("_"), двоеточий ( " :") и периодов (".").

HTML 5 еще более разрешительно, говоря только, что идентификатор должен содержать по крайней мере один символ и не может содержать пробелов.

атрибут id чувствителен к регистру в XHTML.

как чисто практический вопрос, вы можете избежать определенных символов. Периоды, двоеточия и " # " имеют особое значение в селекторах CSS, поэтому вам придется избегать этих символов, используя обратная косая черта в CSS или двойной обратный Слэш в строка селектора передана jQuery. Подумайте о том, как часто вам придется избегать персонажа в ваших таблицах стилей или коде, прежде чем вы сойдете с ума от периодов и двоеточий в идентификационная карточка.

например, объявление HTML <div id="first.name"></div> действителен. Вы можете выбрать этот элемент в CSS как #first\.name и в jQuery так:$('#first\.name'). но если вы забыли слеш, $('#first.name'), у вас будет совершенно действительный селектор, ищущий элемент с id first, а также имеющие класс name. Это ошибка, которую легко не заметить. Вы могли бы быть счастливее в долгосрочной перспективе, выбирая id first-name (дефис, а не точка), вместо.

вы можете упростить вашу задачи разработки, строго придерживаясь соглашения об именах. Например, если вы полностью ограничиваете себя строчными символами и всегда отделяете слова дефисами или подчеркиваниями (но не обоими, выберите один и никогда не используйте другой), у вас есть простой в запоминании шаблон. Вы никогда не будете удивляться " было это firstName или FirstName?- потому что ты всегда будешь знать, что надо печатать!--9-->. Предпочитаете верблюжий чехол? Тогда ограничьте себя этим, никаких дефисов или подчеркиваний, и всегда, последовательно использовать верхний регистр или нижний регистр для первого символа, не смешивайте их.


теперь очень неясной проблемой было то, что по крайней мере один браузер, Netscape 6, неправильно обработанные значения атрибутов id как чувствительные к регистру. Это означало, что если бы вы набрали id="firstName" в вашем HTML (нижний регистр 'f') и #FirstName { color: red } в вашем CSS (верхний регистр 'F'), что Багги браузер не удалось бы установить цвет элемента в красный. Во время этого редактирования, апрель 2015, я надеюсь, что вы не просят поддержать Netscape 6. Считайте это исторической сноской.


с спецификация HTML 4:

маркеры ID и NAME должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ( " - " ), подчеркиваний ("_"), двоеточий ( " :") и периодов (".").

распространенной ошибкой является использование идентификатора, который начинается с цифры.


вы можете технически использовать двоеточия и точки в атрибутах id/name, но я настоятельно рекомендую избегать обоих.

в CSS (и нескольких библиотеках JavaScript, таких как jQuery) период и двоеточие имеют особое значение, и вы столкнетесь с проблемами, если не будете осторожны. Периоды-это селекторы классов, а двоеточия-псевдо-селекторы (например., ": hover " для элемента, когда мышь находится над ним).

Если вы даете элементу идентификатор " my.круто: вещь", ваш селектор CSS будет выглядеть так:

#my.cool:thing { ... /* some rules */ ... }

что на самом деле говорит: "элемент с идентификатором" мой", класс "круто" и "вещь" псевдо-селектор " в CSS-speak.

придерживайтесь A-Z любого случая, чисел, подчеркиваний и дефисов. И, как сказано выше, убедитесь, что ваши идентификаторы уникальны.

Это должно быть вашей первой заботой.


jQuery тут обрабатывать любое допустимое имя ID. Вам просто нужно избежать метасимволов (т. е. точек, точек с запятой, квадратных скобок...). Это как сказать, что JavaScript имеет проблему с кавычками только потому, что вы не можете написать

var name = 'O'Hara';

селекторы в API jQuery (см. Нижнюю заметку)


Строго он должен соответствовать

[A-Za-z][-A-Za-z0-9_:.]*

но у jquery, похоже, есть проблемы с двоеточиями, поэтому их лучше избегать.


в HTML5:

избавляется от дополнительных ограничений на атрибут id посмотреть здесь. Единственными оставшимися требованиями (кроме уникальности в документе) являются:

  1. значение должно содержать хотя бы один символ (не может быть пустым)
  2. он не может содержать пробелов.

PRE-HTML5:

ID должен соответствовать:

[A-Za-z][-A-Za-z0-9_:.]*
  1. должен начинаться с A-Z или a-z персонажи
  2. может содержать - (дефис), _ (подчеркивание), : (двоеточие) и . (период)

а не : и . потому что:

например, идентификатор может быть помечен как " a.b: c " и ссылается в таблице стилей как #a.b: c но так же, как и id для элемента, это может означать id "a", class "b", псевдо-селектор "c". Лучше всего избегать путаницы и держаться подальше от использования . и вообще.


HTML5: допустимые значения для атрибутов ID & Class

начиная с HTML5, единственными ограничениями на значение идентификатора являются:

  1. должен быть уникальным в документе
  2. не должно содержать пробелов
  3. должен содержать хотя бы один символ

аналогичные правила применяются к классам (за исключением уникальность, конечно).

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

в HTML 4 значения ID должны начинаться с буквы, за которой могут следовать только буквы, цифры, дефисы, подчеркивания, двоеточия и точки.

в HTML5 они действительны:

<div id="999"> ... </div>
<div id="#%LV-||"> ... </div>
<div id="____V"> ... </div>
<div id="⌘⌥"> ... </div>
<div id="♥"> ... </div>
<div id="{}"> ... </div>
<div id="©"> ... </div>
<div id="♤₩¤☆€~¥"> ... </div>

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

например, в HTML5 действителен следующий идентификатор:

<div id="9lions"> ... </div>

однако это недопустимо в CSS:

из CSS2.1 спецификация:

4.1.3 символы и регистр

в CSS коды (включая имена элементов, классы и ID в селекторы) могут содержать только символы [a-zA-Z0-9] и ISO 10646 символы U+00A0 и выше, плюс дефис ( - ) и подчеркивание (_); они не могут начинаться с цифры, два тире, или дефис следуют цифры.

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


W3C ссылок

в HTML5

3.2.5.1 в id атрибут

на id атрибут задает уникальный идентификатор (ID) своего элемента.

значение должно быть уникальным среди всех идентификаторов в домашних элемента поддерево и должно содержать хотя бы один символ. Значение не должно содержать пробелы.

Примечание: никакие другие ограничения на какую форму ИД может принять; в в частности, идентификаторы могут состоять только из цифр, начать с цифры, начать с подчеркиванием, состоят только из пунктуации, так далее.

3.2.5.7 в class атрибут

атрибут, если он указан, должен иметь значение, представляющее собой набор маркеры, разделенные пробелами, представляющие различные классы, элемент принадлежит.

классы, назначенные HTML-элементу, состоят из всех классы, возвращаемые при разделении значения атрибута class на пространства. (Дубликаты игнорируются.)

есть никаких дополнительных ограничений на токены, которые авторы могут использовать в атрибут class, но авторам рекомендуется использовать значения, которые опишите характер содержания, а не значения, которые описывают желаемое представление содержания.


на практике многие сайты используют id атрибуты, начинающиеся с чисел, хотя это технически недопустимый HTML.

на HTML 5 проект спецификации ослабляет правила для id и name атрибуты: теперь это просто непрозрачные строки, которые не могут содержать пробелы.


дефисы, подчеркивания, точки, двоеточия, цифры и буквы допустимы для использования с CSS и JQuery. Следующее должно работать, но оно должно быть уникальным на всей странице, а также должно начинаться с буквы [A-Za-z].

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

<html>
<head>
<title>Cake</title>
<style type="text/css">
    #i\.Really\.Like\.Cake {
        color: green;
    }
    #i\:Really\:Like\:Cake {
        color: blue;
    }
</style>
</head>
<body>
    <div id="i.Really.Like.Cake">Cake</div>
    <div id="testResultPeriod"></div>

    <div id="i:Really:Like:Cake">Cake</div>
    <div id="testResultColon"></div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var testPeriod = $("#i\.Really\.Like\.Cake");
            $("#testResultPeriod").html("found " + testPeriod.length + " result.");

            var testColon = $("#i\:Really\:Like\:Cake");
            $("#testResultColon").html("found " + testColon.length + " result.");
        });
    </script>
</body>
</html>

в HTML5

имея в виду, что ID должен быть уникальным, т. е.. в документе не должно быть нескольких элементов с одинаковым значением id.

правила о содержимом ID в HTML5 (помимо того, что уникальны):

This attribute's value must not contain white spaces. [...] 
Though this restriction has been lifted in HTML 5, 
an ID should start with a letter for compatibility.

это W3 spec о ID (från MDN):

Any string, with the following restrictions:
must be at least one character long
must not contain any space characters
Previous versions of HTML placed greater restrictions on the content of ID values 
(for example, they did not permit ID values to begin with a number).

Подробнее:

  • W3 - глобальные атрибуты (id)
  • MDN атрибуций (id)

для ссылки на идентификатор с точкой в нем необходимо использовать обратную косую черту. Не уверен, что это то же самое для дефисов или подчеркиваний. Например: HTML-код

<div id="maintenance.instrumentNumber">############0218</div>

в CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

из спецификации HTML 4...

маркеры ID и NAME должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ( " - " ), подчеркиваний ("_"), двоеточий ( " :") и периодов (".").

редактировать: ох! Снова бьют по кнопке!


кроме того, никогда не забывайте, что ID является уникальным. После использования значение ID может больше не отображаться нигде в документе.

У вас может быть много идентификаторов, но все они должны иметь уникальное значение.

с другой стороны, есть элемент класса. Как и ID, он может появляться много раз, но значение может использоваться снова и снова.


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


на HTML5

значение должно быть уникальным среди всех идентификаторов в домашних элемента поддерево и должно содержать хотя бы один символ. Значение не должно содержать пробелы.

по крайней мере один символ, без пробелов.

это открывает дверь для допустимых случаев использования, таких как использование акцентированных символов. Это также дает нам много больше боеприпасов, чтобы стрелять себе в ногу, так как теперь вы можете использовать значения идентификаторов, которые вызывают проблемы с CSS и JavaScript, если вы не очень осторожны.


уникальный идентификатор элемента.

в документе не должно быть нескольких элементов с одинаковым значением id.

любая строка, со следующими ограничениями:

  1. должен быть по крайней мере один символ длиной
  2. не должно содержать пробелов:

    • U + 0020 ПРОБЕЛ
    • U + 0009 таблица символов (вкладка)
    • ЛИНИЯ ПИТАНИЯ У + 000А (ЛФ)
    • ФОРМА U+000C FEED (FF)
    • U + 000D ВОЗВРАТ КАРЕТКИ (CR)

использование символов, кроме ASCII letters and digits, '_', '-' and '.' может вызвать проблемы совместимости, так как они не были разрешены в HTML 4. Хотя это ограничение было снято в HTML 5, идентификатор должен начинаться с буквы для совместимости.


  1. IDs лучше всего подходят для именования частей вашего макета, поэтому не должны давать одинаковое имя для ID и class
  2. ID позволяет буквенно-цифровые и специальные символы
  3. но избегайте использования # : . * ! символы
  4. не допускается использование пробелов
  5. не начинается с чисел или дефиса, за которым следует цифра
  6. регистр
  7. использование селекторов идентификаторов быстрее, чем использование селекторов классов
  8. используйте дефис " - "(подчеркивание " _ " также может используйте, но не хорошо для seo) для длинных имен CSS-классов или Id-правил
  9. Если правило имеет селектор идентификаторов в качестве селектора ключей, не добавляйте имя тега в правило. Поскольку идентификаторы уникальны, добавление имени тега замедлит процесс сопоставления без необходимости.
  10. в HTML5 атрибут id может использоваться на любом HTML-элементе, а в HTML 4.01 атрибут id не может использоваться с: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

любой Альфа-числовое значение и " -" и "_" является допустимым. Но, вы должны запустите id name С любым символом между A-Z или a-z.


нет пробелов, должен начинаться по крайней мере с символа от a до z и от 0 до 9.


алфавиты - > caps & small
цифры-> 0-9
специальные символы-> ':', '-', '_', '.'

формат должен быть либо начиная с '.- или алфавит, за которым следуют специальные символы других алфавитов или чисел. значение поля id не должно заканчиваться на"_".
кроме того, пробелы не допускаются, если они предоставлены, они рассматриваются как разные значения, что недопустимо в случае атрибутов id.


в HTML5 идентификатор не может начинаться с числа, например id -"1kid" и у них не может быть пробелов (id="Some kind")