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

lors de la création des attributs id pour les éléments HTML, quelles règles y a-t-il pour la valeur?

1742
demandé sur Taryn 2008-09-16 13:08:52

21 réponses

pour HTML 4 , la réponse est techniquement:

les signes D'identification et de nom doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis de n'importe quel nombre de lettres, chiffres ([0-9]), traits d'Union ("-"), soulignements ("_"), colonnes (":"), et périodes (".").

HTML 5 est encore plus permissif, disant seulement qu'un id doit contenir au moins un caractère et ne peut pas contenir les caractères d'espace.

l'attribut id est sensible à la casse dans XHTML .

comme une question purement pratique, vous pouvez vouloir éviter certains caractères. Les périodes, les colonnes et le '#' ont un sens particulier dans les sélecteurs CSS, vous devrez donc échapper à ces caractères en utilisant un antislash dans CSS ou un double antislash dans un chaîne de sélecteur passée à jQuery . Pensez à combien de fois vous devra échapper à un caractère dans vos feuilles de style ou code avant de devenir fou avec des périodes et des colons dans les ids.

par exemple, la déclaration HTML <div id="first.name"></div> est valide. Vous pouvez sélectionner cet élément dans CSS comme #first\.name et dans jQuery comme $('#first\.name'). mais si vous oubliez le antislash, $('#first.name') , vous aurez un sélecteur parfaitement valide à la recherche d'un élément avec l'id first et ayant également la classe name . C'est un bug qui est facile à oublier. Vous pourriez être plus heureux à long terme en choisissant l'id first-name (un trait d'Union plutôt qu'une période), à la place.

vous pouvez simplifier vos tâches de développement en vous en tenant strictement à une convention de nommage. Par exemple, si vous vous limitez entièrement aux caractères minuscules et séparez toujours les mots avec des traits d'Union ou des soulignements (mais pas les deux, choisissez l'un et n'utilisez jamais l'autre), alors vous avez un motif facile à se rappeler. Vous ne vous demanderez jamais "était-ce firstName ou FirstName ?"parce que vous saurez toujours ce que vous devez taper first_name . Préférez chameau cas? Alors limitez-vous à cela, pas de trait d'Union ou de soulignement, et toujours, utilisez systématiquement soit majuscule ou minuscule pour le premier caractère, ne les mélangez pas.


un problème maintenant très obscur est Qu'au moins un navigateur, Netscape 6, a incorrectement traité les valeurs d'attribut id comme sensible à la casse . Cela signifie que si vous aviez tapé id="firstName" dans votre HTML (minuscule 'f') et #FirstName { color: red } dans votre CSS (majuscule 'F'), ce navigateur bogué n'aurait pas réglé la couleur de l'élément au rouge. Au moment de cette édition, avril 2015, j'espère qu'on ne vous demande pas de supporter Netscape 6. Considérez cela comme une note de bas de page historique.

1512
répondu dgvid 2018-05-02 10:42:33

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.

197
répondu Peter Hilton 2008-09-16 09:09:57

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.

131
répondu Michael Thompson 2013-12-30 15:03:14

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)

60
répondu Álvaro González 2009-01-10 20:40:31

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.

51
répondu Mr Shark 2011-12-09 10:19:35

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.

41
répondu Zaheer Ahmed 2015-03-12 11:49:34

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.

36
répondu Michael_B 2016-12-05 18:29:53

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.

28
répondu pdc 2008-09-16 10:04:28

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>
25
répondu blacksun1 2010-07-07 10:09:22

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 )
18
répondu Sergio 2013-10-09 06:31:00

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;}
16
répondu Anthony 2013-11-13 20:14:15

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

13
répondu Steve Morgan 2008-09-16 09:12:19

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.

12
répondu Vordreller 2011-05-31 06:33:40

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.

9
répondu lstg 2009-04-22 10:18:43

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.

8
répondu Kanishka Panamaldeniya 2013-08-21 10:57:06

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

8
répondu Bhavin Solanki 2016-10-06 13:55:41
  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>.
6
répondu Web Designer cum Promoter 2013-05-02 06:51:33

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 .

6
répondu Tazwar Utshas 2016-11-12 13:52:52

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

5
répondu Wembo Mulumba 2017-05-09 04:22:32

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.

-2
répondu Shashank N. Pandey 2012-09-22 18:27:51

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

-4
répondu Sébastien 2014-09-14 03:40:33