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

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

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.

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.

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.

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)

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.

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.

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.

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.

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>

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)

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

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!

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.

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

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.

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.

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

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 .

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

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.

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

il est utilisé pour HTML5 ...

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

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

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

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.