Les Ancres HTML avec 'nom' ou 'id'?

Question

Quand je veux faire référence à une partie d'une page web avec le "http://example.com/#foo"-méthode dois-je utiliser:

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

ou

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

Je sais que les deux fonctionnent, mais sont-ils égaux, ou ont-ils des différences sémantiques?

Le (X)HTML-dialecte , je suis sur HTML5, mais ne vous laissez pas limiter vos réponses et n'hésitez pas à répondre à un dialecte agnostically.

Answer 1

Selon la spécification HTML 5, 5.9.8 accédant à un identificateur de fragment:

Pour les documents HTML (et le texte/html type MIME), le modèle de traitement doit être suivi afin de déterminer ce que l'indique la partie du document.

1. Analyser l'URL, et laissez fragid être la <fragment> composants de l'URL.
2. Si fragid est la chaîne vide, l'indication de la partie du document est le haut du document.
3. Si il y a un élément dans le DOM qui a un ID égal exactement à fragid, puis le premier élément dans l'arbre de commande est indiqué partie du document; arrêt de l'algorithme ici.
4. Si il est un élément dans le DOM qui a un nom d'attribut dont la valeur est exactement égale à fragid, puis le premier élément dans l'arbre de commande est indiqué partie du document; arrêt de l'algorithme ici.
5. Sinon, il n'est pas indiqué partie du document.

Donc, il cherchera id="foo" suivie par name="foo"

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

Answer 2

Vous ne devriez pas utiliser <h1><a name="foo"/>Foo Title</h1> dans le goût de HTML servi en tant que text/html, parce que le XML de l'élément vide syntaxe n'est pas pris en charge en text/html. Toutefois, <h1><a name="foo">Foo Title</a></h1> est OK dans le HTML4. Il n'est pas valide en HTML5, tel qu'il est actuellement rédigé.

<h1 id="foo">Foo Title</h1> est OK dans les deux HTML4 et HTML5. Cela ne fonctionnera pas dans Netscape 4, mais vous aurez probablement utiliser une douzaine d'autres fonctions qui ne fonctionnent pas dans Netscape 4.

Answer 3

Je dois dire que si vous allez être à lier cette zone dans la page... comme page.html#toto et Toto Titre n'est pas un lien que vous devez utiliser:

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

Si vous au lieu de mettre un <a> de référence autour de lui, vous êtes titre sera influencé par un <a> CSS spécifique au sein de votre site. C'est juste extra balisage, et vous ne devriez pas en avoir besoin. Il recommande vivement à aller avec la mise en place d'un identifiant sur le titre, non seulement il est mieux formé, mais il vous permet soit de l'adresse de l'objet en Javascript ou CSS.

Answer 4

Wikipédia fait un usage intensif de cette fonction comme ceci:

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

Et Wikipédia est un travail pour tout le monde, je voudrais donc se sentir sûr de coller avec ce formulaire.

Aussi n'oubliez pas, vous pouvez l'utiliser non seulement avec le couvre, mais avec des divs ou même des cellules de tableau, et ensuite vous avez accès à l' :cible pseudo-classe sur l'élément. Juste attention de ne pas modifier la largeur, comme avec le texte en gras, la cause qui se déplace le contenu, ce qui est inquiétant.

Les ancres nommées - ce que mon vote est à é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à.
• "Ancres éléments sans l'attribut href" - Encore une fois, la nature de l'élément (lien hypertexte ou pas) est définie par la présence d'un attribut?! Double fou. Le sens commun dit de l'éviter complètement.
• Si jamais vous style une ancre sans une pseudo-classe, le style s'applique à chacun. En CSS3, vous pouvez obtenir autour de cette avec sélecteur d'attribut (ou du même style pour chaque pseudoclass), mais c'est toujours une solution de contournement. Ce n'est généralement pas parce que vous choisissez des couleurs par la pseudo-classe, et le soulignement d'être présent par défaut, il n'a de sens que pour l'enlever, ce qui en fait le même que le reste du texte. Mais jamais vous décidez de faire vos liens en gras, ça va causer des problèmes.
• Netscape 4 ne prennent pas en charge la fonctionnalité d'identification, mais encore un attribut inconnu ne causera pas de problèmes. C'est ce qui s'appelle de compatibilité pour moi.

Answer 5

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

est ce que devrait être utilisé. Ne pas utiliser un point d'ancrage, sauf si vous voulez un lien.