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


2016

Lors de la création des idattributs des éléments HTML, quelles règles existe-t-il pour la valeur?


96
Cela diffère entre HTML5 et les versions précédentes de la spécification. Je l'ai expliqué ici: mathiasbynens.be/notes/html5-id-class
Mathias Bynens

5
J'ai remarqué que SharePoint 2010 affectait une valeur comme celle-ci - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2} - {E60CE5E2-6E64-4350-A884-654B72DA5A53} pour une table générée dynamiquement dans un composant WebPart et une page contenant une valeur ID de ce genre n'a pas cassé dans aucun des navigateurs populaires. Traiter de telles valeurs d'ID via JavaScript est cependant délicat - mvark.blogspot.in/2012/07/…
mvark

3
Les exigences HTML4 et HTML5 pour les IDvaleurs sont très différentes. Voici un aperçu rapide et complet des IDrègles HTML5 : stackoverflow.com/a/31773673/3597276
Michael Benjamin

5
Veuillez noter: Faire comme certaines des réponses l'ont dit et utiliser un point ( **.**)avec jQuery vous causera beaucoup de problèmes, par exemple, en utilisant <input id="me.name" />et ensuite $("#me.name").val(), jQuery cherchera une <me>balise avec la classe .name, ce que personne ne veut vraiment!
Can O 'Spam

3
@SamSwift 웃 Non, il vous suffit d'échapper aux caractères spéciaux comme le disent les docs . Veuillez vérifier cette démo en ligne .
Álvaro González

Réponses:


1703

Pour HTML 4 , la réponse est techniquement:

Les jetons ID et NAME doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis de n'importe quel nombre de lettres, chiffres ([0-9]), tirets ("-"), traits de soulignement ("_") , les deux-points (":") et les points (".").

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

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

Pour des raisons purement pratiques, vous souhaiterez peut-être éviter certains caractères. Les points, les deux-points et les «#» ont une signification particulière dans les sélecteurs CSS, vous devrez donc échapper ces caractères en utilisant une barre oblique inversée en CSS ou une double barre oblique inversée dans une chaîne de sélection passée à jQuery . Pensez à la fréquence à laquelle vous devrez échapper à un personnage dans vos feuilles de style ou votre code avant de devenir fou avec les points et les deux-points dans les identifiants.

Par exemple, la déclaration HTML <div id="first.name"></div>est valide. Vous pouvez sélectionner cet élément en CSS comme #first\.nameet en jQuery comme ceci: $('#first\\.name').Mais si vous oubliez la barre oblique inverse $('#first.name'), vous aurez un sélecteur parfaitement valide recherchant un élément avec id firstet ayant également une classe name. Il s'agit d'un bug facile à ignorer. Vous pourriez être plus heureux à long terme en choisissant first-nameplutôt l'id (un tiret plutôt qu'un point).

Vous pouvez simplifier vos tâches de développement en respectant strictement une convention de dénomination. Par exemple, si vous vous limitez entièrement aux caractères minuscules et séparez toujours les mots avec des tirets ou des traits de soulignement (mais pas les deux, choisissez-en un et n'utilisez jamais l'autre), alors vous avez un modèle facile à retenir. Vous ne vous demanderez jamais "était-ce firstNameou FirstName?" car vous saurez toujours que vous devez taper first_name. Préférez la camel case? Limitez-vous ensuite à cela, pas de tirets ni de tirets bas, et toujours, utilisez systématiquement soit des majuscules soit des minuscules pour le premier caractère, ne les mélangez pas.


Un problème désormais très obscur était qu'au moins un navigateur, Netscape 6, traitait de manière incorrecte les valeurs d'attribut id comme sensibles à la casse . Cela signifiait que si vous aviez tapé id="firstName"votre HTML (minuscule 'f') et #FirstName { color: red }votre CSS (majuscule 'F'), ce navigateur de buggy n'aurait pas réussi à définir la couleur de l'élément sur rouge. Au moment de cette édition, avril 2015, j'espère qu'on ne vous demande pas de prendre en charge Netscape 6. Considérez ceci comme une note de bas de page historique.


78
Notez que les attributs class et id sont sensibles à la casse dans XHTML, tous les autres attributs ne le sont pas. Eric Meyer l'a mentionné dans un atelier CSS auquel j'ai participé.
John Topley

31
Notez également que si vous essayez d'écrire une règle CSS pour cibler un élément par ID, et que l'ID est numéroté, cela ne fonctionnera pas. Bummer!
Zack The Human

55
Pour ce qui est de '.' ou ':' dans un ID utilisant jQuery, voir la FAQ jQuery . Il contient une petite fonction qui fait l'échappement nécessaire.
Wolfram

7
L' idattribut est [ w3.org/TR/html4/struct/global.html#adef-id 3/8 sensible à la casse dans HTML4) et doit commencer par une lettre (limité à A à Z). Notez également que votre exemple ne doit pas rendre la couleur du texte de votre élément rouge car votre CSS fait référence à un élément de classe et FirstNamenon à votre id.
Augustus Kling

5
L'erreur qu'Auguste a signalée est toujours présente. Dans votre exemple, si vous avez id="firstName"en HTML 4 ou HTML 5 et #FirstName { color: red }en CSS, seul un navigateur buggy définira la couleur de l'élément sur rouge.
Stephen Booher

221

De la spécification HTML 4 :

Les jetons ID et NAME doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis de n'importe quel nombre de lettres, chiffres ([0-9]), tirets ("-"), traits de soulignement ("_") , les deux-points (":") et les points (".").

Une erreur courante consiste à utiliser un ID commençant par un chiffre.


20
Notez que HTML5 permet bien plus que HTML4 voir par exemple 456bereastreet.com/archive/201011/… et w3.org/TR/html5/elements.html#the-id-attribute
Mr Shark

IE6 ne prend pas en charge l'ID commençant par des traits de soulignement, mais il est de toute façon mort.
doc_id

2
@rahmanisback concernant IE6, on l'aurait pensé, mais je suis en train de terminer une proposition pour une banque et ils insistent sur le fait que toute application développée par un fournisseur s'exécute dans IE6. C'est pour 30 000 utilisateurs. Heck, si nous pouvions simplement les amener à mettre à jour leurs navigateurs sur tous ces ordinateurs de bureau, cela pourrait juste aider le taux de chômage.
Karl

2
@Karl Je suis désolé d'entendre cela. Faites tous vos efforts pour avertir des problèmes de sécurité d'IE6. Cependant, IE7 sera bientôt le nouveau IE6, alors oui, il semble que ce soit notre destin dans cette industrie de remédier aux erreurs passées de la SEP.
doc_id

@MrShark Le deuxième lien est rompu; Nouveau lien
SWdV

155

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

En CSS (et plusieurs bibliothèques JavaScript comme jQuery), le point et les deux points ont une signification particulière et vous rencontrerez des problèmes si vous ne faites pas attention. Les points sont des sélecteurs de classe et les deux-points sont des pseudo-sélecteurs (par exemple, ": survoler" pour un élément lorsque la souris est dessus).

Si vous donnez à un élément l'ID "my.cool:thing", votre sélecteur CSS ressemblera à ceci:

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

Ce qui veut vraiment dire, "l'élément avec un identifiant de" mon ", une classe de" cool "et le pseudo-sélecteur de" chose "" en langage CSS.

Tenez-vous en AZ de tous les cas, chiffres, traits de soulignement et tirets. Et comme indiqué ci-dessus, assurez-vous que vos identifiants sont uniques.

Cela devrait être votre première préoccupation.


21
Vous pouvez utiliser des deux-points et des points - mais vous devrez les échapper en utilisant des doubles barres obliques inverses, par exemple: $ ('# my \\. Cool \\: thing') ou en échappant une variable: $ ('#' + id.replace (/ \ ./, '\\.'). replace (/ \: /, '\\:')) groups.google.com/group/jquery-en/browse_thread/thread/…
joeformd

2
Pourquoi pas des chiffres; pourquoi juste AZ? Les nombres sont des identifiants très utiles lorsque vous vous référez à des éléments liés à des données saisies avec un nombre, tant que vous ne commencez pas par le nombre.
cori

4
Juste pour info, les tirets sont techniquement des tirets. Le signe moins n'est pas dans le jeu de caractères ASCII. en.wikipedia.org/wiki/Plus_and_minus_signs#Character_codes
Anton Strogonoff

4
Si vous avez ces caractères ( ., :) dans les identifiants et ne pouvez pas les supprimer (toux ... Sharepoint), vous pouvez contourner cela en CSS avec des sélecteurs d'attributs au lieu de sélecteurs d'id, par exemple [id='my.cool:thing'], cependant ce sélecteur aura une spécificité inférieure à un sélecteur d'identifiant, ce qui pourrait entraîner d'autres problèmes.
Faust

2
Vieux, je sais, mais mis à jour pour inclure les chiffres et la marche arrière sur les traits d'union
Michael Thompson

67

jQuery ne gérer un nom d'identité valide. Vous avez juste besoin d'échapper les métacaractères (c'est-à-dire les points, les points-virgules, les crochets ...). C'est comme dire que JavaScript a un problème avec les guillemets uniquement parce que vous ne pouvez pas écrire

var name = 'O'Hara';

Sélecteurs dans l'API jQuery (voir note de bas)


66

Strictement, il devrait correspondre

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

Mais jquery semble avoir des problèmes avec les deux-points, il est donc préférable de les éviter.


2
Ou bien: "il vaudrait donc mieux éviter jquery". ;)
domsson

59

HTML5:

se débarrasse des 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 pas être vide)
  2. il ne peut contenir aucun espace.

PRE-HTML5:

L'ID doit correspondre:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Doit commencer par des caractères AZ ou az
  2. Peut contenir -(trait d'union), _(trait de soulignement), :(deux-points) et. (point)

mais il faut éviter : et à .cause:

Par exemple, un ID pourrait être étiqueté "ab: c" et référencé dans la feuille de style comme #ab: c mais en plus d'être l'id de l'élément, cela pourrait signifier id "a", classe "b", pseudo- sélecteur "c". Mieux vaut éviter la confusion et éviter d'utiliser. et: tout à fait.


57

HTML5: valeurs autorisées pour les attributs d'ID et de classe

Depuis HTML5, les seules restrictions sur la valeur d'un identifiant sont:

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

Des règles similaires s'appliquent aux classes (sauf pour l'unicité, bien sûr).

Ainsi, la valeur peut être tous les chiffres, un seul chiffre, juste des caractères de ponctuation, inclure des caractères spéciaux, peu importe. Pas d'espace. C'est très différent de HTML4.

En HTML 4, les valeurs d'ID doivent commencer par une lettre, qui peut ensuite être suivie uniquement par des lettres, des chiffres, des tirets, des traits de soulignement, des deux-points et des points.

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>

Gardez à l'esprit que l'utilisation de chiffres, de ponctuation ou de caractères spéciaux dans la valeur d'un ID peut causer des problèmes dans d'autres contextes (par exemple, CSS, JavaScript, regex).

Par exemple, l'ID suivant est valide en HTML5:

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

Cependant, il n'est pas valide en CSS:

De la spécification CSS2.1:

4.1.3 Caractères et cas

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

Dans la plupart des cas, vous pourrez peut-être échapper des caractères dans des contextes où ils ont des restrictions ou une signification particulière.


Références W3C

HTML5

3.2.5.1 L' id attribut

L' idattribut spécifie l'identifiant unique (ID) de son élément.

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

Remarque: Il n'y a aucune autre restriction sur la forme que peut prendre un identifiant; en particulier, les identifiants peuvent être constitués uniquement de chiffres, commencer par un chiffre, commencer par un trait de soulignement, consister uniquement en ponctuation, etc.

3.2.5.7 L' class attribut

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

Les classes qu'un élément HTML lui a affectées se composent de toutes les classes renvoyées lorsque la valeur de l'attribut class est divisée en espaces. (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 des valeurs qui décrivent la nature du contenu, plutôt que des valeurs qui décrivent la présentation souhaitée du contenu.


34

Dans la pratique, de nombreux sites utilisent des idattributs commençant par des nombres, même si ce n'est pas du HTML techniquement valide.

Le projet de spécification HTML 5 assouplit les règles pour les attributs idet name: ce ne sont plus que des chaînes opaques qui ne peuvent pas contenir d'espaces.


32

Les tirets, les traits de soulignement, les points, les deux-points, les chiffres et les lettres sont tous valides pour une utilisation avec CSS et JQuery. Ce qui suit devrait fonctionner mais il doit être unique sur toute la page et doit également commencer par une lettre [A-Za-z].

Travailler avec des deux-points et des points 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

HTML5

Gardant à l'esprit que l'ID doit être unique, c'est-à-dire. il ne doit pas y avoir plusieurs éléments dans un document qui ont la même valeur id.

Les règles concernant le contenu ID en 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.

Il s'agit de la spécification W3 sur l'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)
  • Attribut MDN (id)

18

Pour référencer un identifiant avec un point, vous devez utiliser une barre oblique inverse. Je ne sais pas si c'est la même chose pour les tirets ou les traits de soulignement. Par exemple: HTML

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

CSS

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

3
Les traits d'union et les traits de soulignement n'ont normalement pas besoin d'être échappés. Cependant, l'exception à cela est si le trait d'union apparaît au début de l'identifiant et est suivi par un autre trait d'union (par exemple \--abc) ou un chiffre (par exemple \-123).
MrWhite

16

De la spécification HTML 4 ...

Les jetons ID et NAME doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis de n'importe quel nombre de lettres, chiffres ([0-9]), tirets ("-"), traits de soulignement ("_") , les deux-points (":") et les points (".").

EDIT: d'oh! Battu au bouton, encore une fois!


16

N'oubliez pas non plus qu'un identifiant est unique. Une fois utilisée, la valeur ID peut ne plus apparaître nulle part dans le document.

Vous pouvez avoir plusieurs identifiants, mais tous doivent avoir une valeur unique.

D'un autre côté, il y a l'élément de classe. Tout comme l'ID, il peut apparaître plusieurs fois, mais la valeur peut être utilisée à plusieurs reprises.


12

Un identifiant unique pour l'élément.

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

N'importe quelle chaîne, avec les restrictions suivantes:

  1. doit contenir au moins un caractère
  2. ne doit contenir aucun espace:

    • U + 0020 ESPACE
    • U + 0009 TABULATION DES PERSONNAGES (tab)
    • ALIMENTATION EN LIGNE U + 000A (LF)
    • ALIMENTATION U + 000C (FF)
    • RETOUR DE TRANSPORT U + 000D (CR)

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


11

Il semble que, bien que les deux-points (:) et les points (.) Soient valides dans la spécification HTML, ils ne sont pas valides en tant que sélecteurs d'ID dans CSS, il est donc préférable de les éviter si vous avez l'intention de les utiliser à cette fin.


@MathiasBynens Le lien est rompu. Maintenant, c'est mothereff.in/css-escapes#0foo%23bar.baz%3Aqux
Oriol

Ils ne sont pas invalides si vous leur échappez correctement. Voir mothereff.in/css-escapes#0foo%23bar.baz%3Aqux
Mathias Bynens

10

pour HTML5

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

Au moins un personnage, pas d'espaces.

Cela ouvre la porte à des cas d'utilisation valides tels que l'utilisation de caractères accentués. Cela nous donne également beaucoup plus de munitions pour nous tirer dans le pied, car vous pouvez maintenant utiliser des valeurs d'identification qui causeront des problèmes avec CSS et JavaScript, sauf si vous êtes très prudent.


9
  1. Les ID sont les mieux adaptés pour nommer des parties de votre mise en page, ils ne doivent donc pas donner le même nom pour l'ID et la classe
  2. L'ID autorise les caractères alphanumériques et spéciaux
  3. mais évitez d'utiliser # : . * ! symboles
  4. espaces non autorisés
  5. pas commencé par des chiffres ou un tiret suivi d'un chiffre
  6. sensible aux majuscules et minuscules
  7. l'utilisation de sélecteurs d'ID est plus rapide que l'utilisation de sélecteurs de classe
  8. utiliser le trait d'union "-" (le trait de soulignement "_" peut également être utilisé mais pas bon pour le référencement) pour les noms de classe CSS ou de règle d'identification 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. Étant donné que les ID sont uniques, l'ajout d'un nom de balise ralentirait inutilement le processus de correspondance.
  10. En HTML5, l'attribut id peut être utilisé sur n'importe quel élément HTML et en HTML 4.01, l'attribut id ne peut pas être utilisé avec: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

"le trait de soulignement peut également être utilisé mais pas bon pour le référencement": depuis quand les moteurs de recherche se sont-ils intéressés aux noms de classe ou d'ID CSS?
Nick Rice

9

Toute valeur alphanumérique et " - " et " _ " est valide. Mais, vous devez commencer le nom de l'id avec n'importe quel caractère entre AZ ou az .


6

Aucun espace, doit commencer par au moins un caractère de a à z et 0 à 9.


4

En HTML

L'ID doit commencer par {AZ} ou {az}, vous pouvez ajouter chiffres, un point, un trait d'union, un trait de soulignement et des deux-points.

Par exemple:

<span id="testID2"></span>
<span id="test-ID2"></span>
<span id="test_ID2"></span>
<span id="test:ID2"></span>
<span id="test.ID2"></span>

Mais même si vous pouvez créer un ID avec deux-points (:) ou un point (.), Il est difficile pour CSS d'utiliser ces ID comme sélecteur. Principalement lorsque vous souhaitez utiliser des pseudo-éléments (: avant,: après).

De plus, dans JS, il est difficile de sélectionner ces ID. Vous devez donc utiliser les quatre premiers identifiants comme le préfèrent de nombreux développeurs et si c'est nécessaire, vous pouvez également utiliser les deux derniers.


4

les valeurs peuvent être: [az], [AZ], [0-9], [* _: -]

il est utilisé pour HTML5 ...

nous pouvons ajouter un identifiant avec n'importe quelle balise.


2

Depuis ES2015, nous pouvons également utiliser presque tous les caractères Unicode pour les ID, si le jeu de caractères du document est défini sur UTF8.

Testez ici: https://mothereff.in/js-variables

entrez la description de l'image ici

Lisez à propos de: https://mathiasbynens.be/notes/javascript-identifiers-es6

Dans ES2015, les identificateurs doivent commencer par $, _ ou tout autre symbole avec la propriété principale dérivée Unicode ID_Start.

Le reste de l'identifiant peut contenir $, _, U + 200C sans jointure de largeur nulle, U + 200D jointure de largeur nulle ou tout symbole avec la propriété de base dérivée Unicode ID_Continue.

const target = document.querySelector("div").id
console.log(
   target
)
document.getElementById(target).style.backgroundColor = "black"
div {
  border: 1px black solid;
  width: 100%;
  height: 200px
}
<div id="H̹̙̦̮͉̩̗̗ͧ̇̏̊̾Eͨ͆͒̆ͮ̃͏̷̮̣̫̤̣Cͯ̂͐͏̨̛͔̦̟͈̻O̜͎͍͙͚̬̝̣̽ͮ͐͗̀ͤ̍̀͢M̴̡̲̭͍͇̼̟̯̦̉̒͠Ḛ̛̙̞̪̗ͥͤͩ̾͑̔͐ͅṮ̴̷̷̗̼͍̿̿̓̽͐H̙̙̔̄͜">


Devriez-vous l'utiliser? Probablement pas une bonne idée!

Lisez à propos de: https://stackoverflow.com/a/52799593/2494754


-4

alphabets-> majuscules et petits
chiffres-> 0-9 caractères
spéciaux-> ':', '-', '_', '.'

le format doit être à partir de '.' ou un alphabet, suivi par l'un des caractères spéciaux de plusieurs alphabets ou chiffres. la valeur du champ id ne doit pas se terminer par un '_'.
De plus, les espaces ne sont pas autorisés, s'ils sont fournis, ils sont traités comme des valeurs différentes, ce qui n'est pas valide dans le cas des attributs id.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.