web-dev-qa-db-fra.com

Un élément html peut-il avoir plusieurs identifiants?

Je comprends qu'un identifiant doit être unique dans une page HTML/XHTML.

Ma question est, pour un élément donné, puis-je lui attribuer plusieurs identifiants?

<div id="nested_element_123 task_123"></div>

Je me rends compte que j'ai une solution facile en utilisant simplement un cours. Je suis simplement curieux d'utiliser des identifiants de cette manière.

287
webmat

N ° de XHTML 1.0 Spec

En XML, les identifiants de fragments sont de type ID et il ne peut y avoir qu'un seul attribut de type ID par élément. Par conséquent, dans XHTML 1.0, l'attribut id est défini comme étant de type ID. Afin de garantir que les documents XHTML 1.0 sont des documents XML bien structurés, les documents XHTML 1.0 DOIVENT utiliser l'attribut id lors de la définition d'identificateurs de fragment sur les éléments répertoriés ci-dessus. Reportez-vous aux instructions de compatibilité HTML pour plus d'informations sur la compatibilité ascendante de ces ancres lors de la transmission de documents XHTML en tant que type de support text/html.

190
timmow

Contrairement à ce que tout le monde a dit, la bonne réponse est OUI

Le selectors spec est très clair à ce sujet:

Si un élément a plusieurs attributs d'ID, ils doivent tous être traités comme des ID pour cet élément aux fins du sélecteur d'ID. Une telle situation peut être atteinte en utilisant des mélanges de xml: id, DOM3 Core, DTD XML et environnements spécifiques. connaissance.


Modifier

Juste pour clarifier: Oui, un élément XHTML peut avoir plusieurs identifiants, par exemple.

<p id="foo" xml:id="bar">

mais l'attribution de plusieurs identifiants au même attribut id à l'aide d'une liste séparée par des espaces n'est pas possible.

181
user123444555621

Ma compréhension a toujours été:

  • Les identifiants sont sage unique et ne sont appliqués qu'à un seul élément ...

    • Chacun est attribué en tant qu'identificateur unique à un seul élément.
  • Les classes peuvent être utilisées plus d'une fois ...

    • Ils peuvent donc être appliqués à plus d'un élément, et de manière similaire mais différente, il peut y avoir plus d'une classe (c'est-à-dire plusieurs classes) par élément.
27
Ross

Non. Bien que le définition de w3c pour HTML 4 ne semble pas couvrir explicitement votre question, le définition du nom et de l'attribut id ne dit pas d'espaces dans l'identifiant:

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 (".").

26
acrosman

Non. Chaque élément DOM, s'il a un identifiant, a un identifiant unique et unique. Vous pouvez l'approcher en utilisant quelque chose comme:

<div id='enclosing_id_123'><span id='enclosed_id_123'></span></div>

puis utilisez la navigation pour obtenir ce que vous voulez vraiment.

Si vous souhaitez simplement appliquer des styles, les noms de classe sont préférables.

19
tvanfosson

Vous ne pouvez avoir qu'un seul ID par élément, mais vous pouvez en effet avoir plus d'une classe. Mais n'ayez pas plusieurs attributs de classe, mettez plusieurs valeurs de classe dans un attribut.

<div id="foo" class="bar baz bax">

est parfaitement légal.

16
AmbroseChapel

Non, vous devez utiliser des DIV imbriquées si vous souhaitez emprunter ce chemin. En outre, même si vous le pouviez, imaginez la confusion que cela causerait lorsque vous exécutez document.getElementByID (). Quel ID va-t-il saisir s'il y en a plusieurs?

Sur un sujet légèrement lié, vous pouvez ajouter plusieurs classes à une DIV. Voir la discussion d'Eric Myers à,

http://meyerweb.com/eric/articles/webrev/199802a.html

4
Anjisan

Non, vous ne pouvez pas avoir plusieurs identifiants pour une seule balise, mais j'ai vu une balise avec un attribut name et un attribut id qui sont traités de la même manière par certaines applications.

3
tpower

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2

L'attribut id assigne un identifiant unique à un élément (qui peut être vérifié par un analyseur SGML).

et

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 (".").

Donc, "id" doit être unique et ne peut pas contenir d'espace.

2
Alexandr

Non.

Cela dit, rien ne vous empêche de le faire. Mais vous aurez un comportement incohérent avec les différents navigateurs. Ne le fais pas. 1 ID par élément.

Si vous voulez plusieurs assignations à un élément, utilisez des classes (séparées par un espace).

1
Snowcrash

Je sais que cela fait un an mais j'étais curieux à propos de cela moi-même et je suis sûr que d'autres trouveront leur chemin ici. La réponse simple est non, comme d’autres l’ont dit avant moi. Un élément ne peut pas avoir plus d'un identifiant et un identifiant ne peut pas être utilisé plus d'une fois dans une page. Essayez-le et vous verrez comment il fonctionne ne fonctionne pas.

En réponse à la réponse de tvanfosson concernant l'utilisation du même identifiant dans deux éléments différents. Autant que je sache, un identifiant ne peut être utilisé qu'une seule fois dans une page, qu'il soit associé ou non à une balise différente.

Par définition, un élément nécessitant un ID doit être unique, mais si vous avez besoin de deux ID, il n'est pas vraiment unique et nécessite plutôt une classe.

0
Taylor

C'est intéressant, mais pour autant que je sache, la réponse est non. Je ne vois pas pourquoi vous avez besoin d'un identifiant imbriqué, car vous le croiserez généralement avec un autre élément possédant le même identifiant imbriqué. Si vous ne le faites pas, cela ne sert à rien. Si vous le faites, cela ne sert à rien.

0
Robert K

Je voudrais dire techniquement oui, car ce qui est rendu dépend toujours du navigateur. La plupart des navigateurs essaient de respecter les spécifications du mieux qu'ils peuvent et, autant que je sache, rien dans les spécifications CSS ne s'y réfère. Je ne ferai que garantir le code html, css et javascript qui sera envoyé au navigateur avant que tout autre interprète intervienne.

Cependant, je dis aussi non, car tous les navigateurs sur lesquels je teste habituellement ne vous le permettent pas. Si vous avez besoin de voir par vous-même, enregistrez le fichier suivant au format .html et ouvrez-le dans les principaux navigateurs. Dans tous les navigateurs que j'ai testés, la fonction javascript ne correspond à aucun élément. Cependant, supprimez "hunkojunk" de la balise id et tout fonctionne correctement. Exemple de code

<html>
<head>
</head>
<body>
    <p id="hunkojunk1 hunkojunk2"></p>

<script type="text/javascript">
    document.getElementById('hunkojunk2').innerHTML = "JUNK JUNK JUNK JUNK JUNK JUNK";
</script>
</body>
</html>
0
James

Non.

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

La valeur ne doit contenir aucun espace.

id="a b" <- trouve le caractère d'espacement dans VaLuE .

Cela dit, vous pouvez attribuer un style à plusieurs ID. Mais si vous suivez les spécifications, la réponse est non.

0
corysimmons
Any ID assigned to a div element is unique.
However, you can assign multiple IDs "under", and not "to" a div element.
In that case, you have to represent those IDs as <span></span> IDs.

Say, you want two links in the same HTML page to point to the same div element in  the page.

The two different links
<p><a href="#exponentialEquationsCalculator">Exponential Equations</a></p>         

<p><a href="#logarithmicExpressionsCalculator"><Logarithmic Expressions</a></p>

Point to the same section of the page. 
<!-- Exponential / Logarithmic Equations Calculator -->
<div class="w3-container w3-card white w3-margin-bottom">      
   <span id="exponentialEquationsCalculator"></span>
   <span id="logarithmicEquationsCalculator"></span>
</div>
0
Samdom For Peace

les classes sont spécialement conçues pour cela, voici le code à partir duquel vous pouvez comprendre

<html>
<head>
    <style type="text/css">
     .personal{
            height:100px;
            width: 100px;   

        }
    .fam{
            border: 2px solid #ccc;
        }   
    .x{
            background-color:#ccc;
        }   

    </style>
</head>
<body>

    <div class="personal fam x"></div>

</body> 
</html>
0
user3266067