Devrais-je créer des ancres HTML avec 'name' ou 'id'?
Quand on veut faire référence à une partie d’une page Web avec la méthode "http://example.com/#foo", faut-il 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?
Selon la spécification HTML 5, 5.9.8 Naviguer vers un identifiant de fragment :
Pour les documents HTML (et le type MIME text/html), le modèle de traitement suivant doit être suivi pour déterminer la nature de la partie indiquée du document.
- Analyser l'URL et laisser fragid être le composant <fragment> de l'URL.
- Si fragid est la chaîne vide, la partie indiquée du document correspond au haut du document.
- S'il existe dans le DOM un élément dont l'ID est exactement égal à fragid, le premier élément de ce type dans l'ordre de l'arbre est la partie indiquée du document; arrêtez l'algorithme ici.
- S'il existe dans le DOM un élément a doté d'un attribut name dont la valeur est exactement égale à fragid, le premier élément de ce type dans l'ordre de l'arborescence est la partie indiquée du document; arrêtez l'algorithme ici.
- Sinon, aucune partie du document n’est indiquée.
Donc, il cherchera id="foo", puis suivra en name="foo"
Edit: Comme l'a souligné @hsivonen, en HTML5, l'élément a n'a pas d'attribut name. 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 aucun type de code HTML utilisé en tant que text/html, car la syntaxe de l'é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 en HTML4 et en 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 ... telle que 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 de celle-ci, votre titre sera influencé par un code CSS spécifique à <a> au sein de votre site. C'est juste une marge supplémentaire, et vous ne devriez pas en avoir besoin. Je recommanderais fortement de placer un identifiant sur le titre, non seulement il est mieux formé, mais il vous permettra également de traiter cet objet en Javascript ou en CSS.
Wikipedia utilise beaucoup 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é avec ce formulaire.
N'oubliez pas non plus que vous pouvez l'utiliser non seulement avec des étendues, mais également avec des div ou même des cellules de tableau. Vous avez ensuite accès à la pseudo-classe: target sur l'élément. Veillez simplement à ne pas modifier la largeur, comme avec le texte en gras, car cela déplace le contenu, ce qui est dérangeant.
Ancres nommés - mon vote est à é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 obsolète déjà.
- "Eléments d'ancrage sans attribut href" - Encore une fois, la nature d'un élément (lien hypertexte ou non) est définie par le fait d'avoir un attribut?! Double fou. Le bon sens dit de l'éviter complètement.
- Si vous modifiez une ancre sans pseudo-classe, le style s'applique à chacune d'elles. En CSS3, vous pouvez contourner ce problème avec des sélecteurs d'attributs (ou le même style pour chaque pseudo-classe), mais c'est quand même une solution de contournement. Cela ne vient généralement pas parce que vous choisissez des couleurs par pseudo-classe et que 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 avez toujours décidé de rendre vos liens audacieux, cela poserait des problèmes.
- Netscape 4 pourrait ne pas prendre en charge la fonctionnalité id, mais un attribut inconnu ne causera toujours aucun problème. C'est ce qu'on appelle la compatibilité pour moi.
<h1 id="foo">Foo Title</h1>
est ce qui devrait être utilisé. N'utilisez pas d'ancre sauf si vous voulez un lien.
En-tête pour les utilisateurs de JavaScript: tous les identifiants deviennent des variables globales sous 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 du h1.
Sauf si vous pouvez garantir que toutes les valeurs utilisées dans les attributs id sont sûres, vous pouvez préférer vous en tenir à name:
<h1 name="foo">Foo Title</h1>
La méthode ID ne fonctionnera pas sur les anciens navigateurs, la méthode du nom d'ancre sera obsolète dans les versions HTML plus récentes ... J'irais avec id.
Il n'y a pas de différence sémantique. les normes ont tendance à 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 astuces suivantes :
Utilisez id ou name? Les auteurs doivent prendre en compte les problèmes suivants lorsqu'ils choisissent d'utiliser id ou name pour un nom d'ancre:
- L'attribut id peut ne pas se limiter à un nom d'ancre (sélecteur de feuille de style, identificateur 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'ancres plus riches (avec des entités).
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 leur numéro de série. Je voulais masquer le nom ancre en haut de chaque div. La solution la plus économique s’est donc avérée inclure l’ancre en tant qu’identifiant dans la balise d’ouverture div, c.-à-d.
<div id="[serial number]" class="topic_wrapper">
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 au format HTML5 utilisant l'attribut id, bien que généralement équivalents, nécessitent un élément à identifier, qui sont généralement censés contenir du contenu.
Par exemple, une plage ou une section vide peut être utilisée, mais cette utilisation a un aspect et une odeur dégénérés.
Une idée est d'utiliser l'élément wbr à cette fin. Wbr a un modèle de contenu vide et déclare simplement qu'un saut de ligne est possible; cela reste une utilisation légèrement gratuite d'une balise de balisage, mais beaucoup moins que des divisions de document gratuites ou des étendues de texte vides.
Le deuxième exemple attribue un identifiant unique à l'élément en question. Cet élément peut ensuite être manipulé ou consulté via DHTML.
Le premier, en revanche, définit un emplacement nommé dans le document, semblable à un signet. Attaché à une "ancre", cela prend tout son sens.
En html 5, l'attribut id="" 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'attribut name="" de l'élément <a> définit une ancre pour un lien de fragment. Je recommande quelque chose comme:<a name="foo" id="foo"></a><h1>Foo Title</h1>
La prise en charge de l’attribut id="" étant 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 d’au moins vingt ans mieux vaut ne pas casser quelque chose s’il n’ya pas de bonne raison de]). Il est compatible et ne met en forme aucun élément de l'élément link'd, car la clôture </a> est toujours en dehors de l'élément, mais reste valable dans toutes les normes en vigueur.
Assurez-vous que les attributs name="" et id="" de l'élément <a> sont identiques.
Pourquoi ne pas 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 !!!