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

Из Спецификация HTML 4:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

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

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

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

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

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

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

Обновлено: ооо! Опять же, до кнопки!

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

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

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

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

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

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

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

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

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

Что на самом деле означает «элемент с идентификатором« мой », класс« круто »и псевдоселектор« вещь »» на языке CSS.

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

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

Для HTML 4 технически ответ:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

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

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

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

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

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

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

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

var name = 'O'Hara';

Селекторы в jQuery API (см. Нижнее примечание)

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

Дефисы, подчеркивания, точки, двоеточия, числа и буквы допустимы для использования с 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>

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

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

HTML5:

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

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

PRE-HTML5:

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

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

1. Должен начинаться с букв A-Z или a-z
2. Может содержать - (дефис), _ (подчеркивание), : (двоеточие) и . (точка)

но следует избегать : и ., потому что:

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

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

для HTML5

The value must be unique amongst all the IDs in the element’s home subtree and must contain at least one character. The value must not contain any space characters.

Хотя бы один символ, без пробелов.

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

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 об ID (от 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;}

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

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

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

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

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

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

В 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 Characters and case

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

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

Ссылки W3C

HTML5

3.2.5.1 The id attribute

The id attribute specifies its element's unique identifier (ID).

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

Note: There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

3.2.5.7 The class attribute

The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

The classes that an HTML element has assigned to it consists of all the classes returned when the value of the class attribute is split on spaces. (Duplicates are ignored.)

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

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

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

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

1. должен состоять как минимум из одного символа

2. не должно содержать пробелов:

   • U + 0020 ПРОСТРАНСТВО
   • U + 0009 ТАБЛИЦА ПЕРСОНАЖЕЙ (вкладка)
   • ЛИНИЯ ПОДАЧИ U + 000A (LF)
   • ПОДАЧА ФОРМЫ U + 000C (FF)
   • U + 000D ВОЗВРАТ ПЕРЕВОЗКИ (CR)

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

Допустимы любые Буквенно-цифровое значение, «-» и «_». Но вы должны начать имя идентификатора с любым символом между А-Я или а-я.

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

В HTML

Я БЫ должен начинаться с {А-Я} или {а-я}, вы можете добавить Цифры, точка, дефис, подчеркивание, двоеточия.

Например:

<span id = "testID2"></span>
<span id = "test-ID2"></span>
<span id = "test_ID2"></span>
<span id = "test:ID2"></span>
<span id = "test.ID2"></span>

Но даже если вы можете создать идентификатор с двоеточием (:) или точкой (.) CSS трудно использовать этот идентификатор в качестве селектора. В основном, когда вы хотите использовать псевдоэлементы (: до,: после).

Также в JS трудно выбрать эти ID. Таким образом, вы должны использовать первые четыре идентификатора. Как предпочитают многие разработчики, и, если это необходимо, вы также можете использовать последние два.

значения могут быть: [a-z], [A-Z], [0-9], [* _: -]

он используется для HTML5 ...

мы можем добавить id с любым тегом.

Так как ES2015, мы можем также использовать -почти- все символы юникода для идентификаторов, если кодировка документа установлена ​​на UTF8.

Протестируйте здесь: https://mothereff.in/js-variables

Прочтите о: https://mathiasbynens.be/notes/javascript-identifiers-es6

In ES2015, identifiers must start with $, _, or any symbol with the Unicode derived core property ID_Start.

The rest of the identifier can contain $, _, U+200C zero width non-joiner, U+200D zero width joiner, or any symbol with the Unicode derived core property ID_Continue.

const target = document.querySelector("div").id
console.info(
   target
)
document.getElementById(target).style.backgroundColor = "black"

div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}

<div id = "H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">

Стоит ли его использовать? Наверное, не лучшая идея!

Прочтите о: https://stackoverflow.com/a/52799593/2494754

Помогите, мой Javascript сломан!

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

Лучше всего пробовать во всех браузерах, кроме FireFox.

<div id = "ONE"></div>
<div id = "ONE"></div>
<div id = "ONE"></div>
<script>
  document.body.append( document.querySelectorAll("#ONE").length , ' DIVs!')
  document.body.append( ' in a ', typeof ONE )
  console.info( ONE );
</script>