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


Quand on veut se référer à une partie d'une page Web avec le "http://example.com/#foo"méthode, 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?


694
2018-01-27 18:57


origine


Réponses:


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 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, la partie indiquée du document est la partie supérieure 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'arbre est la partie indiquée du document; arrêtez l'algorithme ici.
  4. S'il y a un une élément 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'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.

Donc, il va chercher id="foo", puis suivra à name="foo"

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


560
2018-01-27 19:10



Vous ne devriez pas utiliser <h1><a name="foo"/>Foo Title</h1> dans toute saveur de HTML servi comme text/html, car la syntaxe des éléments vides 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 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
2018-01-27 19:37



Je dois dire si vous allez être lié à cette zone dans 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 mettez plutôt un <a> référence autour d'elle, vous êtes le 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. Il serait fortement recommandé d'aller avec un identifiant sur le titre, non seulement il est mieux formé, mais il vous permettra soit d'adresser cet objet en Javascript ou en CSS.


47
2018-01-27 19:03



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

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

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

N'oubliez pas non plus que vous pouvez utiliser ceci non seulement avec des travées mais avec des divs ou même des cellules de table, et ensuite vous avez accès à la pseudo-classe: target sur l'élément. Il suffit de faire 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 ids sont dans le même espace de nom ..." - Deux attributs avec le même espace de noms sont juste fous. Disons simplement déprécié déjà.
  • "Ancre des éléments sans attribut href" - Encore une fois, la nature d'un élément (lien hypertexte ou non) est définie par un attribut atribute ?! Double fou. Le bon sens dit de l'éviter complètement.
  • Si vous stylez une ancre sans pseudo-classe, le style s'applique à chacun. En CSS3, vous pouvez contourner cela avec des sélecteurs d'attributs (ou le même style pour chaque pseudo-classe), mais c'est toujours une solution de contournement. Cela n'arrive généralement pas parce que vous choisissez des couleurs par pseudo-classe, et le soulignement étant présent par défaut, cela n'a de sens que de supprimer, ce qui le rend identique à un autre texte. Mais vous décidez jamais de rendre vos liens gras, cela va causer des problèmes.
  • Netscape 4 peut ne pas prendre en charge la fonctionnalité d'identification, mais un attribut inconnu ne causera aucun problème. C'est ce que l'on appelle la compatibilité pour moi.

22
2018-03-25 14:46



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

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


15
2018-06-25 19:49



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'y retournerais avec id.


9
2018-01-27 19:02



Il n'y a pas de différence sémantique; la tendance dans les normes est vers l'utilisation de 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:

Utilisation id ou name? Les auteurs devraient prendre en compte les questions suivantes lorsqu'ils décident d'utiliser id ou name pour un nom d'ancre:

  • L'attribut id peut agir en tant que plus qu'un simple nom d'ancre (par exemple, sélecteur de feuille de style, identificateur de traitement, etc.).
  • Certains anciens agents utilisateurs 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).

8
2018-01-27 19:26



Heads up pour les utilisateurs JavaScript: tous les ID deviennent des variables globales sous la fenêtre.

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

Juste créé le JS global:

window.foo

La valeur de window.foo sera le HTMLElement pour le h1.

Sauf si vous pouvez garantir toutes les valeurs utilisées dans id les attributs sont sûrs, vous préférerez peut-être name:

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

7
2018-02-17 18:23



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 cacher l'ancre de nom au sommet de chaque div, de sorte que la solution la plus économique s'est avérée inclure l'ancre comme un identifiant dans l'étiquette div d'ouverture, c'est-à-dire

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

3
2018-06-13 02:10