it-swarm-ru.tech

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

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

1869
Mr Shark

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

1590
dgvid

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

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

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

212
Peter Hilton

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

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

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

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

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

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

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

147
Michael Thompson

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

var name = 'O'Hara';

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

63
Álvaro González

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

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

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

60
Mr Shark

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", псевдо- селектор "с". Лучше всего избегать путаницы и держаться подальше от использования. и: в целом.

52
Zaheer Ahmed

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

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

47
Michael_B

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

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

32
pdc

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

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)
23
Sergio

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

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

CSS

#maintenance\.instrumentNumber{Word-wrap:break-Word;}
17
Anthony

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

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

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

14
Vordreller

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

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

Правка: D'Oh! Опять на кнопку!

14
Steve Morgan

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

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

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

  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
Bhavin Solanki

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

9
lstg

для HTML5

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

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

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

8
Kanishka Panamaldeniya

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

7
Tazwar Utshas
  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>.
7
Web Designer cum Promoter

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

5
Wembo Mulumba

В 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 трудно использовать эти идентификаторы в качестве селектора. В основном, когда вы хотите использовать псевдоэлементы (: before,: after).

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

0
Dev pokhariya