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


Lors de la création du id attributs pour les éléments HTML, quelles sont les règles pour la valeur?


1707
2017-09-16 09:08


origine


Réponses:


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 d'un nombre quelconque de lettres, de chiffres ([0-9]), de traits d'union ("-"), de traits de soulignement ("_") , deux points (":") et des points (".").

HTML 5 est encore plus permissif, en 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.

À titre purement pratique, vous pouvez éviter certains caractères. Les points, les deux-points et "#" ont une signification particulière dans les sélecteurs CSS, vous devrez donc barre oblique inverse en CSS ou une double barre oblique inverse dans un chaîne de sélecteur transmise à jQuery. Pensez à combien de fois vous devrez échapper à un personnage dans vos feuilles de style ou votre code avant de devenir fou avec des points et des deux-points dans les identifiants.

Par exemple, la déclaration HTML <div id="first.name"></div> est valable. Vous pouvez sélectionner cet élément dans CSS comme #first\.name et en jQuery comme ça: $('#first\\.name'). Mais si vous oubliez le backslash, $('#first.name'), vous aurez un sélecteur parfaitement valide à la recherche d'un élément avec id first et aussi avoir classe name. C'est un bug facile à oublier. Vous pourriez être plus heureux à long terme en choisissant l'id first-name (un trait d'union plutôt qu'un point), à la place.

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 si vous 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), vous avez un motif 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érez le cas de chameau? Limitez-vous à cela, sans trait d'union ni trait de soulignement, et toujours, utilisez toujours les majuscules ou les minuscules pour le premier caractère, ne les mélangez pas.


Un problème maintenant très obscur était qu'au moins un navigateur, Netscape 6, les valeurs d'attribut ID incorrectement traitées sont sensibles à la casse. Cela signifiait que si vous aviez tapé id="firstName" dans votre HTML (minuscule 'f') et #FirstName { color: red } dans votre CSS (majuscule «F»), ce navigateur buggy aurait échoué à définir la couleur de l'élément en rouge. Au moment de cette modification, en avril 2015, j'espère que l'on ne vous demandera pas de prendre en charge Netscape 6. Considérez ceci comme une note de bas de page historique.


1487
2017-09-17 01:42



Du Spécification HTML 4:

Les jetons ID et NOM doivent commencer par une lettre ([A-Za-z]) et peuvent être suivis d'un nombre quelconque de lettres, de chiffres ([0-9]), de traits d'union ("-"), de traits de soulignement ("_") , deux points (":") et des points (".").

Une erreur fréquente consiste à utiliser un identifiant qui commence par un chiffre.


194
2017-09-16 09:09



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), la période et le signe deux-points ont une signification particulière et vous rencontrerez 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 donnez à un élément l'identifiant "my.cool:thing", votre sélecteur CSS ressemblera à ceci:

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

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

S'en tenir à A-Z de tous les cas, chiffres, traits de soulignement et traits d'union. Et comme indiqué ci-dessus, assurez-vous que vos identifiants sont uniques.

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


130
2017-09-16 14:01



jQuery Est-ce que gérer tout nom d'identifiant valide. Vous avez juste besoin d'échapper à des méta-caractères (c'est-à-dire, des points, des points-virgules, des 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 dans l'API jQuery (voir note de bas de page)


60
2018-01-10 20:40



Strictement, il devrait correspondre

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

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


51
2017-09-16 09:11



HTML5:

se débarrasse des restrictions supplémentaires sur l'attribut id vois 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 caractère d'espace.

PRE-HTML5:

L'identifiant doit correspondre:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Doit commencer par des caractères A-Z ou a-z
  2. Peut contenir - (trait d'union), _ (souligner), : (deux points) et . (période)

mais il faut éviter : et . parce que

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


39
2018-01-18 07:09



HTML5: Valeurs autorisées pour les attributs ID et classe

À partir de HTML5, les seules restrictions sur la valeur d'un identifiant sont:

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

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

Donc, 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 d'espace. Ceci est très différent de HTML4.

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

En HTML5, ils 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 simplement à l'esprit que l'utilisation de nombres, de signes de ponctuation ou de caractères spéciaux dans la valeur d'un ID peut provoquer 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 est invalide en CSS:

De la spécification CSS2.1:

4.1.3 Caractères et cas

En CSS, identifiants (y compris les noms d'éléments, les classes et les ID dans   sélecteurs) ne peut contenir que les caractères [a-zA-Z0-9] et ISO 10646   caractères U + 00A0 et plus, plus 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 pouvez être en mesure d'échapper des caractères dans des contextes où ils ont des restrictions ou une signification particulière.


W3C Références

HTML5

3.2.5.1 Le id   attribut

le id L'attribut spécifie l'identifiant unique (ID) de son élément.

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

Remarque: Il n'y a pas d'autres restrictions sur la forme qu'un ID peut prendre; dans   En particulier, les identifiants peuvent se composer de chiffres, commencer par un chiffre, commencer   avec un trait de soulignement, consistent en juste de la ponctuation, etc.

3.2.5.7 Le 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 que le   élément appartient à.

Les classes qu'un élément HTML lui a assignées sont toutes   les classes renvoyées lorsque la valeur de l'attribut de classe est divisée   les 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 class, mais les auteurs sont encouragés à utiliser des valeurs   décrire la nature du contenu, plutôt que les valeurs qui décrivent   la présentation souhaitée du contenu.


33
2017-08-02 15:53



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

le HTML 5 spécification de projet assouplit les règles pour la id et name attributs: ils ne sont plus que des chaînes opaques qui ne peuvent contenir d'espaces.


28
2017-09-16 10:04



Les traits d'union, les traits de soulignement, les points, les deux-points, les chiffres et les lettres sont tous valables 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 les deux-points et les 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
2017-07-07 10:09