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

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

1753
задан 16 сент. '08 в 12:08
источник поделиться
22 ответов

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

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

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

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

Как чисто практический вопрос, вы можете избежать определенных символов. Периоды, двоеточия и "#" имеют особое значение в CSS-селекторах, поэтому вам придется избегать этих символов, используя обратную косую черту в CSS или двойную обратную косую черту в селекторной строке, переданной в jQuery. Подумайте, как часто вам придется избегать символа в ваших таблицах стилей или кода, прежде чем сходить с ума по периодам и двоеточиям в ids.

Например, допустимо объявление HTML <div id="first.name"></div>. Вы можете выбрать этот элемент в CSS как #first\.name и в jQuery следующим образом: $('#first\\.name'). #first\.name $('#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. Рассмотрим эту историческую сноску.

1521
ответ дан 17 сент. '08 в 4:42
источник

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

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

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

197
ответ дан 16 сент. '08 в 12:09
источник

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

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

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

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

Что действительно говорит: "Элемент с идентификатором" мой ", класс" классный "и" псевдо-селектор "в CSS-говорят.

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

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

133
ответ дан 16 сент. '08 в 17:01
источник

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

var name = 'O'Hara';

Селекторы в jQuery API (см. нижнюю ноту)

60
ответ дан 10 янв. '09 в 23:40
источник

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

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

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

51
ответ дан 16 сент. '08 в 12:11
источник

HTML5:

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

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

PRE-HTML5:

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

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

но следует избегать : и . beacause:

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

41
ответ дан 18 янв. '13 в 10:09
источник

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

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

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

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

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

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

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

3.2.5.7 classАтрибут

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

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

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

36
ответ дан 02 авг. '15 в 18:53
источник

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

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

28
ответ дан 16 сент. '08 в 13: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>
25
ответ дан 07 июля '10 в 13:09
источник

HTML5

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

Правила содержимого ID в HTML5 (кроме уникальности):

This attribute 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
ответ дан 27 авг. '13 в 0:54
источник

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

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

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}
16
ответ дан 13 нояб. '13 в 23:14
источник

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

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

EDIT: d'oh! Снова побегите к кнопке!

13
ответ дан 16 сент. '08 в 12:12
источник

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

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

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

12
ответ дан 16 сент. '08 в 15:31
источник

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

9
ответ дан 22 апр. '09 в 13:18
источник

для HTML5

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

По крайней мере один символ, без пробелов.

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

8
ответ дан 21 авг. '13 в 13:57
источник

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

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

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

  • должен иметь длину не менее одного символа
  • не должен содержать пробелов:

    • U + 0020 SPACE
    • U + 0009 ХАРАКТЕРНАЯ ТАБУЛЯЦИЯ (вкладка)
    • U + 000A LINE FEED (LF)
    • U + 000C FORM FEED (FF)
    • U + 000D CARRIAGE RETURN (CR)

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

8
ответ дан 15 июля '16 в 16:02
источник

Все Альфа-цифровое значение и - "и" _ "действительны. Но вы должны начать идентификатор с любым символом между A-Z или a-z.

6
ответ дан 12 нояб. '16 в 16:52
источник
  • Идентификаторы лучше всего подходят для обозначения частей вашего макета, поэтому не следует указывать одинаковое имя для идентификатора и класса
  • ID позволяет использовать буквенно-цифровые и специальные символы
  • но не используйте символы # : . * !
  • недопустимые пробелы
  • не начинается с цифр или дефиса, за которым следует цифра
  • чувствительный к регистру
  • использование селекторов ID быстрее, чем использование селекторов классов
  • использовать дефис "-" (подчеркивание "_" также может использовать, но не полезно для seo) для длинного имени класса CSS или идентификатора правила
  • Если правило имеет селектор идентификаторов в качестве его селектора ключей, не добавляйте в это правило имя тега. Поскольку идентификаторы уникальны, добавление имени тега будет бесполезно замедлять процесс сопоставления.
  • В HTML5 атрибут id может использоваться для любого элемента HTML, а в HTML 4.01 атрибут id не может использоваться с: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.
6
ответ дан 02 мая '13 в 9:28
источник

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

5
ответ дан 09 мая '17 в 7:22
источник

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

Все a, b, c... x, y, z, A, B, C... X, Y, Z, 0,1,2... 7,8,9, -, _ могут использоваться для id, но вы не должны использовать цифру и - как первый символ.

это неправильно:

1adfsvsdf   // use number in first
-adfasdf    // use - in first
afd'ksdf    // use ' in characters
asdf;asdf   // use ; in characters
0
ответ дан 19 окт. '18 в 20:08
источник

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

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

-2
ответ дан 22 сент. '12 в 21:27
источник

В HTML5 идентификатор не может начинаться с числа, например. id- "1kid", и они не могут иметь пробелы (id = "Some kind")

-4
ответ дан 13 сент. '14 в 23:17
источник

Другие вопросы по метке или Задайте вопрос