Faire un lien html avec la balise a

Partagez si vous aimez ->

« La balise a » 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 title="Envoyez moi un petit message !" href="/contact">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" rel="noopener noreferrer">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 « / ».

 

Partagez si vous aimez ->

Youcef

Concepteur de Sites Web et entrepreneur, l'écriture et la pédagogie font aussi partie de mes passions. Mon objectif est de vous aider à trouver la solution idéale pour créer votre propre Site Internet.

Vous aimerez aussi...

Laisser un commentaire

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

Simple Share Buttons