Comprendre et utiliser les ancres dans vos billets

Posté le 21 juin 2008 par Aurelien dans Ergonomie et Design > Tutoriaux

Bienvenue sur le Journal du Blog, vous pouvez vous abonner au flux RSS. Merci pour votre visite!

Lorsque nous avons décidé de publier le guide ultime du bon référencement pour votre blog, nous avions deux solutions pour présenter un billet aussi complet :

  • couper le billet en plusieurs parties (comme nous l’avons fait)
  • utiliser des ancres pour faciliter la navigation dans un tel billet

Aujourd’hui, nous allons donc vous parler des ancres, afin de mieux les comprendre et de mieux les utiliser.

Les ancres sont des liens hypertextes qui vous permettent de lier des mots à des parties de votre billet (ou d’un autre billet par ailleurs). Ainsi, vous pouvez très bien faire un sommaire, lorsque votre article est (très) long, et lier chaque titre du sommaire à la partie correspondante. C’est également fort utile si vous avez un glossaire et que vous souhaitez définir certains mots dans vos billets (vous pouvez ainsi lier ces mots à leurs définitions).

Pour faire une ancre vers une partie de votre billet vous devez, dans la partie édition du code HTML de votre blog, créer le lien et le point vers lequel celui-ci amènera.

<A HREF=”#nom de l’ancre”> lien qui pointera vers votre ancre </A>

et

<A NAME=”nom de l’ancre”> mot ou phrase vers lequel votre lien pointera </A>

Pour illustrer cela, ce lien vous renverra en haut du billet.

Dans notre exemple nous avons donc mis en début de billet (via l’éditeur HTML) :

<a name=”up”>Lorsque</a>

ainsi que sur le mot “ce lien”

<a href=”#up”>ce lien</a>

Où “up” est le nom de l’ancre.

Pour faire un lien vers une ancre d’un autre billet, il faudra mettre, dans votre billet:

<A HREF=”nom_de_fichier_local#nom de l’ancre”>lien qui pointera vers l’ancre de votre autre billet </A>

et dans votre autre billet

<A NAME=”nom de l’ancre”> mot ou phrase vers lequel votre lien pointera </A>

Tags: , ,

Vous avez aimé cet article : abonnez-vous au flux RSS !

12 commentaires

  1. Romain
    21 juin 2008

    C’est super pratique pour les billets longs avec un sommaire au début.

    Très pratique pour faire un lien “revenir en haut” en bas des pages d’un blog.


  2. Thierry Benquey
    21 juin 2008

    Tiens pour une fois que je peux ajouter quelque chose de technique sans avoir l’air d’un péquenaud…
    On peut placer l’ancre sans mot quelconque également ce qui permet de ne pas avoir ce mot en bleu lien comme dans l’exemple ci-dessus. Dans un lien qui renvoit au top c’est pas forcemment utile.
    Ouala ma contribution du jour à l’excellent Journal du Blog qui m’a permis de publier mon articles “news!” aujourd’hui en me donnant toutes ces bonnes adresses de plugins WP et les conseils quand à leur utilisation.
    Merci à vous
    THierry


  3. Romain
    22 juin 2008

    Effectivement Thierry, merci pour la précision et les compliments ;-)


  4. lespacearcenciel
    22 juin 2008

    Merci pour l’info, ça peut toujours servir (Rires…)

    Amitiés ;-)


  5. Franck
    24 juin 2008

    Merci pour ces explications. Mais pourriez-vous placer un petit article sous forme HTML, afin de voir une application concrète ? En effet, je n’y arrive toujours pas… ;)


  6. Aurelien
    24 juin 2008

    @Franck : le début du billet est : < a name="up">Lorsque< /a> (la cible de l’ancre, on ouvre la balise, et on la ferme avec < /a>) nous avons décidé de publier le < a title="Guilde ultime du bon référencement pour votre blog" href="http://www.lejournaldublog.com/wordpress-seo-le-guide-ultime-du-bon-referencement-pour-votre-blog/" target="_blank"> guide ultime du bon référencement pour votre blog< /a> (un lien vers en ancien billet), nous avions deux solutions pour présenter un billet aussi complet…

    et au niveau de l’ancre que j’ai faite, le code est :

    Pour illustrer cela, < a href="#up">ce lien< /a> (le lien de l’ancre qui te renvoie en haut de la page) vous renverra en haut du billet.

    Les phrases entre parenthèses sont des explications, j’espère que c’est plus clair. J’ai mis des espaces entre les “< " et les "a" pour que cela s'affiche en texte et non en html

    Pour en revenir au début et au commentaire de Thierry, si j'avais mis :
    < a name="up">< /a>Lorsque
    L’ancre serait toujours au même endroit, mais “lorsque” n’apparaîtrait plus comme un lien (et ne serait par conséquent pas en bleu)


  7. [...] au passage à gagner des visites via les moteurs de recherche. Placez aussi des mots-clés dans les ancres de vos liens vers les différents [...]


  8. Julien
    2 juillet 2008

    Bon je n’y suis pas arrivé.
    Je souhaitais de cette note (http://www.quelques-notes.com/index.php/2008/06/28/i-want-you-to-want-me-cheap-trick/) arriver au milieu de celle-ci (http://www.quelques-notes.com/index.php/2008/05/03/scrubs-my-favorite-tv-show/#cheap%20trick) mais je n’arrive qu’au début de la note, et pas à l’ancre.
    Je me suis planté ou bien est-ce impossible à faire ?


  9. Aurelien
    2 juillet 2008

    Bonjour Julien,

    dans ta note de départ (i want you to want me cheap trick) il faut que tu mettes :

    < A HREF=”http://www.quelques-notes.com/index.php/2008/05/03/scrubs-my-favorite-tv-show#cheap%20trick” target="_blank">lien qui pointera vers l’ancre de ton autre billet < /A>

    et dans ton second billet bien mettre :
    < A NAME=”cheap%20trick”> lien qui doit être au milieu de ton texte si j’ai bien compris< /A>
    (sans les espaces au début des balises)

    Sinon voir pour que ton ancre ne comporte qu’un seul mot, tu as choisi “cheap trick” et du coup, pour l’espace, cela te fait %20 entre les deux mots. Ca vient peut-être de là.


  10. Julien
    2 juillet 2008

    Merci Aurélien.
    L’ancre était mal faite. Et j’ai supprimé l’espace entre Cheap Trick.
    Ça marche.
    C’est cool ! Ça va être bien pratique !

    Muchas gracias


  11. [...] devient de plus en plus long à atteindre. Vous pouvez choisir de mettre un lien avec une ancre mais aussi d’ajouter une pagination à vos [...]


  12. Webfly
    8 décembre 2008

    Merci beaucoup pour ton billet, vraiment très utile !


Laisser un commentaire

A lire sur d'autres blogs


Sondage

Mon service de micro-blogging préféré

Résultats

Loading ... Loading ...

Archives

Lecteurs