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

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?

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.

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.

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.

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é.

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

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

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>

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

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.

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">

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.

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.

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.

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 !!!

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.