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

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

Для 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'), у вас будет совершенно правильный селектор, который ищет элемент с идентификатором firstи также имеет класс name. Это ошибка, которую легко не заметить. Вы могли бы быть счастливее в долгосрочной перспективе, выбрав вместо этого идентификатор first-name(дефис, а не точка).

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

Теперь очень непонятная проблема заключалась в том, что по крайней мере один браузер, 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.cool:thing", ваш селектор CSS будет выглядеть так:

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

Что действительно говорит: «элемент с идентификатором« my », класс« cool »и« вещь »псевдо-селектор» в CSS-говорить.

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

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

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

var name = 'O'Hara';

Селекторы в jQuery API (см. Примечание внизу)

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

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

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

HTML5:

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

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

PRE-HTML5:

Идентификатор должен совпадать:

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

1. Должны начинаться с символов AZ или az
2. Может содержать -(дефис), _(подчеркивание), :(двоеточие) и .(точка)

но следует избегать :и быть .причиной:

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

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 Персонажи и регистр

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

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

W3C Ссылки

HTML5

3.2.5.1 id Атрибут

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

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

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

3.2.5.7 class Атрибут

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

Классы, назначенные ему элементом HTML, состоят из всех классов, возвращаемых, когда значение атрибута 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 должен быть уникальным, т.е. в документе не должно быть нескольких элементов с одинаковым значением идентификатора.

Правила в отношении идентификатора контента в 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;}

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

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

РЕДАКТИРОВАТЬ: D'Oh! Опять на кнопку!

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

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

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

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

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

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

1. должен быть длиной не менее одного символа

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

   • U + 0020 SPACE
   • U + 0009 ТАБЛИЦА ХАРАКТЕРОВ (вкладка)
   • U + 000A LINE FEED (LF)
   • U + 000C ФОРМА ФОРМЫ (FF)
   • U + 000D ВОЗВРАТ ПЕРЕВОЗКИ (CR)

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

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

за HTML5

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

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

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

1. Идентификаторы лучше всего подходят для именования частей вашего макета, поэтому они не должны давать одинаковые имена для идентификатора и класса.
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>.

Любые буквенно-цифровые значения, а также " - " и " _ " действительны. Но вы должны начать имя идентификатора с любого символа между AZ или az .

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

В HTML

Идентификатор должен начинаться с {AZ} или {az}, вы можете добавить цифры, точку, дефис, подчеркивание, двоеточие.

Например:

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

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

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

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

это использование для HTML5 ...

мы можем добавить идентификатор с любым тегом.

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

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

Читайте о: https://mathiasbynens.be/notes/javascript-identifiers-es6

В ES2015 идентификаторы должны начинаться с $, _ или любого символа с базовым свойством Unicode ID_Start.

Остальная часть идентификатора может содержать $, _, U + 200C без объединения, U + 200D без объединения, или любой символ с базовым свойством Unicode ID_Continue.

const target = document.querySelector("div").id
console.log(
   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

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

формат должен начинаться с '.' или алфавит, сопровождаемый или специальными символами большего количества алфавитов или чисел. значение поля id не должно заканчиваться на «_».
Кроме того, пробелы не допускаются, если они предусмотрены, они обрабатываются как разные значения, что недопустимо в случае атрибутов id.