HTML Liens

Les liens se trouvent dans presque toutes les pages web et permettent aux utilisateurs de naviguer de page en page.

Liens HTML - Hyperliens

Les liens HTML sont des hyperliens.

Vous pouvez cliquer sur un lien pour accéder à un autre document.

Lorsque vous déplacez la souris sur un lien, le curseur se transforme en petite main.

Remarque : Un lien n'a pas besoin d'être du texte ; il peut également s'agir d'une image ou de tout autre élément HTML !

Liens HTML - Syntaxe

La balise HTML <a> définit un hyperlien. Elle a la syntaxe suivante :

<a href=" url "> texte du lien </a>

L'attribut le plus important de l'élément <a> est l'attribut href , qui indique la destination du lien.

Le texte du lien est la partie visible pour le lecteur.

En cliquant sur le texte du lien, le lecteur sera dirigé vers l'adresse URL spécifiée.

Exemple

Cet exemple montre comment créer un lien vers formation-ti.org :

<a href="https://www.formation-ti.org/">Visitez formation-ti.org !</a>
Essayez-le vous-même »

Par défaut, les liens apparaissent comme suit dans tous les navigateurs :

  • Un lien non visité est souligné et bleu
  • Un lien visité est souligné et violet
  • Un lien actif est souligné et rouge

Astuce : Les liens peuvent bien sûr être stylisés avec CSS pour obtenir un autre aspect !

Liens HTML - L'attribut target

Par défaut, la page liée s'affiche dans la fenêtre actuelle du navigateur. Pour changer cela, vous devez spécifier une autre cible pour le lien.

L'attribut target spécifie où ouvrir le document lié.

L'attribut target peut avoir l'une des valeurs suivantes :

  • _self - Par défaut. Ouvre le document dans la même fenêtre/onglet que celui où il a été cliqué
  • _blank - Ouvre le document dans une nouvelle fenêtre ou un nouvel onglet
  • _parent - Ouvre le document dans le cadre parent
  • _top - Ouvre le document dans le corps complet de la fenêtre

Exemple

Utilisez target="_blank" pour ouvrir le document lié dans une nouvelle fenêtre ou un nouvel onglet de navigateur :

<a href="https://www.formation-ti.org/" target="_blank">Visitez formation-ti.org !</a>
Essayez-le vous-même »

URLs Absolues vs. URLs Relatives

Les deux exemples ci-dessus utilisent une URL absolue (une adresse web complète) dans l'attribut href .

Un lien local (un lien vers une page au sein du même site web) est spécifié avec une URL relative (sans la partie "https://www") :

Exemple

<h2>URLs Absolues</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>URLs Relatives</h2>
<p><a href="html_images.html">Images HTML</a></p>
<p><a href="../css/index.html; target=_blank;">Tutoriel CSS</a></p>
Essayez-le vous-même »

Liens HTML - Utiliser une image comme lien

Pour utiliser une image comme lien, il suffit de placer la balise <img> à l'intérieur de la balise <a> :

Exemple

<a href="default.asp">
<img src="smiley.gif" alt="tutoriel HTML" style="width:42px;height:42px;">
</a>
Essayez-le vous-même »

Lien vers une adresse e-mail

Utilisez mailto: à l'intérieur de l'attribut href pour créer un lien qui ouvre le programme de messagerie de l'utilisateur (pour leur permettre d'envoyer un nouvel e-mail) :

Exemple

<a href="mailto:someone@example.com">Envoyer un e-mail</a>
Essayez-le vous-même »

Bouton comme lien

Pour utiliser un bouton HTML comme lien, vous devez ajouter un peu de code JavaScript.

JavaScript vous permet de spécifier ce qui se passe lors de certains événements, comme le clic sur un bouton :

Exemple

<button onclick="document.location='default.asp'">Tutoriel HTML</button>
Essayez-le vous-même »

Astuce : Apprenez-en plus sur JavaScript dans notre Tutoriel JavaScript .

Titres de lien

L'attribut title spécifie des informations supplémentaires sur un élément. Ces informations sont le plus souvent affichées sous forme de texte d'info-bulle lorsque la souris passe sur l'élément.

Exemple

<a href="https://www.formation-ti.org/html/" title="Aller à la section HTML de formation-ti.org">Visitez notre Tutoriel HTML</a>
Essayez-le vous-même »

Plus sur les URLs Absolues et Relatives

Exemple

Utilisez une URL complète pour lier à une page web :

<a href="https://www.formation-ti.org/html/default.asp">Tutoriel HTML</a>

Essayez-le vous-même »

Exemple

Lien vers une page située dans le dossier html sur le site web actuel :

<a href="/html/default.asp">Tutoriel HTML</a>

Essayez-le vous-même »

Exemple

Lien vers une page située dans le même dossier que la page actuelle :

<a href="default.asp">Tutoriel HTML</a>

Essayez-le vous-même »

Vous pouvez en savoir plus sur les chemins de fichiers dans le chapitre Chemins de fichiers HTML .

Résumé du chapitre

  • Utilisez l'élément <a> pour définir un lien
  • Utilisez l'attribut href pour définir l'adresse du lien
  • Utilisez l'attribut target pour définir où ouvrir le document lié
  • Utilisez l'élément <img> (à l'intérieur de <a> ) pour utiliser une image comme lien
  • Utilisez le schéma mailto: à l'intérieur de l'attribut href pour créer un lien qui ouvre le programme de messagerie de l'utilisateur

Balises de lien HTML

Balise Description
<a> Définit un hyperlien

Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des balises HTML .

Vidéo : Liens HTML