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

2169
Mr Shark 16 Сен 2008 в 13:08
103
Это отличается между HTML5 и предыдущими версиями спецификации. Я объяснил это здесь: mathiasbynens.be/notes/html5-id-class
 – 
Mathias Bynens
24 Окт 2011 в 12:41
5
Я заметил, что SharePoint 2010 присваивает такое значение - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53} для динамически сгенерированной таблицы в веб-части и страницы, содержащей значение идентификатора такой вид не сломался ни в одном из популярных браузеров. Однако работать с такими значениями идентификаторов с помощью JavaScript сложно - mvark .blogspot.in / 2012/07 /…
 – 
mvark
20 Июл 2012 в 22:34
3
Требования HTML4 и HTML5 для значений ID сильно различаются. Вот краткое и полное изложение правил HTML5 ID: stackoverflow.com/a/31773673/3597276
 – 
Michael Benjamin
3 Авг 2015 в 03:32
6
Обратите внимание: выполнение того, что сказано в некоторых ответах, и использование точки (**.**) с jQuery вызовет у вас немало проблем, например, использование <input id="me.name" />, а затем $("#me.name").val() будет заставит jQuery искать тег <me> с классом .name, чего на самом деле никто не хочет!
 – 
Can O' Spam
26 Авг 2015 в 18:20
3
Нет, вам просто нужно экранировать специальные символы, как сказано в документации. Пожалуйста, проверьте эту онлайн-демонстрацию.
 – 
Álvaro González
10 Ноя 2016 в 12:58

26 ответов

Лучший ответ

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

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

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

Атрибут 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. Считайте это исторической сноской.

1779
Community 11 Дек 2019 в 21:26
80
Обратите внимание, что атрибуты class и id чувствительны к регистру в XHTML, а все остальные атрибуты - нет. Эрик Мейер упомянул об этом на семинаре по CSS, который я посетил.
 – 
John Topley
22 Апр 2009 в 14:35
34
Также обратите внимание, что если вы попытаетесь написать правило CSS для нацеливания на элемент по идентификатору, а идентификатор будет иметь номер, это не сработает. Облом!
 – 
Zack The Human
20 Янв 2010 в 03:53
56
Что касается '.' или ":" в идентификаторе, использующем jQuery, см. <a href="http://docs.jquery.com/Frequent_Asked_Questions#How_do_I_select_an_element_by_an_ID_that_has_characters_used_in_CSS_notation.3F" rellow="news_in_CSS_notation.3F"rellow="news_in_CSS_notation. Он содержит небольшую функцию, которая выполняет необходимое экранирование.
 – 
Wolfram
6 Май 2010 в 14:18

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

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

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

227
Peter Hilton 16 Сен 2008 в 13:09
21
Обратите внимание, что HTML5 позволяет гораздо больше, чем HTML4, например, 456bereastreet11.com/………………………………………………………… / a> и w3.org/TR/html5/elements. html # the-id-attribute
 – 
Mr Shark
30 Ноя 2010 в 11:33

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

var name = 'O'Hara';

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

69
Álvaro González 10 Янв 2009 в 23:40

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

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

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

67
nasmorn 9 Дек 2011 в 14:19
9
Или, как вариант: «так что лучше избегать jquery». ;)
 – 
domsson
11 Янв 2020 в 16:52

HTML5 :

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

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

PRE-HTML5:

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

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

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

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

63
Community 20 Июн 2020 в 12:12
В HTML5 id не принимает id="c365720c"
 – 
decpk
14 Апр 2021 в 06:54

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, regex).

Например, в 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) своего элемента.

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

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

3.2.5.7 class атрибут

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

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

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

61
Michael Benjamin 5 Дек 2016 в 21:29

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

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

33
pdc 16 Сен 2008 в 14:04

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

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 об идентификаторе (от 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
Sergio 9 Окт 2013 в 10:31

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

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

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}
18
Anthony 14 Ноя 2013 в 00:14
3
Дефисы и символы подчеркивания обычно не нужно экранировать. Однако исключением является случай, когда дефис появляется в начале идентификатора и сопровождается другим дефисом (например, \--abc) или цифрой (например, \-123).
 – 
MrWhite
14 Ноя 2013 в 05:25

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

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

РЕДАКТИРОВАТЬ: ооо! Опять же, до кнопки!

16
Steve Morgan 16 Сен 2008 в 13:12

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

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

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

16
pimvdb 31 Май 2011 в 10:33

Для HTML5

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

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

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

10
Kanishka Panamaldeniya 21 Авг 2013 в 14:57
  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>.
9
Web Designer cum Promoter 2 Май 2013 в 10:51
«подчеркивание также можно использовать, но не подходит для поисковой оптимизации»: С каких это пор поисковые системы проявляли интерес к классам CSS или именам идентификаторов?
 – 
Nick Rice
7 Май 2016 в 19:55

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

9
Tazwar Utshas 12 Ноя 2016 в 16:52

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

6
Joel Wembo 9 Май 2017 в 07:22

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

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

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

5
Jyotirmoy Bhattacharyya 7 Июл 2019 в 11:21

В HTML

ID должен начинаться с {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>

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

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

4
Dev pokhariya 14 Июн 2019 в 14:23

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

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

enter image description here

Читайте о: 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

2
NVRM 20 Май 2020 в 18:12

Помогите, мой 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.log( ONE );
</script>
0
Danny '365CSI' Engelman 11 Мар 2021 в 22:13

Идентификатор HTML

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

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

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

0
baijugoradia 1 Апр 2021 в 08:26
  1. Работают прописные и строчные буквы
  2. '_' и '-' тоже работают
  3. Числа работает
  4. Двоеточие (,) и точка (.), Кажется, работают
  5. Интересно, что смайлы работают
0
Hyunseung Lee 4 Апр 2021 в 03:36

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

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

-4
Shashank N. Pandey 22 Сен 2012 в 22:27

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

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

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

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

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

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

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

165
Michael Thompson 30 Дек 2013 в 19:03
24
Вы можете использовать двоеточия и точки, но вам нужно будет экранировать их, используя двойную обратную косую черту, например: $ ('# my \\. Cool \\: thing') или экранирование переменной: $ ('#' + id.replace (/ \ ./, '\\.'). replace (/ \: /, '\\:')) groups.google.com/group/jquery-en/browse_thread/thread/…
 – 
joeformd
3 Дек 2009 в 13:41

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

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

12
Justinw 6 Окт 2016 в 16:55

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

11
lstg 22 Апр 2009 в 14:18