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

Question

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

Answer 1

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

Жетоны ID и ИМЯ должны начинаться с буквы ([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. Считайте, что это историческая сноска.

Answer 2

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

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

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

Answer 3

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

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

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

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

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

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

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

Answer 4

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

var name = 'O'Hara';

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

Answer 5

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

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

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

Answer 6

HTML5:

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

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

---

PRE-HTML5:

ID должен совпадать:

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

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

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

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

Answer 7

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 Ссылки

1058 * HTML5 *

3.2.5.1 id атрибут

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

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

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

3.2.5.7 class атрибут

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

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

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

Answer 8

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

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

Answer 9

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

Answer 10

1001 * 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)