Comment créer un lien vers une partie d'une page? (hacher?)

210

Comment établissez-vous un lien (avec <a>) pour que le navigateur accède à certains sous-titres de la page cible par opposition au haut?

html xhtml anchor Haroldo
la source

Réponses:

275

S'il existe une <a name="foo">balise ou une balise avec un id(par exemple, <div id="foo">), vous pouvez simplement l'ajouter #fooà l'URL. Sinon, vous ne pouvez pas créer de liens arbitraires vers des parties d'une page.

Voici un exemple complet: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Lier du contenu sur le même exemple de page: <a href="#foo">Jump to #foo on same page</a>

Daniel DiPaolo
la source
60
Juste une note: En HTML5, il n'y a plus d' nameattribut pour les <a>éléments: l' attribut name sur l'élément a est obsolète. Pensez plutôt à mettre un attribut id sur le conteneur le plus proche.
insertusernamehere
alors utilisez-vous l'exemple complet ou le même exemple de page? l'exemple complet n'est-il pas la même chose?
akantoword
2
si nous avions une page reposante avec une URL comme: domain.com/#home?page=1comment utiliser un identifiant en href?
iraj jelodari
1
@irajjelodari Vous mettriez le hachage à la fin:domain.com/?page=1#home
tomsmeding
je devais utiliser 2 hashtags dans l'URL comme: example.com/#RouteName?page=1#ID. un pour le routage et un pour la navigation à l'intérieur de la page actuelle. enfin j'ai utilisé le mode html5 de l'URL afin de supprimer les hashtags de route;) @tomsmeding
iraj jelodari
41

Vous utilisez une ancre et un hachage. Par exemple:

Cible du lien:

 <a name="name_of_target">Content</a>

Lien vers la cible:

 <a href="#name_of_target">Link Text</a>

Ou, si vous créez un lien depuis une autre page:

 <a href="http://path/to/page/#name_of_target">Link Text</a>
Michael Aaron Safyan
la source
8
Le broser sautera également à n'importe quel élément avec l'id name_of_target. Vous n'avez pas besoin d'utiliser une <a>balise comme cible. Un autre objectif pourrait donc être <h3 id='name_of_target'>Content</h3>.
Cyrille
8
Notez que cela est désormais obsolète en HTML5.
Tim
33

Ajoutez simplement un hachage avec l'ID d'un élément à l'URL. Par exemple

<div id="about"></div>

et

http://mysite.com/#about

Le lien ressemblerait donc à:

<a href="http://mysite.com/#about">About</a>

ou juste

<a href="#about">About</a>
Felix Kling
la source
21

Voici comment:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>
Sarfraz
la source
2
Tu quoi? Vous avez une fermeture </a>après une ouverture <div ...>- vous ne savez pas vraiment ce que vous essayez de faire ici.
Dominic Rodger
1
j'ai copié ma ligne de lien et collé ci-dessous et j'ai oublié de fermer la div. Merci quand même.
Sarfraz
10

Vous avez deux options:

Vous pouvez soit mettre une ancre dans votre document comme suit:

<a name="ref"></a>

Ou bien vous donnez un identifiant à un élément HTML quelconque:

<h1 id="ref">Heading</h1>

Ensuite, ajoutez simplement le hachage #refà l'URL de votre lien pour accéder à la référence souhaitée. Exemple:

<a href="document.html#ref">Jump to ref in document.html</a>
Daniel Vassallo
la source
6

Le 12 mars 2020, un brouillon a été ajouté par WICG pour les fragments de texte , et maintenant vous pouvez lier au texte sur une page comme si vous le recherchiez en ajoutant ce qui suit au hachage

#:~:text=<Text To Link to>

Exemple de travail sur Chrome Version 81.0.4044.138:

Cliquez sur ce lien Devrait recharger la page et mettre en évidence le texte du lien

Abderrahmane TAHRI JOUTI
la source