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


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


1680


источник


Ответы:


Для 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(дефис, а не период).

Вы можете упростить свои задачи разработки, строго придерживаясь соглашения об именах. Например, если вы полностью ограничиваете символы нижнего регистра и всегда разделяете слова с помощью дефисов или подчеркиваний (но не на обоих, выберите один и никогда не используйте другой), тогда у вас есть простой для запоминания шаблон. Вы никогда не будете удивляться "было ли это firstNameили FirstName? ", потому что вы всегда будете знать, что вы должны ввести first_name, Предпочитаете верблюд? Затем ограничьте себя этим, без дефиса или подчеркивания, и всегда, последовательно используйте либо верхний регистр, либо нижний регистр для первого символа, не смешивайте их.


Теперь очень неясной проблемой было то, что по крайней мере один браузер, Netscape 6, неверно обработанные значения атрибута id как чувствительные к регистру , Это означало, что если бы вы набрали id="firstName"в вашем HTML (нижний регистр «f») и #FirstName { color: red }в вашем CSS (верхний регистр «F»), этот багги-браузер не смог бы установить цвет элемента на красный. Во время этого редактирования, апрель 2015 года, я надеюсь, что вас не попросят поддержать Netscape 6. Рассмотрим эту историческую сноску.


1467



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

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

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


192



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

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

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

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

На самом деле это говорит: «Элемент с идентификатором« мой », класс« классный »и« псевдоселектор »в« CSS ».

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

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


129



jQuery does handle any valid ID name. You just need to escape metacharacters (i.e., dots, semicolons, square brackets...). It's like saying that JavaScript has a problem with quotes only because you can't write

var name = 'O'Hara';

Selectors in jQuery API (see bottom note)


60



Strictly it should match

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

But jquery seems to have problems with colons so it might be better to avoid them.


51



HTML5:

gets rid of the additional restrictions on the id attribute see here. The only requirements left (apart from being unique in the document) are:

  1. the value must contain at least one character (can’t be empty)
  2. it can’t contain any space characters.

PRE-HTML5:

ID should match:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Must Start with A-Z or a-z characters
  2. May contain - (hyphen), _ (underscore), : (colon) and . (period)

but one should avoid : and . beacause:

For example, an ID could be labelled "a.b:c" and referenced in the style sheet as #a.b:c but as well as being the id for the element, it could mean id "a", class "b", pseudo-selector "c". Best to avoid the confusion and stay away from using . and : altogether.


39



HTML5: Permitted Values for ID & Class Attributes

As of HTML5, the only restrictions on the value of an ID are:

  1. must be unique in the document
  2. must not contain any space characters
  3. must contain at least one character

Similar rules apply to classes (except for the uniqueness, of course).

So the value can be all digits, just one digit, just punctuation characters, include special characters, whatever. Just no whitespace. This is very different from HTML4.

In HTML 4, ID values must begin with a letter, which can then be followed only by letters, digits, hyphens, underscores, colons and periods.

In HTML5 these are valid:

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

Just bear in mind that using numbers, punctuation or special characters in the value of an ID may cause trouble in other contexts (e.g., CSS, JavaScript, regex).

For example, the following ID is valid in HTML5:

<div id="9lions"> ... </div>

However, it is invalid in CSS:

From the CSS2.1 spec:

4.1.3 Characters and case

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

In most cases you may be able to escape characters in contexts where they have restrictions or special meaning.


W3C References

HTML5

3.2.5.1 The id attribute

The id attribute specifies its element's unique identifier (ID).

The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

Note: There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

3.2.5.7 The class attribute

The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to.

The classes that an HTML element has assigned to it consists of all the classes returned when the value of the class attribute is split on spaces. (Duplicates are ignored.)

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.


33



In practice many sites use id attributes starting with numbers, even though this is technically not valid HTML.

The HTML 5 draft specification loosens up the rules for the id and name attributes: they are now just opaque strings which cannot contain spaces.


28



Hyphens, underscores, periods, colons, numbers and letters are all valid for use with CSS and JQuery. The following should work but it must be unique throughout the page and also must start with a letter [A-Za-z].

Working with colons and periods needs a bit more work but you can do it as the following example shows.

<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



HTML5

Keeping in mind that ID must be unique, ie. there must not be multiple elements in a document that have the same id value.

The rules about ID content in HTML5 are (apart from being unique):

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.

This is the W3 spec about ID (från 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).

More info:

  • W3 - global attributes (id)
  • MDN atribute (id)

18



To reference an id with a period in it you need to use a backslash. Not sure if its the same for hyphens or underscores. For example: HTML

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

CSS

#maintenance\.instrumentNumber{word-wrap:break-word;}

16