Dois-je faire des ancres HTML avec 'nom' ou 'id'?

quand on veut se référer à une partie d'une page Web avec la " "méthode 151920920"", devrait-on utiliser

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

ou

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

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

706
demandé sur mikemaccana 2009-01-27 21:57:18

14 réponses

selon la spécification HTML 5, 5.9.8 navigation vers un identificateur de fragment :

pour les documents HTML (et le type MIME texte/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 de L'URL.
  2. si fragid est le vide chaîne de caractères, puis l'indication de la partie 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 tel élément dans l'ordre arborescent 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 de nom dont la valeur est exactement égale à fragid, alors le premier tel élément dans l'ordre d'arbre 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.

ainsi, il cherchera id="foo" , puis suivra à name="foo"

Edit: comme l'a souligné @hsivonen, dans HTML5 l'élément a n'a pas d'attribut de nom. Toutefois, les règles ci-dessus s'appliquent toujours à d'autres éléments nommés.

568
répondu Greg 2017-02-04 20:38:14

vous ne devriez pas utiliser <h1><a name="foo"/>Foo Title</h1> dans n'importe quelle saveur de HTML servi comme text/html , parce que la syntaxe D'élément vide XML n'est pas supportée dans text/html . Cependant, <h1><a name="foo">Foo Title</a></h1> est correct dans HTML4. Il n'est pas valide dans la version actuelle du HTML5.

<h1 id="foo">Foo Title</h1> est OK dans les deux 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.

168
répondu hsivonen 2009-01-27 19:37:39

je dois dire si vous allez être lien à cette zone dans la page... comme la page.html#foo et Foo Title n'est pas un lien que vous devriez utiliser:

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

si vous mettez plutôt une référence <a> autour du titre, vous serez influencé par un <a> CSS spécifique dans votre site. C'est juste un supplément, et tu ne devrais pas en avoir besoin. Il serait fortement recommandé d'aller avec placer un id sur le titre, non seulement est-il mieux formé, mais il vous permettra d'adresser cet objet en Javascript ou CSS.

48
répondu Tim Knight 2009-01-27 19:03:32

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

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

et Wikipedia travaille pour tout le monde, donc je me sentirais en sécurité en restant avec cette forme.

N'oubliez pas non plus que vous pouvez l'utiliser non seulement avec des portées, mais aussi avec des divs ou même des cellules de table, et vous avez alors accès à la pseudo-classe cible sur l'élément. Il suffit de veiller à ne pas changer la largeur, comme avec le texte en gras, car qui déplace le contenu autour, ce qui est inquiétant.

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

  • "les Noms et identifiants sont dans le même espace de noms..."- Deux attributs avec le même espace de noms est tout simplement fou. Disons simplement obsolète déjà.
  • "Anchors elements without href atribute" - encore une fois, la nature d'un élément (hyperlien ou non) est-elle définie en ayant un atribute?! Double fou. Le bon sens dit d'éviter tout à fait.
  • si vous jamais style une ancre sans pseudo-classe, le style s'applique à chacun. Dans CSS3 vous pouvez contourner cela avec des sélecteurs d'attributs (ou même style pour chaque pseudoclass), mais c'est tout de même une solution. Cela ne se produit généralement pas parce que vous choisissez des couleurs par pseudo-classe, et le soulignement étant présent par défaut, il n'a de sens que de supprimer, ce qui le rend le même que les autres textes. Mais vous ne décidez jamais de faire vos liens gras, il causera difficulté.
  • Netscape 4 ne supporte peut-être pas la fonctionnalité id, mais un attribut inconnu ne causera pas de problème. C'est ce qu'on appelle la compatibilité pour moi.
25
répondu Zoltán Morvai 2013-03-25 14:46:17
<h1 id="foo">Foo Title</h1>

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

15
répondu Andrew Marsh 2009-06-25 19:49:25
La méthode D'identification

ne fonctionnera pas sur les navigateurs plus anciens, la méthode du nom d'ancrage sera dépréciée dans les versions HTML plus récentes... J'irais avec l'id.

9
répondu Spikolynn 2015-04-27 08:36:18

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

utiliser id ou name ? Les auteurs devraient tenir compte des questions suivantes lorsqu'ils décident d'utiliser id ou name pour un nom d'ancrage.:

  • l'attribut id peut agir comme plus qu'un nom d'ancrage (par exemple, sélecteur de feuille de style, Identificateur de traitement, etc.).
  • certains anciens agents utilisateurs ne supportent pas les ancres créées avec l'attribut id.
  • l'attribut name permet des noms d'ancrage plus riches (avec des entités).
8
répondu erickson 2009-01-27 19:26:58

les Chefs pour JavaScript utilisateurs: tous les Id de variables globales en vertu de la fenêtre .

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

vient de créer le JS global:

window.foo

la valeur de window.foo sera la HTMLElement pour la h1 .

sauf si vous pouvez garantir que toutes les valeurs utilisées dans les attributs id sont sûres, vous pouvez préférer coller à name :

<h1 name="foo">Foo Title</h1>
8
répondu mikemaccana 2015-02-17 19:24:35

j'ai une page Web composée d'un certain nombre de div empilés verticalement, de format identique et ne différant que par le numéro de série. Je voulais cacher l'ancre du nom au sommet de chaque div, donc la solution la plus économique s'est avérée être l'inclusion de l'ancre comme id dans l'étiquette de div d'ouverture, I. e,

<div id="[serial number]" class="topic_wrapper">
3
répondu maximus 2012-06-13 02:10:20

Juste une observation sur le balisage Le balisage forme dans les versions précédentes de HTML fourni un point d'ancrage. Les formulaires de balisage dans HTML5 utilisant l'attribut id, bien que la plupart du temps équivalent, nécessitent un élément d'identification, presque tous devant normalement contenir du contenu.

une portée vide ou div pourrait être utilisé, par exemple, mais cette utilisation semble et les odeurs dégénérer.

une idée est d'utiliser l'élément wbr à cette fin. Le wbr a un modèle de contenu vide et déclare simplement qu'une rupture 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 espaces de texte vides.

2
répondu jerseyboy 2011-12-31 04:23:07

le deuxième échantillon attribue un numéro D'identification unique à l'élément en question. Cet élément peut alors être manipulé ou accédé en utilisant DHTML.

le premier, d'un autre côté, établit un emplacement nommé dans le document, semblable à un signet. Attaché à une "ancre", il est parfaitement logique.

1
répondu Cerebrus 2009-01-27 19:04:36

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 repli sera implémentée par défaut!!!

0
répondu Umesh Bagalur 2013-06-20 07:36:49

en html 5, l'attribut id="" définit un identifiant unique pour un élément, qui est aussi un point d'ancrage pour un lien fragment. Dans les standards html précédents, l'attribut name="" de l'élément <a> définit un point d'ancrage pour un lien fragment. Je recommande quelque chose comme:

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

Parce que la prise en charge de l'attribut id="" est un peu inégale(même si les dernières versions de tous les principaux navigateurs le prennent en charge, le des versions qui n'ont pas plus de quelques années[et il est préférable de ne pas casser quelque chose s'il n'y a pas de bonne raison]). Il est compatible, & il ne style pas ce qui est dans l'élément link'D, car la fermeture est toujours en dehors de l'élément, mais il est toujours valide dans tous les standards actuels.

assurez-vous que les attributs name="" et id="" de l'élément <a> sont les mêmes.

0
répondu Justin C. B. 2018-04-27 00:18:06

l'ensemble du concept" named anchor " utilise l'attribut name, par définition. Vous devez simplement vous en tenir à l'utilisation du nom, mais L'attribut ID peut être pratique pour certaines situations javascript.

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

-2
répondu Alex Fort 2009-02-27 20:42:04