Dois-je créer des ancres HTML avec «nom» ou «id»?


784

Lorsque l'on veut se référer à une partie d'une page Web avec la http://example.com/#foométhode " ", doit-on utiliser

<h1><a name="foo"/>Foo Title</h1>

ou

<h1 id="foo">Foo Title</h1>

Ils fonctionnent tous les deux, mais sont-ils égaux ou ont-ils des différences sémantiques?


2
Le lien devrait en fait être http://example.com#foo(donc sans le / avant le #)
Dana

71
En fait, http://example.com#fooet http://example.com/#foosont équivalents tels que définis dans l'un des RFC sur les URI.
Oliver

Réponses:


617

Selon la spécification HTML 5, 5.9.8 Navigation vers un identificateur de fragment :

Pour les documents HTML (et le type MIME text / html), le modèle de traitement suivant doit être suivi pour déterminer quelle est la partie indiquée du document.

  1. Analysez l'URL et laissez fragid être le composant <fragment> de l'URL.
  2. Si fragid est la chaîne vide, alors la partie indiquée du document est le haut du document.
  3. S'il y a un élément dans le DOM qui a un ID exactement égal à fragid, alors le premier élément de ce type dans l'arborescence est la partie indiquée du document; arrêtez l'algorithme ici.
  4. S'il y a un élément a dans le DOM qui a un attribut name dont la valeur est exactement égale à fragid, alors le premier élément de ce type dans l'arborescence est la partie indiquée du document; arrêtez l'algorithme ici.
  5. Sinon, il n'y a pas de partie indiquée du document.

Donc, il cherchera id="foo", puis suivra pourname="foo"

Edit: Comme souligné par @hsivonen, en HTML5 l' aélément n'a pas d'attribut de nom. Cependant, les règles ci-dessus s'appliquent toujours aux autres éléments nommés.


77
Il n'y a aucune relation implicite entre cet algorithme et la validité. Le <a name> n'est pas valide en HTML5 tel qu'il est actuellement rédigé.
hsivonen

13
En fait, cela ne s'applique pas aux autres "éléments nommés". En ce qui concerne les attributs de nom, cela s'applique uniquement à <un nom>. Cependant, cet attribut ne peut pas être utilisé par les auteurs. Il doit juste être respecté par les agents utilisateurs pour les anciennes pages HTML.
Anne

19
@RafaelSoares <h1 id="foo">Foo Title</h1>fonctionne même dans IE6 et fait partie de la spécification HTML 4.01
Aprillion

4
Il ne recherchera pas name = "foo" mais <a name="foo">. Voir le lien
Daniel Herzog

3
Dans un document HTML5 avec un name="foo"et un id="foo"(indépendamment de leur ordre dans la page), Chrome et Firefox passeront au id, mais IE (testé en 11) et Edge passeront auname
Alvaro Montoro

183

Vous ne devez pas utiliser <h1><a name="foo"/>Foo Title</h1>dans n'importe quelle saveur de HTML servi comme text/html, car la syntaxe d'élément vide XML n'est pas prise en charge dans text/html. Cependant, <h1><a name="foo">Foo Title</a></h1>est OK en HTML4. Il n'est pas valide en HTML5 tel qu'il est actuellement rédigé.

<h1 id="foo">Foo Title</h1>est OK à la fois en HTML4 et HTML5. Cela ne fonctionnera pas dans Netscape 4, mais vous utiliserez probablement une douzaine d'autres fonctionnalités qui ne fonctionnent pas dans Netscape 4.


6
+1 pour parler de la prise en charge du navigateur. NS4 est-il le seul à ne pas prendre en charge url # id => element.id?
Hashbrown

14
@Hashbrown Impossible de trouver une réponse, j'ai donc fait quelques tests. J'ai trouvé que même les très anciens navigateurs traitent les ids comme des nameancres en termes de fragments d'URL et de compatibilité du :targetsélecteur CSS . Testé: Chrome 6, Firefox 1.5, IE6, Opera 8.02, Safari 3.1.2, Netscape 7.2, Lynx 2.24 et les navigateurs mobiles: Android 2.2, Chrome 26, Dolphin 9.3, Firefox 19, IE10, Safari 4 et Opera Mini 5.1.
Stephen M. Harris

1
@smhmic, j'en ai trouvé un. Le navigateur Web Off-By-One reconnaît les ancres définies via <a name="foo"/> mais ne reconnaîtra pas les ancres définies via <someag id = "foo"> OB1 a été mis à jour pour la dernière fois> il y a 8 ans. Son auteur se vante qu'il est "peut-être le navigateur Web le plus petit et le plus rapide au monde avec un support HTML 3.2 complet". Il revendique la prise en charge de Win95 à XP, mais il fonctionne correctement avec Win7 64 bits. Alors, pourquoi avoir un tel dinosaure? Pour tester, bien sûr, pour vous assurer que mes sites ne se cassent pas trop mal avec des navigateurs vraiment anciens. En outre, je transporte également OB1 sur un lecteur flash. Il est minuscule, autonome et immunisé contre les infections.
Dave Burton du

26
Lire ceci en 2016, c'est comme .. Netscape 4?
ADTC

1
l'utilisation de <a name="something" id="something> </a> [ÉLÉMENT À DÉFILER VERS] est probablement la meilleure solution car elle est compatible, et elle ne
stylise

53

Je dois dire que si vous allez créer un lien vers cette zone de la page ... comme page.html # foo et Foo Title n'est pas un lien que vous devriez utiliser:

<h1 id="foo">Foo Title</h1>

Si vous placez plutôt une <a>référence autour d'elle, votre titre sera influencé par un <a>CSS spécifique au sein de votre site. C'est juste un balisage supplémentaire, et vous ne devriez pas en avoir besoin. Je recommande fortement de placer un identifiant sur le titre, non seulement il est mieux formé, mais il vous permettra d'adresser cet objet en Javascript ou CSS.


Non seulement cela, mais j'ai combattu une étrange erreur d'affichage: aucun élément n'apparaissait dans IE. N'ayant aucune idée d'un point d'attaque, je l'ai lancé sur un validateur qui a signalé les <a name="foo"> entrées, je les ai donc modifiées - et maintenant l'affichage: aucun ne fonctionne correctement.
Loren Pechtel du

C'est plus que suffisant, aucune balise d'ancrage n'est nécessaire pour l'effet.
Wallace Sidhrée

28

Wikipedia fait un usage intensif de cette fonctionnalité comme ceci:

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

Et Wikipédia fonctionne pour tout le monde, donc je me sentirais en sécurité avec ce formulaire.

N'oubliez pas non plus que vous pouvez l'utiliser non seulement avec des étendues, mais aussi avec des div ou même des cellules de tableau, puis vous avez accès à la pseudo-classe: target sur l'élément. Faites juste attention à ne pas changer la largeur, comme avec du texte en gras, car cela déplace le contenu, ce qui est dérangeant.

Ancres nommées - mon vote est d'éviter:

  • "Les noms et les identifiants sont dans le même espace de noms ..." - Deux attributs avec le même espace de noms sont tout simplement fous. Disons simplement déprécié déjà.
  • "Ancre les éléments sans attribut href" - Encore une fois, la nature d'un élément (hyperlien ou non) est définie en ayant un attribut?! Double fou. Le bon sens dit de l'éviter complètement.
  • Si vous stylisez une ancre sans pseudo-classe, le style s'applique à chacune. Dans CSS3, vous pouvez contourner cela avec des sélecteurs d'attributs (ou le même style pour chaque pseudoclasse), mais c'est toujours une solution de contournement. Cela ne se produit généralement pas car vous choisissez des couleurs par pseudo-classe, et le soulignement étant présent par défaut, il n'a de sens que de le supprimer, ce qui le rend identique à un autre texte. Mais vous décidez jamais de mettre vos liens en gras, cela causera des problèmes.
  • Netscape 4 peut ne pas prendre en charge la fonction id, mais un attribut inconnu ne causera toujours aucun problème. C'est ce que j'ai appelé la compatibilité.

1
Suggérez de modifier la puce 3 sur 4: si vous avez un style, a {color:red}il colorera à la fois vos liens <a href> ET vos fragments <a name>. Vous pouvez contourner cela avec des pseudo-classes a:link {color:red]}ou des sélecteurs d'attributsa:not([href]) {color:red;}
Bob Stein

Vous avez raison, mais pour moi, la puce 3 dit exactement cela. Ça pourrait être mon anglais ...
Zoltán Morvai

Enfin, j'ai votre point de vue: "Si vous créez un ancrage sans pseudo-classe, le style s'applique à chacun." Ambigu: vous pourriez penser "chaque pseudoclasse". Droite. Mais je pensais à «chaque cas» d'utilisation d'une ancre, ce qui signifie nommé et href-ed. Clarifié. :) Pas besoin d'éditer après votre commentaire, mais je le peux si vous insistez. Mais il n'est pas non plus susceptible de se produire avec des couleurs, car vous avez généralement l'intention de les garder différentes, mais toujours le même cas avec le poids de la police ...
Zoltán Morvai

apprécié la lecture de vos commentaires @ ZoltánMorvai. "double fou" et "netscape 4" doubleplusgood.
Randy L

1
Deux attributs avec le même espace de noms sont fous - pas vraiment. Lorsque vous créez du contenu généré par l'utilisateur, il est très utile de pouvoir spécifier quelque chose en tant que lien de fragment <a name="heading1"></a> ... document.html#heading1sans définir l'ID, car l'ID peut entrer en conflit avec un autre ID sur la page. C'est dommage qu'ils n'aient pas mis l' nameattribut en HTML5.
Jez

15
<h1 id="foo">Foo Title</h1>

est ce qui devrait être utilisé. N'utilisez pas d'ancre sauf si vous voulez un lien.


Identique à la réponse de Tim Knight, publiée six mois avant celle-ci. -1
Luc

14

Attention aux utilisateurs JavaScript: tous les ID deviennent des variables globales sous fenêtre .

<h1 id="foo">Foo Title</h1>

Je viens de créer le JS global:

window.foo

La valeur de window.foosera la HTMLElementpour h1.

À moins que vous ne puissiez garantir que toutes les valeurs utilisées dans les idattributs sont sûres, vous préférerez peut-être vous en tenir à name:

<h1 name="foo">Foo Title</h1>

12
La bonne nouvelle est que vous ne pouvez pas remplacer les fonctions définies dans window. Par exemple, <div id="open"></div>n'écrasera pas la fonction window.open.
Flimm

9

Il n'y a pas de différence sémantique; la tendance dans les normes est vers l'utilisation de idplutôt que name. Cependant, il existe des différences qui peuvent conduire à préférer namedans certains cas. La spécification HTML 4.01 offre les conseils suivants :

Utilisez idou name? Les auteurs doivent prendre en compte les problèmes suivants lorsqu'ils décident d'utiliser idou namepour un nom d'ancre:

  • L'attribut id peut agir plus qu'un simple nom d'ancre (par exemple, sélecteur de feuille de style, identifiant de traitement, etc.).
  • Certains agents utilisateurs plus anciens ne prennent pas en charge les ancres créées avec l'attribut id.
  • L'attribut name permet des noms d'ancrage plus riches (avec des entités).

14
Pour être clair, quand ils disent "agents utilisateurs plus âgés", ils signifient VRAIMENT des agents utilisateurs anciens. Je ne m'en inquiéterais pas.
Eli

1
HTML5 autorise également les identifiants «riches». Quelqu'un a-t-il des numéros de version de navigateurs avec une part de marché supérieure à 0,1% qui ne peuvent pas gérer les fragments ancrés dans l'ID? - Ou le dinosaure Netscape 4.7 est-il vraiment le plus répandu?
Robert Siemer

7
FWIW, je n'ai pas pu faire fonctionner les idancres dans Safari pour iOS 5, donc ce ne sont pas seulement les navigateurs qui étaient déjà "vraiment vieux" en '09. J'ai dû ajouter des names pour que mon site fonctionne correctement sur l'iPad. Cela a peut-être été corrigé maintenant, je ne possède aucun appareil iOS 6 à vérifier.
Daniel Saner

@DanielSaner vraiment? alors en.wikipedia.org/wiki/IPad#Applications ne fonctionne pas sur votre iPad?
Aprillion

1
@DanielSaner J'ai utilisé des simulateurs pour tester Mobile Safari 5.02 & 5.1, et Android Browser 2.2 & 2.3, et les idancres semblent fonctionner universellement. Si cet exemple simple ne fonctionne pas sur votre mobile, je vérifierais les paramètres d'accessibilité de l'appareil. (Le site mobile Wikipédia @deathApril dispose de Javascript qui fait que le fragment d'URL est ignoré.)
Stephen M. Harris

9

La méthode ID ne fonctionnera pas sur les anciens navigateurs, la méthode du nom d'ancre sera déconseillée dans les versions HTML plus récentes ... J'irais avec id.


2
Avez-vous une source pour ces réclamations? Ne vous méprenez pas; Je suis juste généralement intéressé.
Henrik Paul

11
Cela n'apporte aucune lumière sur «ne fonctionnera pas sur les anciens navigateurs». - Quels sont ces navigateurs, à part Netscape 4 ??
Robert Siemer

3
J'ai essayé d'utiliser l'id sur un div, et cela fonctionne même dans IE 7. Je ne pouvais pas tester cependant dans IE 6 .. mais qui utilise IE 6 de nos jours ...
Gilly

@deathApril dans certains cas (dépend de HASLAYOUT) c'est buggé.
Knu

@RobertSiemer Fonctionne presque universellement - voir mon commentaire sous cette réponse .
Stephen M. Harris

3

J'ai une page Web composée d'un certain nombre de conteneurs div empilés verticalement, de format identique et ne différant que par le numéro de série. Je voulais masquer l'ancre de nom en haut de chaque div, donc la solution la plus économique s'est avérée inclure l'ancre comme identifiant dans la balise div d'ouverture, c'est-à-dire,

<div id="[serial number]" class="topic_wrapper">

2

Le deuxième échantillon attribue un ID unique à l'élément en question. Cet élément peut ensuite être manipulé ou accessible à l'aide de DHTML.

Le premier, d'autre part, définit un emplacement nommé dans le document, semblable à un signet. Attaché à une "ancre", il est parfaitement logique.


2

Juste une observation sur le balisage Le formulaire de balisage dans les versions antérieures de HTML fournissait un point d'ancrage. Les formulaires de balisage en HTML5 utilisant l'attribut id, bien que généralement équivalents, nécessitent un élément à identifier, dont presque tous devraient normalement contenir du contenu.

Un span ou div vide pourrait être utilisé, par exemple, mais cette utilisation semble et dégénère.

Une pensée est d'utiliser l'élément wbr à cette fin. Le wbr a un modèle de contenu vide et déclare simplement qu'un saut de ligne est possible; il s'agit toujours d'une utilisation légèrement gratuite d'une balise de balisage, mais beaucoup moins que des divisions de documents gratuites ou des étendues de texte vides.


C'est un bon point. Plus d'informations sur wbr: w3.org/TR/html-markup/wbr.html Utilisez <wbr id="foo" />plutôt que<a name="foo"></a>
Luke

2

En html 5, l' id=""attribut définit un identifiant unique pour un élément, qui est également une ancre pour un lien de fragment. Dans les normes html précédentes, l' name=""attribut de l' <a>élément définit une ancre pour un lien de fragment. Je recommande quelque chose comme:
<a name="foo" id="foo"></a><h1>Foo Title</h1>
Parce que le soutien à laid="" attribut est un peu inégale (même si les dernières versions de tous les principaux navigateurs le prennent en charge, les versions qui ne datent pas de plus de quelques années [Et il vaut mieux ne pas casser quelque chose s'il n'y a pas de bonne raison de]). Il est compatible et ne modifie pas ce qui se trouve dans l'élément lié, car la fermeture </a> est toujours en dehors de l'élément, mais il est toujours valide dans toutes les normes actuelles.

Assurez-vous que les attributs name=""et id=""de l' <a>élément sont identiques.


2
Tout ce qui utilise HTML n'est pas un navigateur. J'utilise une bibliothèque Java qui affiche des informations dans une fenêtre en utilisant HTML. C'est la seule méthode qui a fonctionné. C'est l' nameattribut sur une balise d'ancrage qui était requis; placer des attributs sur un hNou spanne fonctionnait pas.
Mars

1

Que diriez-vous d'utiliser l'attribut name pour les anciens navigateurs et l'attribut id pour les nouveaux navigateurs. Les deux options seront utilisées et la méthode de secours sera implémentée par défaut !!!


-3

L'ensemble du concept "ancre nommée" utilise l'attribut name, par définition. Vous devez simplement vous en tenir au nom, mais l'attribut ID peut être utile pour certaines situations javascript.

Comme dans les commentaires, vous pouvez toujours utiliser les deux pour couvrir vos paris.


Lorsque vous utilisez les deux, les identifiants et noms sont-ils globalement uniques? comme dans, puis-je utiliser la même chaîne que l'identifiant et le nom?
Henrik Paul

Vous pouvez, mais certaines personnes pensent que c'est une mauvaise pratique.
Alex Fort

9
Selon la spécification HTML, si les deux sont présents, le nom et l'id doivent être identiques. Il indique également que les noms et les identifiants se trouvent dans le même espace de noms. Le service de validation HTML ne vérifie pas ces éléments, et je doute que les navigateurs s'en soucient, mais ils semblent de toute façon de bonnes directives à suivre.
erickson

3
La réalité redéfinie! <un nom ... était malade depuis le début, et le style des liens CSS le rend encore plus malade.
Robert Siemer
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.