type - select html




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

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


HTML5

En gardant à l'esprit que l'identification doit être unique, à savoir. il ne doit pas y avoir plusieurs éléments dans un document qui ont la même valeur d'identifiant.

Les règles concernant le contenu d'identifiant 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 la spécification W3 à propos de ID (frnn 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 )

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 caractère d'espace.

PRE-HTML5:

L'identifiant doit correspondre:

[A-Za-z][-A-Za-z0-9_:.]*
  1. Doit commencer par des caractères AZ ou az
  2. Peut contenir - (tiret), _ (trait de soulignement),: (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.


  1. Les identifiants sont les mieux adaptés pour nommer des parties de votre mise en page et ne doivent donc pas donner le même nom pour l'ID et la classe
  2. ID permet caractères alphanumériques et spéciaux
  3. mais évitez d'utiliser # : . * ! # : . * ! symboles
  4. espaces non autorisés
  5. pas commencé avec des chiffres ou un trait d'union 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. use hyphen "-" (le trait de soulignement "_" peut aussi utiliser mais pas bon pour seo) pour les longs noms de classes CSS ou les noms de règles Id
  9. Si une règle a un sélecteur d'ID comme sélecteur de clé, n'ajoutez pas le nom du tag à la règle. Puisque les ID sont uniques, l'ajout d'un nom de tag ralentirait inutilement le processus de correspondance.
  10. En HTML5, l'attribut id peut être utilisé sur n'importe quel élément HTML et In HTML 4.01, l'attribut id ne peut pas être utilisé avec: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Aussi, n'oubliez jamais qu'un identifiant est unique. Une fois utilisée, la valeur d'ID peut ne pas apparaître à nouveau dans le document.

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

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

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


En HTML5, un identifiant ne peut pas commencer par un nombre, par exemple id- "1kid" et il ne peut pas avoir d'espace (id = "Some kind" )


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


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>

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 les faire disparaître en utilisant une barre oblique inverse en CSS ou une double barre oblique inverse dans une chaîne de sélecteur passée à 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 valide. Vous pouvez sélectionner cet élément dans CSS comme #first\.name et dans jQuery comme ceci: $('#first\\.name'). Mais si vous oubliez la barre oblique inversée, $('#first.name') , vous aurez un sélecteur parfaitement valide à la recherche d'un élément avec id tout d' first et ayant aussi un name classe. C'est un bug facile à oublier. Vous serez peut-être plus heureux à long terme de choisir l'identifiant (un trait d'union 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 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 ?" car 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, traitait incorrectement les valeurs d'attribut d'identification en fonction de 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.


Pour référencer un identifiant avec une période, 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;}

Toute valeur alphanumérique et " - " et " _ " sont valides. Mais, vous devriez commencer le nom d'identification avec n'importe quel caractère entre AZ ou az .


Un identifiant unique pour l'élément.

Il ne doit pas y avoir plusieurs éléments dans un document ayant la même valeur d'ID.

Toute chaîne, avec les restrictions suivantes:

  1. doit avoir au moins un caractère
  2. ne doit pas contenir de caractères d'espace:

    • U + 0020 ESPACE
    • U + 0009 TABULATION DES CARACTÈRES (onglet)
    • U + 000A LIGNE ALIMENTATION (LF)
    • FORMULE U + 000C FEED (FF)
    • RETOUR DE CHARIOT U + 000D (CR)

En utilisant des caractères à l'exception 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 identifiant devrait commencer par une lettre de compatibilité.


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

le format doit être soit à partir de '.' ou un alphabet, suivi par l'un des caractères spéciaux de plus d'alphabets ou de 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 valable dans le cas des attributs id.


jQuery gère n'importe quel nom d'ID 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)





html