Que se passe-t-il lorsqu'un lien contient un signe dièse «#»

93

J'ai inspecté certains sites et ils ont un signe dièse (#) dans l'URL. Qu'est ce que ça fait?

 <a href="#" >Link name</a>
html Luc101
la source

Réponses:

105

C'est un "fragment" ou "une ancre nommée". Vous pouvez utiliser pour créer un lien vers une partie d'un document. Généralement, lorsque vous créez un lien vers une page, le navigateur l'ouvre en haut de la page. Mais vous créez un lien vers une section à mi-chemin, vous pouvez utiliser le fragment pour créer un lien vers cet en-tête (ou autre).

Si il n'y a pas <a name="whatever"/> balise dans la page, le navigateur créera simplement un lien vers le haut de la page. Si le fragment est vide, il sera également lié au haut de la page.

Pour un fragment uniquement <a href="#">Link name</a> , il ne s'agit que d'un lien vers le haut de la page actuelle .

Vous voyez souvent ce genre de lien utilisé en conjonction avec javascript. Le HTML conforme aux normes nécessite un hrefattribut, mais si vous prévoyez de traiter la demande avec javascript, alors "#" sert d'espace réservé raisonnable.

Dean Harding
la source
1
+1 Bien que le terme officiel soit un fragment d'URL, pas une "référence de hachage": w3.org/TR/WD-html40-970708/htmlweb.html#h-4.1.1
Jason Hall
Ouais, je l'ai changé en "fragment" dans ma réponse, parce que c'est ce que la plupart des gens utilisent. Je n'ai jamais su qu'il avait un nom "officiel" cependant :)
Dean Harding
2
Pourquoi les navigateurs le traitent comme «aller en haut de la page»: techniquement, vous avez modifié la page. Après avoir cliqué sur le lien, vous remarquerez que le # est en fait ajouté à l'URL dans la barre d'adresse, et si vous cliquez sur le bouton Précédent, il le supprimera à nouveau. Je ne dirais pas que c'est un lien vers une partie d'un document, plutôt un lien vers un endroit à l'intérieur du document. Sinon, fondamentalement la même chose que je
tapais
Un URI se terminant par # est autorisé par la syntaxe générique et pourrait être considéré comme une sorte de fragment vide. Dans les types de document MIME tels que text / html ou tout autre type XML, les identificateurs vides correspondant à cette construction syntaxiquement légale ne sont pas autorisés. Les navigateurs Web affichent généralement le haut du document pour un fragment vide. - en.wikipedia.org/wiki/Fragment_identifier
IcyBrk
Aussi par "Si aucune représentation de ce type n'existe, alors la sémantique du fragment est considérée comme inconnue et n'est effectivement pas contrainte." De rfc3986 ( tools.ietf.org/html/rfc3986#page-24 )
IcyBrk
23

... juste pour ajouter quelques conseils utiles supplémentaires.

Vous pouvez y accéder et le modifier avec document.location.hashJavaScript.

Il peut pointer vers une ancre nommée (par exemple <a name="top"></a>) ou vers un élément avec un identifiant correspondant (par exemple <div id="top"></div>).

En voir un seul (par exemple <a href="#" onclick="pop()">popup</a>) signifie généralement qu'un lien est utilisé pour exécuter JavaScript exclusivement. C'est une mauvaise pratique.

Tout aélément doit avoir un hrefqui pointe vers une ressource valide. S'il n'en existe pas, envisagez d'utiliser un autre élément, tel que button.

Alex
la source
1
C'est un bon point à ce sujet, pas particulièrement une bonne pratique ... mais ce n'est pas parce que ce n'est pas bon que vous ne le trouverez pas utilisé comme ça partout :)
Dean Harding
1
@alex, si c'est une mauvaise pratique, alors dites-nous quelle serait la bonne pratique à utiliser à la place.
Ryan Lundy
@Kyralessa C'était juste là dans le paragraphe suivant. Quoi qu'il en soit, j'ai fait un montage donc j'espère que c'est plus clair.
alex
2
@alex, on peut supposer qu'une des raisons pour lesquelles les gens utilisent des liens au lieu de boutons est qu'ils veulent l'apparence des liens. Que diriez-vous d'un lien vers une page décrivant comment faire ressembler un bouton à un lien? Exemple: test du bouton HTML
Ryan Lundy
1
@alex, pas plus que de dire que l'utilisation de # sur un lien est une mauvaise pratique. Tout ce que l'OP a demandé, c'est ce qu'il fait.
Ryan Lundy
11

# indique un lien vers une ancre.

Je pensais que je mentionnerais également autre chose:

Utiliser '#' comme href pour un lien qui active JavaScript est mauvais car il fait défiler la page vers le haut - ce qui n'est probablement pas ce que vous voulez. Utilisez plutôt javascript:void(0).

Nathan Osman
la source
+1 pour avoir mentionné que cliquer sur ces liens force la page à défiler vers le haut.
Chris Calo
4
Vous n'avez plus besoin d'ancre. A partir de HTML5 (et peut-être HTML 4), tout élément avec une balise <id> peut être ciblé par un identifiant de fragment. Voir la documentation HTML5: whatwg.org/specs/web-apps/current-work/multipage/…
Basil Bourque
2
N'utilisez pas non javascript:void(0)plus - utilisez un buttonsi ce n'est pas un lien.
alex
10

Le signe dièse ( #) indique de localiser une ancre sur la page. Par exemple, si vous incluez ceci quelque part sur la page:

<a name="foo"></a>

ou, plus récemment:

<div id="foo">*part of page*</div>

puis vous cliquez sur un lien sur la page qui a le href #foo, il naviguera vers l'ancre avec le nom ou divavec l'identifiant foo.

Cependant, si vous n'avez que le href #, cela mènera au haut de la page.

ElectroBit
la source
2

Cela renvoie à la page elle-même. Il est souvent utilisé avec des liens qui exécutent en fait du JavaScript.


la source