Faire un lien html avec la balise a

Faire un lien html avec la balise a

Ecrire un article sur les origines du web m’a donnée envie de revenir sur cette anodine et pourtant ô combien puissante balise : la balise a, pour faire un lien html vers une page web, un document, une ancre et bien plus encore.

Cette balise va nous permettre de créer des liens entre nos pages, sur un mot ou une image, ou au sein d’une même page. Elle peut même vous permettre de proposer un document en téléchargement à vos visiteurs.

Créer un lien html

Commençons avec la forme la plus simple de cette balise (mais un peu incomplète) :

<a href='page-de-destination'>Mot sur lequel on peut cliquer</a>

Voici un exemple plus parlant :

<a href='/contact'>Envoyez moi un petit message !</a>

Ce qui donne le lien suivant :
Envoyez moi un petit message !

Améliorons le lien en affichant une bulle au survol de la souris

Pour afficher une bulle quand le visiteur passe le curseur de sa souris sur un lien html, vous devez utiliser l’attribut « title », dont voici la syntaxe :

Par exemple :

<a href='/contact' title='Envoyez moi un petit message !'>Envoyez moi un petit message !</a>

Ce qui donne (passez votre souris sur le lien pour voir la bulle) :
Envoyez moi un petit message !

Un petit aparté : L’attribut « title » est aussi valable sur les balise « img » qui sont utilisées pour afficher une image. Cet attribut y a le même rôle : afficher une bulle au survol. Contrairement à une idée répandue, l’attribut « alt » de l’image ne sert pas à cela (bien qu’Internet Explorer l’ait longtemps considéré comme tel).

L’attribut de lien préféré des référenceurs

Le lien html est à la base de toute stratégie de référencement, en particulier le backlink, le fameux « lien retour » (un lien qu’un autre site fait vers vous).

En effet, Google considère que plus un site vous fait de liens, plus vous êtes « important », « crédible ». L’inconvénient est que le site qui fait trop de lien vers d’autres sites verra son « jus » diminuer : en gros, il dilue sa propre importance au bénéfice des autres.

Il faut imaginer ça comme « une fontaine » : si vous percez 5 petits trous dans un vase rempli d’eau, il va se déverser petit à petit. Comme de plus gros vases lui versent également de l’eau, le volume reste stable. Mais si vous percez 100 trous, le vase se videra trop vite.

Comment arrêter l’hémorragie ?

Il y a un moyen pour dire à Google « je fais un lien vers ce site mais je ne veux pas lui accorder de l’importance (et donc garder tout mon jus) » : c’est le rôle de « nofollow ».

Voici la syntaxe du code de votre lien html:

<a href='http://site-externe.fr' rel='nofollow'>Ce lien ne dilue pas le jus de mon blog</a>

Pour laisser le jus s’écouler librement, utilisez simplement :

<a href='http://site-externe.fr'>Ce lien dilue le jus de mon blog</a>

Par défaut, les liens des commentateurs sur un blog WordPress sont en nofollow, voici comment les modifier (et vous aurez alors plus de commentaires).

Un lien pour naviguer au sein d’une page web : le principe de l’ancre HTML

Autre rôle moins connu et pourtant fort utile d’un lien html est de permettre au visiteur d’accéder directement à une ligne précise de la page. On appelle ce procédé une ancre.

Pour ne pas surcharger cet article, je vous invite à retrouver toutes les explications et le code correspondant dans ce billet : Comment faire un bouton qui fait défiler la page automatiquement (ancre html)?

Un lien html pour ouvrir une page dans un nouvel onglet

En premier lieu, je voudrais préciser qu’il ne s’agit pas d’une bonne pratique. C’est au visiteur de choisir son mode de navigation, et pas à vous de le contraindre. Quoi qu’il en soit, ce comportement est bien utile pour « ne pas perdre » ses visiteurs chèrement acquis :

Voici le code, vous remarquez l’attribut « target » placé sur le lien html :

<a href='/contact' target='_blank'>Envoyez moi un petit message !</a>

Ce qui donne :
Envoyez moi un petit message !

Je vous invite quand même à y mettre une icône pour signaler l’ouverture dans une nouvelle fenêtre, comme ceci:

Envoyez moi un petit message !

Enfin, une fonction moins connue des liens html est de permettre l’ouverture ou le téléchargement de tout document.

Permettre le téléchargement d’un document au moyen d’un lien HTML

Voici le code à respecter :

<a href='/le-chemin-du/fichier-a-telecharger.doc'>Téléchargez ce document</a>

Dans ce cas précis, le fichier à télécharger doit se trouver à la racine du site web, puisque c’est le chemin indiqué par l’attribut « href ». La racine est symbolisée par l’élément « / ».

Testez par vous-même :
Téléchargez ce document (Retrouvez cette procédure en vidéo ici).

Je vous ai (quasi) tout dit de cette petite balise si courante et pourtant à la base du web tout entier. Saviez-vous qu’elle était si riche ?

Image courtesy of Stuart Miles http://www.freedigitalphotos.net

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

13 commentaires

  1. Merci pour cet article, je crois bien que c’est la première fois que je comprends vraiment bien le principe des liens dofollow et nofollow !!! :-)

    Répondre
  2. Super article pour les débutant en Seo, c’est bien de penser à eux. Par contre pour moi le rel=’nofollow’ dilue bien le pagerank de la page, c’est juste que sa envoie pas de jus.

    Répondre
    • Bonjour Le Pingouin,

      Ce n’est pas un article de référencement. C’est un article sur HTML, avec une notion de référencement.

      Pour le nofollow, le fait « d’envoyer du jus » ou de « diluer le page-rank », c’est deux façons de dire la même chose.

      Et pour mettre tout le monde d’accord, une petite explication sur le nofollow par Matt Cutts : « Rel=’nofollow’ means the PageRank won’t flow through that link as far as discovering the link, PageRank computation and all that sort of stuff » (je ne me risque pas dans une traduction approximative, mais l’idée est là et Google Translate est votre ami si vous n’y comprenez rien) Source : http://searchenginewatch.com/article/2298312/Matt-Cutts-You-Dont-Have-to-Nofollow-Internal-Links

      Répondre
  3. Bonjour Marie-Eve j ‘espère que tu va bien depuis
    C’est bien de se rappeler les définition des NO and DO follow links et spécialement après les nouveaux alogo de Google

    Répondre
  4. J’aime bien la façon dont vous présentez les codes Html pour que l’on puisse créer un lien HTML. Le plus important c’est de savoir l’importance des liens nofollow.

    Répondre
  5. Je pensais ne rien apprendre en lisant cet article pour les débutants mais j’ai tout même appris un truc pourtant tout con : le téléchargement d’un fichier en utilisant un lien html.
    En tout cas les débutants s’y retrouveront, les explications sont claires 😉

    Répondre
  6. Merci pour cet article,

    Il est parfois intéressant de revoir les bases du html, à quand un nouvel article sur une nouvelle balise ?
    La pointe de référencement est également utile pour comprendre l’intérêt du nofollow.

    Répondre
  7. super article, j’appris pour la bulle et l’indicateur de la nouvel onglet , mais je pense que cette indicateur sois très utile.

    Lorsque je la voyais avant, cela ne me donnais pas envie de cliquer dessus par peur!

    je ne sais pas pour vous!

    Répondre
    • Ca, c’est rigolo ! J’aurais jamais pensé que ça puisse faire peur. 😀

      Répondre
  8. Je trouve que l’attribut title a été détourné de sa fonction première, en ajoutant une infobulle et/ou en l’optimisant pour Google.
    À la base, c’est un attribut prévu pour l’accessibilité d’un point de vu web, c’est à dire rendre compréhensible la cible du lien par les appareils pour les malvoyants par exemple.

    Répondre
  9. Bonsoir MarieEve,

    Je vois que ton article va servir à pas mal de personnes, y compris à moi, car bien que je sache écrire un lien en html et le paramétrer pour qu’il soit en nofollow ou qu’il s’ouvre dans une nouvelle fenêtre, je ne savais pour les pages internes et les liens de téléchargement!
    Comme quoi, les rappels sont toujours bons à prendre 😉

    Amicalement,

    Bruno

    Répondre

Trackbacks/Pingbacks

  1. Faire un lien html avec la balise a - Les Doigt... - […] Comment créer un lien html, interne ou externe, vers un document, une page web ou un chapitre de la…

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint