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

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

1999 htmlid
16.09.2008 09:08:52
Это отличается между HTML5 и предыдущими версиями спецификации. Я объяснил это здесь: mathiasbynens.be/notes/html5-id-class
Mathias Bynens 24.10.2011 08:41:57
Я заметил, что SharePoint 2010 присваивает значение, подобное этому, - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53} для динамически создаваемой таблицы в веб-части и странице, содержащей значение идентификатора: такого рода не сломалось ни в одном из популярных браузеров. Работа с такими значениями ID через JavaScript сложно , хотя - mvark.blogspot.in/2012/07/...
mvark 20.07.2012 18:34:40
Требования HTML4 и HTML5 к IDзначениям очень разные. Вот краткое и полное изложение IDправил HTML5 : stackoverflow.com/a/31773673/3597276
Michael_B 3.08.2015 00:32:43
Обратите внимание: Выполнение, как сказано в некоторых ответах, и использование точки ( **.**)с jQuery доставит вам немало хлопот, например, с использованием, <input id="me.name" />а затем $("#me.name").val()заставит jQuery искать <me>тег с классом .name, который никто не хочет действительно!
Can O' Spam 26.08.2015 15:20:40
@SamSwift 웃 Нет, вам просто нужно экранировать специальные символы, как говорят документы . Пожалуйста, проверьте это онлайн демо .
Álvaro González 10.11.2016 09:58:46
23 ОТВЕТА
РЕШЕНИЕ

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

1689
11.12.2019 18:26:03
Обратите внимание , что атрибуты класса и идентификаторов являются чувствительно к регистру в XHTML, все остальные атрибуты не являются. Эрик Мейер упомянул об этом на семинаре по CSS, на котором я присутствовал.
John Topley 22.04.2009 10:35:58
Также обратите внимание, что если вы попытаетесь написать правило CSS для целевого элемента по идентификатору, а идентификатор будет с номером, это не сработает. Облом!
Zack The Human 20.01.2010 00:53:18
Что касается '.' или ':' в идентификаторе с использованием jQuery, смотрите FAQ по jQuery . Он содержит небольшую функцию, которая делает необходимые побег.
Wolfram 6.05.2010 10:18:49
idАтрибут [ w3.org/TR/html4/struct/global.html#adef-id](case чувствителен в HTML4) и должен начинаться с буквы (ограничено А до Z). Также обратите внимание, что ваш пример не должен делать цвет текста вашего элемента красным, так как ваш CSS ссылается на элемент с классом, а FirstNameне на ваш id.
Augustus Kling 30.09.2011 07:55:57
Ошибка, на которую указал Август, все еще присутствует. В вашем примере, если вы используете id="firstName"HTML 4 или HTML 5 и #FirstName { color: red }CSS, только браузер с ошибками установит цвет элемента на красный.
Stephen Booher 26.01.2012 17:15:44

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

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

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

218
16.09.2008 09:09:57
Обратите внимание, что HTML5 позволяет гораздо больше, чем HTML4, см., Например, 456bereastreet.com/archive/201011/… и w3.org/TR/html5/elements.html#the-id-attribute
Mr Shark 30.11.2010 08:33:35
IE6 не поддерживает ID, начинающийся с подчеркивания, но в любом случае он мертв.
doc_id 3.03.2012 12:00:54
@rahmanisback относительно IE6, можно было бы так подумать, но я заканчиваю предложение для банка прямо сейчас, и они настаивают на том, что любое приложение, которое разрабатывает поставщик, работает в IE6. Это для 30 000 пользователей. Черт возьми, если бы мы могли просто заставить их обновить свои браузеры на всех этих рабочих столах, это могло бы просто помочь уровню безработицы.
Karl 13.09.2012 13:50:46
@Karl Мне жаль это слышать. Сделайте все возможное, чтобы предупредить о проблемах безопасности IE6. Однако IE7 скоро станет новым IE6, так что, похоже, наша судьба в этой отрасли - исправить ошибки MS в прошлом.
doc_id 14.09.2012 06:25:35
@MrShark Вторая ссылка не работает; Новая ссылка
SWdV 14.06.2015 14:34:25

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

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

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

65
9.12.2011 10:19:35
Или в качестве альтернативы: «так что может быть лучше избежать jquery». ;)
domsson 11.01.2020 13:52:33

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

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

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

16
16.09.2008 09:12:19

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

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

34
16.09.2008 10:04:28

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

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

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

16
31.05.2011 06:33:40

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

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

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

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

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

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

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

154
30.12.2013 15:03:14
Вы можете использовать двоеточия и точки - но вам нужно избегать их, используя двойную обратную косую черту, например: $ ('# my \\. Cool \\: thing') или экранирование переменной: $ ('#' + id.replace (/ \ ./, '\\.'). replace (/ \: /, '\\:')) groups.google.com/group/jquery-en/browse_thread/thread/…
joeformd 3.12.2009 10:41:33
Почему не цифры; почему просто AZ? Числа являются очень полезными идентификаторами при обращении к элементам, связанным с данными, которые обозначены цифрами, если вы не начинаете с числа.
cori 2.05.2011 16:35:23
Просто FYI, черточки являются технически дефисы. Знак минус отсутствует в наборе символов ASCII. en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes
Anton Strogonoff 8.07.2011 18:31:44
Если у вас есть эти символы ( ., :) в идентификаторах, и вы не можете удалить их (кашель ... Sharepoint), вы можете обойти это в CSS с помощью селекторов атрибутов вместо селекторов id, например [id='my.cool:thing'], однако этот селектор будет иметь более низкую специфичность, чем селектор идентификатора, который может вызвать другие проблемы.
Faust 7.06.2013 07:36:05
Старый, я знаю, но обновленный, чтобы включать числа и обратный ход на дефисах
Michael Thompson 30.12.2013 15:03:33

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

var name = 'O'Hara';

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

66
10.01.2009 20:40:31

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

11
22.04.2009 10:18:43
@MathiasBynens Ссылка не работает. Теперь это mothereff.in/css-escapes#0foo%23bar.baz%3Aqux
Oriol 8.11.2014 19:52:21
Они не являются недействительными, если вы избегаете их правильно. См. Mothereff.in/css-escapes#0foo%23bar.baz%3Aqux
Mathias Bynens 10.11.2014 07:09:00

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

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

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

-3
22.09.2012 18:27:51

HTML5:

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

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

PRE-HTML5:

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

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

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

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

58
12.03.2015 11:49:34
  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>.
9
2.05.2013 06:51:33
«Подчеркивание также может использоваться, но не хорошо для SEO»: С каких это пор поисковые системы заинтересовались именами классов и идентификаторов CSS?
Nick Rice 7.05.2016 16:55:45

за HTML5

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

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

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

10
21.08.2013 10:57:06

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)
25
9.10.2013 06:31:00

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

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

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}
18
13.11.2013 20:14:15
Дефисы и подчеркивания обычно не нужно экранировать. Тем не менее, исключением является то, что дефис появляется в начале идентификатора и сопровождается другим дефисом (например, \--abc) или цифрой (например, \-123).
MrWhite 14.11.2013 01:25:30

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

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

57
5.12.2016 18:29:53

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

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

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

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

12
6.10.2016 13:55:41

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

9
12.11.2016 13:52:52

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

6
9.05.2017 04:22:32

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

3
14.06.2019 11:23:50

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

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

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

3
7.07.2019 08:21:41

Начиная с 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̙̙̔̄͜">

1
7.09.2019 21:45:56