Quelles sont les valeurs valides pour l'attribut id en HTML?

De la spécification HTML 4 :

ID et le NOM de jetons doit commencer par une lettre ([A-Za-z]) et peut être suivi d'un nombre quelconque de lettres, de chiffres ([0-9]), des tirets ("-"), des traits de soulignement ("_"), deux-points ( " :") et des points (".").

Une erreur commune est d'utiliser un ID qui commence par un chiffre.

vous pouvez techniquement utiliser des points et des périodes dans les attributs id/name, mais je suggère fortement d'éviter les deux.

dans CSS (et plusieurs bibliothèques JavaScript comme jQuery), à la fois la période et le deux-points ont un sens particulier et vous allez rencontrer des problèmes si vous n'êtes pas prudent. Les périodes sont des sélecteurs de classe et les colons sont des pseudo-sélecteurs (p. ex., ":hover" pour un élément lorsque la souris est dessus).

si vous donnez un élément id "mon.cool: chose", votre sélecteur CSS ressemblera à ceci:

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

qui est vraiment dire, "l'élément avec un id de 'my', une classe de 'cool' et la 'chose' pseudo-sélecteur" dans CSS-parler.

coller à A-Z de n'importe quel cas, les nombres, les underscores et les traits d'Union. Et comme indiqué ci-dessus, assurez-vous que vos pièces d'identité sont uniques.

ça devrait être votre premier souci.

jQuery ne poignée d'une pièce d'identité valide nom. Vous avez juste besoin d'échapper metacharacters (i.e., points, points-virgule, crochets...). C'est comme dire que JavaScript a un problème avec les guillemets seulement parce que vous ne pouvez pas écrire

var name = 'O'Hara';

Sélecteurs de jQuery API (voir en bas de note)

Strictement, il devrait correspondre à

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

mais jquery semble avoir des problèmes avec les colons donc il pourrait être préférable de les éviter.

HTML5:

supprime les restrictions supplémentaires sur l'attribut id voir ici . Les seules exigences restantes (en plus d'être uniques dans le document) sont:

1. la valeur doit contenir au moins un caractère (ne peut être vide)
2. il ne peut contenir aucun caractère d'espace.

PRÉ-HTML5:

ID doit correspondre:

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

1. doit commencer par les caractères A-Z ou a-z
2. peut contenir - (tiret), _ (soulignement), : (colon) et . (période)

mais il faut éviter : et . parce que:

par exemple, une identification pourrait être étiquetée" A. b: c " et référencé dans la feuille de style comme #a. b: c mais aussi comme étant l'id de l'élément, il peut signifier "id", de catégorie "b", pseudo-sélecteur sur "c". Il est préférable d'éviter la confusion et de rester à l'écart de l'utilisation . et : tout à fait.

HTML5: valeurs autorisées pour les attributs ID & Class

à partir de HTML5, les seules restrictions sur la valeur D'un ID sont:

1. doit être unique dans le document
2. ne doit pas contenir d'espace caractères
3. doit contenir au moins un caractère

des règles similaires s'appliquent aux classes (à l'exception du caractère unique, bien sûr).

So la valeur peut être tous les chiffres, juste un chiffre, juste des caractères de ponctuation, inclure des caractères spéciaux, peu importe. Juste pas de blanc. C'est très différent du HTML4.

en HTML 4, les valeurs D'ID doivent commencer par une lettre, qui ne peut être suivie que par des lettres, des chiffres, des traits d'union, des soulignements, des colonnes et des périodes.

En HTML5, ceux-ci sont valides:

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

il suffit de garder à l'esprit que l'utilisation de chiffres, la ponctuation ou spéciale les caractères dans la valeur D'un ID peuvent causer des problèmes dans d'autres contextes (par exemple, CSS, JavaScript, regex).

par exemple, L'ID suivant est valide dans HTML5:

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

cependant, il est invalide dans CSS:

de la CSS2.1 spec:

4.1.3 caractères et Majuscule

dans CSS, identificateurs (y compris les noms d'éléments, les classes et les identificateurs dans sélecteurs) ne peuvent contenir que les caractères [A-zA-Z0-9] et ISO 10646 les caractères U+00A0 et supérieurs, plus le trait d'Union ( - ) et le trait de soulignement (_); ils ne peuvent pas commencer avec un chiffre, deux traits d'Union, ou un trait d'Union suivi du chiffre .

dans la plupart des cas, vous pouvez être en mesure d'échapper aux caractères dans les contextes lorsqu'ils ont des restrictions ou une signification particulière.

références W3C

HTML5

3.2.5.1 le id attribut

l'attribut id spécifie l'identificateur unique (ID) de son élément.

La valeur doit être unique parmi tous les Id de l'élément à la maison la sous-arborescence et doit contenir au moins un caractère. La valeur ne doit pas contenir les caractères d'espace.

Note: Il n'y a pas d'autres restrictions sur la forme que peut prendre une pièce d'identité; en particulier, Les IDs peuvent se composer de chiffres, commencer par un chiffre, commencer avec un trait de soulignement, se composent de seulement la ponctuation, etc.

3.2.5.7 le class attribut

, L'attribut, si spécifié, doit avoir une valeur qui est un ensemble de des jetons séparés par des espaces représentant les différentes classes que la l'élément appartient à.

les classes qu'un élément HTML lui a attribuées comprennent toutes les classes retournées lorsque la valeur de l'attribut class est divisée sur espace. (Les doublons sont ignorés.)

il n'y a pas de restrictions supplémentaires sur les jetons que les auteurs peuvent utiliser dans l'attribut de classe, mais les auteurs sont encouragés à utiliser les valeurs qui décrire la nature du contenu, plutôt que des valeurs qui décrivent la présentation souhaitée du contenu.

en pratique, de nombreux sites utilisent des attributs id commençant par des nombres, même si cela n'est pas techniquement valide HTML.

le HTML 5 draft specification assouplit les règles pour les attributs id et name : ce sont maintenant juste des chaînes opaques qui ne peuvent pas contenir d'espaces.

les tirets, les soulignements, les périodes, les colonnes, les chiffres et les lettres sont tous valides pour utilisation avec CSS et JQuery. Ce qui suit devrait fonctionner, mais il doit être unique tout au long de la page et doit également commencer par une lettre [A-Za-z].

travailler avec des colons et des périodes nécessite un peu plus de travail, mais vous pouvez le faire comme le montre l'exemple suivant.

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

HTML5

gardant à l'esprit que les pièces D'identité doivent être uniques, c.-à-d.: il ne doit pas y avoir plusieurs éléments dans un document qui ont la même valeur d'identification.

les règles concernant le contenu ID dans HTML5 sont (en plus d'être uniques):

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.

C'est le 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).

plus d'informations:

• W3 - attributs globaux ( id )
• MDN atribute ( id )

pour faire référence à un id avec une période, vous devez utiliser un antislash. Je ne sais pas si c'est la même chose pour les traits d'Union ou les soulignements. Exemple: HTML

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

CSS

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

à Partir de la spécification HTML 4...

ID et le NOM de jetons doit commencer par une lettre ([A-Za-z]) et peut être suivi d'un nombre quelconque de lettres, de chiffres ([0-9]), des tirets ("-"), des traits de soulignement ("_"), deux-points ( " :") et des points (".").

EDIT: d'oh! Battu à la touche, encore une fois!

aussi, n'oubliez jamais qu'une carte D'identité est unique. Une fois utilisée, la valeur ID peut ne plus apparaître nulle part dans le document.

vous avez peut-être plusieurs pièces D'identité, mais toutes doivent avoir une valeur unique.

par contre, il y a l'élément de classe. Tout comme ID, il peut apparaître plusieurs fois, mais la valeur peut être utilisé maintes et maintes fois.

Il semble que, bien que les deux-points (:) et les points (.) sont valides dans la spécification HTML, ils sont invalides comme sélecteurs d'id dans CSS donc probablement mieux évité si vous avez l'intention de les utiliser à cette fin.

pour HTML5

la valeur doit être unique parmi tous les ID dans la maison de l'élément la sous-arborescence et doit contenir au moins un caractère. La valeur ne doit pas contenir les caractères d'espace.

Au moins un caractère, pas d'espaces.

ouvre la porte pour les cas d'utilisation valides tels que l'utilisation de caractères accentués. Il nous donne aussi beaucoup de munitions pour nous tirer dans le pied avec, puisque vous pouvez maintenant utiliser des valeurs d'id qui causeront des problèmes avec CSS et JavaScript à moins que vous ne soyez vraiment prudent.

identificateur unique de l'élément.

il ne doit pas y avoir plusieurs éléments dans un document qui ont la même valeur d'id.

toute chaîne, avec les restrictions suivantes:

1. doit avoir au moins un caractère de long

2. ne doit pas contenir d'espace:

   • U+0020 SPACE
   • U+0009 TABLE DES CARACTÈRES (onglet)
   • U+000A LINE FEED (LF)
   • U+000C FEED (FF)
   • U+000D CARRIAGE RETURN (CR)

L'utilisation de caractères autres que ASCII letters and digits, '_', '-' and '.' peut causer des problèmes de compatibilité, car ils n'étaient pas autorisés dans HTML 4 . Bien que cette restriction ait été levée dans HTML 5 , un ID doit commencer par une lettre pour la compatibilité.

1. les identificateurs sont les mieux adaptés pour nommer des parties de votre mise en page et ne devraient donc pas donner le même nom pour L'identification et la classe
2. ID permet alphanumériques et des caractères spéciaux
3. mais éviter l'utilisation des # : . * ! symboles
4. espaces non autorisés
5. n'a pas commencé par des chiffres ou un tiret suivi d'un chiffre
6. sensible à la casse
7. l'utilisation de sélecteurs D'ID est plus rapide que l'utilisation sélecteurs de classe
8. utiliser le trait d'Union " - "(soulignement " _ "peut aussi utiliser mais pas bon pour le référencement) pour les noms de classe ou de règle D'identification CSS longs
9. si une règle a un sélecteur D'ID comme sélecteur de clé, n'ajoutez pas le nom de la balise à la règle. Comme les identifiants sont uniques, l'ajout d'un nom d'étiquette ralentirait inutilement le processus d'appariement.
10. dans HTML5, l'attribut id peut être utilisé sur N'importe quel élément HTML et dans HTML 4.01, l'attribut id ne peut pas être utilisé avec: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Tout Alpha-numérique de la valeur et " - " et " _ " est valide. Mais, vous devez commencer le nom d'identification avec n'importe quel caractère entre A-Z ou a-z .

, Pas d'espaces, doit commencer avec au moins un char de a à z et 0 à 9.

alphabets-> casquettes & small

chiffres - > 0-9

caractères spéciaux-> ':', '-', '_', '.'

le format doit être soit à partir de '.'ou un alphabet, suivi de l'un ou l'autre des caractères spéciaux d'autres alphabets ou nombres. la valeur du champ id ne doit pas s'arrêter à un '_'.

en outre, les espaces ne sont pas autorisés, s'ils sont fournis, ils sont traités comme différents valeurs, qui n'est pas valide dans le cas des attributs id.

En HTML5, un id ne peut pas commencer par un nombre, par exemple, id- "1kid" et ils ne peuvent pas avoir des espaces (id= "Some kind" )