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


2016

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


96
Это отличается между HTML5 и предыдущими версиями спецификации. Я объяснил это здесь: mathiasbynens.be/notes/html5-id-class
Матиас

5
Я заметил, что SharePoint 2010 присваивает подобное значение - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53} для динамически генерируемой таблицы в веб-части и на странице, содержащей значение идентификатора: такого рода не сломалось ни в одном из популярных браузеров. Однако работать с такими значениями идентификаторов с помощью JavaScript сложно - mvark.blogspot.in/2012/07/…
mvark

3
Требования к IDзначениям в HTML4 и HTML5 очень разные. Вот краткое и полное изложение IDправил HTML5 : stackoverflow.com/a/31773673/3597276
Майкл Бенджамин

5
Обратите внимание: Выполнение, как сказано в некоторых ответах, и использование точки ( **.**)с jQuery доставит вам немало хлопот, например, с использованием, <input id="me.name" />а затем $("#me.name").val()заставит jQuery искать <me>тег с классом .name, который никто не хочет действительно!
Can O 'Spam

3
@SamSwift 웃 Нет, вам просто нужно экранировать специальные символы, как говорят документы . Пожалуйста, проверьте это онлайн демо .
Альваро Гонсалес

Ответы:


1703

Для 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. Считайте, что это историческая сноска.


78
Обратите внимание , что атрибуты класса и идентификаторов являются чувствительно к регистру в XHTML, все остальные атрибуты не являются. Эрик Мейер упомянул об этом на семинаре по CSS, на котором я присутствовал.
Джон Топли

31
Также обратите внимание, что если вы попытаетесь написать правило CSS для целевого элемента по идентификатору, а идентификатор будет с номером, это не сработает. Облом!
Зак Человек

55
Что касается '.' или ':' в идентификаторе с использованием jQuery, смотрите FAQ по jQuery . Он содержит небольшую функцию, которая делает необходимые побег.
Вольфрам

7
idАтрибут [ w3.org/TR/html4/struct/global.html#adef-id](case чувствителен в HTML4) и должен начинаться с буквы (ограничено А до Z). Также обратите внимание, что ваш пример не должен делать цвет текста вашего элемента красным, так как ваш CSS ссылается на элемент с классом, а FirstNameне на ваш id.
Август Клинг

5
Ошибка, на которую указал Август, все еще присутствует. В вашем примере, если вы используете id="firstName"HTML 4 или HTML 5 и #FirstName { color: red }CSS, только браузер с ошибками установит цвет элемента на красный.
Стивен Бухер

221

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

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

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


20
Обратите внимание, что HTML5 позволяет гораздо больше, чем HTML4, см., Например, 456bereastreet.com/archive/201011/… и w3.org/TR/html5/elements.html#the-id-attribute
г-н Акула

IE6 не поддерживает ID, начинающийся с подчеркивания, но он все равно не работает.
doc_id

2
@rahmanisback относительно IE6, можно было бы так подумать, но я заканчиваю предложение для банка прямо сейчас, и они настаивают на том, чтобы любое приложение, разработанное поставщиком, работало в IE6. Это для 30 000 пользователей. Черт, если бы мы могли просто заставить их обновить свои браузеры на всех этих рабочих столах, это могло бы просто помочь уровню безработицы.
Карл

2
@Karl Мне жаль это слышать. Сделайте все возможное, чтобы предупредить о проблемах безопасности IE6. Однако IE7 скоро станет новым IE6, так что, похоже, наша судьба в этой отрасли - исправить ошибки MS в прошлом.
doc_id

@MrShark Вторая ссылка не работает; Новая ссылка
SWdV

155

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

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

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

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

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

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

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


21
Вы можете использовать двоеточия и точки - но вам нужно избегать их, используя двойную обратную косую черту, например: $ ('# my \\. Cool \\: thing') или экранирование переменной: $ ('#' + id.replace (/ \ ./, '\\.'). replace (/ \: /, '\\:')) groups.google.com/group/jquery-en/browse_thread/thread/…
joeformd

2
Почему не цифры; почему просто AZ? Числа являются очень полезными идентификаторами при обращении к элементам, связанным с данными, которые обозначены цифрами, если вы не начинаете с числа.
Кори

4
Просто FYI, черточки являются технически дефисы. Знак минус отсутствует в наборе символов ASCII. en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes
Антон Строгонов

4
Если у вас есть эти символы ( ., :) в идентификаторах, и вы не можете удалить их (кашель ... Sharepoint), вы можете обойти это в CSS с помощью селекторов атрибутов вместо селекторов id, например [id='my.cool:thing'], однако этот селектор будет иметь более низкую специфичность, чем селектор идентификатора, который может вызвать другие проблемы.
Фауст

2
Старый, я знаю, но обновленный, чтобы включать числа и обратный ход на дефисах
Майкл Томпсон

67

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

var name = 'O'Hara';

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


66

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

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

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


2
Или в качестве альтернативы: «так что может быть лучше избежать jquery». ;)
Домсон

59

HTML5:

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

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

PRE-HTML5:

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

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

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

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


57

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 разбивается на пробелы. (Дубликаты игнорируются.)

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


34

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

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


32

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

25

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)

18

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

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

CSS

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

3
Дефисы и подчеркивания обычно не нужно экранировать. Тем не менее, исключение составляет случай, когда дефис появляется в начале идентификатора, за которым следует другой дефис (например, \--abc) или цифра (например, \-123).
MrWhite

16

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

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

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


16

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

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

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


12

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

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

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

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


11

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


@MathiasBynens Ссылка не работает. Теперь это mothereff.in/css-escapes#0foo%23bar.baz%3Aqux
Oriol

Они не являются недействительными, если вы избегаете их правильно. См. Mothereff.in/css-escapes#0foo%23bar.baz%3Aqux
Матиас

10

за HTML5

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

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

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


9
  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>.

«Подчеркивание также может использоваться, но не хорошо для SEO»: С каких это пор поисковые системы заинтересовались именами классов и идентификаторов CSS?
Ник Райс

9

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


6

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


4

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



2

Начиная с 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


-4

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.