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 existe-t-il pour la valeur?
Pour HTML 4 , la réponse est techniquement:
Les jetons ID et NOM doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis par un nombre quelconque de lettres, chiffres ([0-9]), traits d'union ("-"), traits de soulignement ("_") , deux points (":") et périodes (".").
HTML 5 est encore plus permissif, indiquant simplement 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 voudrez peut-être éviter certains caractères. Les points, les deux points et '#' ont une signification particulière dans les sélecteurs CSS. Vous devrez donc les échapper en utilisant une barre oblique inverse en CSS ou une double barre oblique inversée dans une chaîne de sélection passée à jQuery . Réfléchissez à la fréquence à laquelle vous devrez échapper à un caractère de vos feuilles de style ou de votre code avant de devenir fou avec des points et des points dans les identifiants.
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 suit: $('#first\\.name'). Mais si vous oubliez la barre oblique inverse, $('#first.name'), vous aurez un sélecteur parfaitement valide qui recherche un élément avec id first et aussi ayant la classe name. C'est un bug facile à ignorer. Vous pourriez être plus heureux à long terme de choisir l’identifiant first-name (un trait d’union plutôt que 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 minuscules et que vous séparez toujours les mots avec des traits d'union ou des traits de soulignement (mais pas les deux, choisissez-en un et n'utilisez jamais l'autre), vous obtenez un modèle facile à mémoriser. Vous ne vous demanderez jamais "était-ce firstName ou FirstName?" parce que vous saurez toujours que vous devez taper first_name. Préfère cas chameau? Ensuite, limitez-vous à cela, pas de trait d'union ni de trait de soulignement, et utilisez systématiquement le caractère majuscule ou minuscule pour le premier caractère, ne les mélangez pas.
Un problème désormais très obscur est qu’au moins un navigateur, Netscape 6 ( ) a incorrectement traité les valeurs d’attribut id en respectant la casse . Cela signifiait que si vous aviez entré id="firstName" dans votre HTML (minuscule 'f') et #FirstName { color: red } dans votre CSS (majuscule 'F'), ce navigateur buggy n'aurait pas réussi à définir la la couleur de l'élément en rouge. Au moment de cette modification, avril 2015, j'espère que vous n'êtes pas invité à 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 NOM doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis par un nombre quelconque de lettres, chiffres ([0-9]), traits d'union ("-"), traits de soulignement ("_") , deux points (":") et périodes (".").
Une erreur courante consiste à utiliser un identifiant commençant par un chiffre.
Vous pouvez techniquement utiliser les deux points et les points dans les attributs id/name, mais je vous suggère fortement d'éviter les deux.
En CSS (et dans plusieurs bibliothèques JavaScript telles que jQuery), le point et le deux-points ont une signification particulière et vous allez rencontrer des problèmes si vous ne faites pas attention. Les périodes sont des sélecteurs de classe et les deux-points sont des pseudo-sélecteurs (par exemple, ": hover" pour un élément lorsque la souris le survole).
Si vous attribuez à un élément l'id "my.cool:thing", votre sélecteur CSS ressemblera à ceci:
#my.cool:thing { ... /* some rules */ ... }
Ce qui veut dire vraiment "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 à A-Z, quels que soient les cas, numéros, tirets bas et tirets. Et comme dit ci-dessus, assurez-vous que vos identifiants sont uniques.
Cela devrait être votre première préoccupation.
jQuery ne gère aucun nom d'identifiant valide. Vous devez juste échapper aux métacaractères (points, points-virgules, 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';
Strictement cela devrait correspondre
[A-Za-z][-A-Za-z0-9_:.]*
Mais jquery semble avoir des problèmes avec les deux-points, il serait peut-être préférable de les éviter.
HTML5:
supprime les restrictions supplémentaires sur l'attribut id voir ici . Les seules exigences restantes (à part d'être uniques dans le document) sont les suivantes:
- la valeur doit contenir au moins un caractère (ne peut pas être vide)
- il ne peut contenir aucun espace.
PRE-HTML5:
L'identifiant doit correspondre à:
[A-Za-z][-A-Za-z0-9_:.]*
- Doit commencer par les caractères A-Z ou a-z
- Peut contenir
-(trait d'union),_(trait de soulignement),:(deux points) et.(point)
mais il faut éviter : et . car:
Par exemple, un identifiant peut être étiqueté "ab: c" et référencé dans la feuille de style par #ab: c mais, en plus d'être l'identifiant de l'élément, il peut 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
À partir de HTML5, les seules restrictions sur la valeur d'un ID sont les suivantes:
- doit être unique dans le document
- ne doit contenir aucun espace
- doit contenir au moins un caractère
Des règles similaires s'appliquent aux classes (à l'exception du caractère unique, bien sûr).
Ainsi, la valeur peut être composée de tous les chiffres, d’un seul chiffre, uniquement de caractères de ponctuation, de caractères spéciaux, etc. Juste pas d'espaces. Ceci est très différent de HTML4.
En HTML 4, les valeurs d'ID doivent commencer par une lettre, qui ne peut alors être suivie que par des lettres, des chiffres, des traits d'union, des traits de soulignement, des deux points et des points.
En HTML5, ce sont valables:
<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>
N'oubliez pas que l'utilisation de chiffres, de signes de ponctuation ou de caractères spéciaux dans la valeur d'un identifiant peut entraîner des problèmes dans d'autres contextes (CSS, JavaScript, regex, par exemple).
Par exemple, l'ID suivant est valide en HTML5:
<div id="9lions"> ... </div>
Cependant, il n'est pas valide en CSS:
A partir de la spécification CSS2.1:
4.1.3 Caractères et majuscules
En CSS, identifiants (y compris les noms d'éléments, les classes et les identifiants dans les sélecteurs) ne peut contenir que les caractères [a-zA-Z0-9] et les caractères ISO 10646 U + 00A0 et supérieurs, ainsi que le trait d'union (-) et le trait de soulignement (_); ils ne peuvent pas commencer par un chiffre, deux traits d'union ou un trait d'union 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
L'attribut
idspécifie l'identificateur unique (ID) de son élément.La valeur doit être unique parmi tous les ID de la sous-arborescence de base de l'élément et doit contenir au moins un caractère. La valeur ne doit contenir aucun espace.
Remarque: Il n'y a pas d'autres restrictions sur la forme que peut prendre un identifiant; en particulier, les identifiants peuvent être composés uniquement de chiffres, commencent par un chiffre, commencent par un trait de soulignement, consistent uniquement en ponctuation, etc.
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 attribuées à un élément HTML sont constituées de toutes les classes renvoyées lorsque la valeur de l'attribut de classe 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 décrivant la nature du contenu plutôt que des valeurs décrivant la présentation souhaitée du contenu.
En pratique, de nombreux sites utilisent les attributs id commençant par des nombres, même s'il ne s'agit pas d'un code HTML valide.
Le spécification HTML 5 assouplit les règles pour les attributs id et name: il ne s'agit plus que de chaînes opaques qui ne peuvent pas contenir d'espaces.
Les traits d'union, les traits de soulignement, les points, les deux points, les chiffres et les lettres sont tous valables pour CSS et JQuery. Ce qui suit devrait fonctionner, mais il devrait être unique sur toute la page et 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 ayant la même valeur id.
Les règles concernant le contenu des identifiants 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.
Ceci est la spécification W3 concernant l'ID (à partir du 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:
Pour référencer un identifiant avec un point, vous devez utiliser une barre oblique inverse. Pas sûr que ce soit la même chose pour les traits d'union ou les caractères de soulignement. Par exemple: HTML
<div id="maintenance.instrumentNumber">############0218</div>
CSS
#maintenance\.instrumentNumber{Word-wrap:break-Word;}
En outre, n'oubliez jamais qu'un identifiant est unique. Une fois utilisée, la valeur de l'ID peut ne plus apparaître nulle part dans le document.
Vous pouvez avoir plusieurs identifiants, mais tous doivent avoir une valeur unique.
D'autre part, il y a l'élément de classe. Tout comme ID, il peut apparaître plusieurs fois, mais la valeur peut être utilisée encore et encore.
De la spécification HTML 4 ...
Les jetons ID et NOM doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis par un nombre quelconque de lettres, chiffres ([0-9]), traits d'union ("-"), traits de soulignement ("_") , deux points (":") et périodes (".").
EDIT: Oh! Battu au bouton, encore!
Un identifiant unique pour l'élément.
Il ne doit pas y avoir plusieurs éléments dans un document ayant la même valeur id.
Toute chaîne, avec les restrictions suivantes:
- doit avoir au moins un caractère
ne doit contenir aucun espace:
- U + 0020 ESPACE
- U + 0009 TABULATION DE CARACTERE (onglet)
- ALIMENTATION EN LIGNE U + 000A (LF)
- U + 000C ALIMENT POUR FORMULAIRES (FF)
- U + 000D RETOUR DE CHARIOT (CR)
L'utilisation de caractères autres que ASCII letters and digits, '_', '-' and '.' peut entraîner 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 de compatibilité.
Il semble que, bien que les points (:) et les points (.) Soient valides dans la spécification HTML, ils ne sont pas valides en tant que sélecteurs d’identifiant dans CSS , il est donc probablement 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 espace.
Au moins un caractère, pas d'espaces.
Cela ouvre la porte à des cas d'utilisation valables, tels que l'utilisation de caractères accentués. Cela nous donne également beaucoup plus de munitions pour nous tirer dans le pied, puisque vous pouvez maintenant utiliser des valeurs d’identité qui poseront des problèmes à la fois avec CSS et JavaScript, à moins que vous ne soyez vraiment prudent.
N'importe quel valeur alphanumérique et "-" et "_" est valide. Mais, vous devriez commencer le nom d'identifiant avec tout caractère compris entre A-Z ou a-z.
- Les ID sont les mieux adaptés pour nommer des parties de votre mise en page. Par conséquent, ne donnez pas le même nom pour l'ID et la classe.
- ID permet les caractères alphanumériques et spéciaux
- mais évitez d'utiliser des symboles
# : . * ! - espaces non autorisés
- pas commencé avec des chiffres ou un trait d'union suivi d'un chiffre
- sensible aux majuscules et minuscules
- l'utilisation de sélecteurs d'ID est plus rapide que celle de sélecteurs de classe.
- utiliser un trait d'union "-" (le trait de soulignement "_" peut également être utilisé, mais ne convient pas pour le référencement) pour les noms de règle ou de règle CSS longs
- 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. Les identifiants étant uniques, l'ajout d'un nom de tag ralentirait inutilement le processus de correspondance.
- En HTML5, l'attribut id peut être utilisé sur tout é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>.
Pas d'espaces, doit commencer par au moins un caractère de a à z et de 0 à 9.
les valeurs peuvent être: [a-z], [A-Z], [0-9], [* _: -]
c'est utiliser pour HTML5 ...
nous pouvons ajouter un identifiant avec n'importe quel tag.
En HTML
ID devrait commencer par {AZ} ou {az} vous pouvez ajouter chiffres, point, trait d'union, trait de soulignement, 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 identifiant avec des deux-points (:) ou un point (.) Il est difficile pour CSS d'utiliser ces identifiants comme sélecteur. Principalement lorsque vous souhaitez utiliser des pseudo-éléments (: before,: after).
Également dans JS, il est difficile de sélectionner ces identifiants. Donc, vous devriez utiliser les quatre premiers identifiants comme préféré par de nombreux développeurs et si c'est nécessaire, vous pouvez aussi utiliser les deux derniers.