Liens HTML
Les liens se trouvent dans presque toutes les pages Web. Les liens permettent aux utilisateurs de cliquer sur leur chemin d'une page à l'autre.
Liens HTML - Hyperliens
Les liens HTML sont des hyperliens.
Vous pouvez cliquer sur un lien et passer à un autre document.
Lorsque vous déplacez la souris sur un lien, la flèche de la souris se transforme en une petite main.
Remarque : Un lien ne doit pas nécessairement être du texte. Un lien peut être une image ou tout autre élément HTML !
Liens HTML - Syntaxe
La balise HTML <a>définit un lien hypertexte. Il a la syntaxe suivante :
<a href="url">link text</a>
L'attribut le plus important de l' <a> élément est l'
hrefattribut, qui indique la destination du lien.
Le texte du lien est la partie qui sera visible pour le lecteur.
Cliquer sur le texte du lien enverra le lecteur à l'adresse URL spécifiée.
Exemple
Cet exemple montre comment créer un lien vers W3Schools.com :
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
Par défaut, les liens apparaîtront 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 avoir un autre look !
Liens HTML - L'attribut cible
Par défaut, la page liée sera affichée dans la fenêtre actuelle du navigateur. Pour changer cela, vous devez spécifier une autre cible pour le lien.
L' targetattribut spécifie où ouvrir le document lié.
L' targetattribut peut avoir l'une des valeurs suivantes :
_self- 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 tout le corps 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.w3schools.com/"
target="_blank">Visit W3Schools!</a>
URL absolues vs URL relatives
Les deux exemples ci-dessus utilisent une URL absolue (une adresse Web complète) dans l' hrefattribut.
Un lien local (un lien vers une page du même site Web) est spécifié avec une URL relative (sans la partie "https://www") :
Exemple
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative
URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS
Tutorial</a></p>
Liens HTML - Utiliser une image comme lien
Pour utiliser une image comme lien, il suffit de mettre la <img>
balise à l'intérieur de la <a>balise :
Exemple
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Lien vers une adresse e-mail
Utilisez
mailto:à l'intérieur de l'
hrefattribut pour créer un lien qui ouvre le programme de messagerie de l'utilisateur (pour lui permettre d'envoyer un nouvel e-mail) :
Exemple
<a href="mailto:[email protected]">Send email</a>
Bouton en tant que lien
Pour utiliser un bouton HTML comme lien, vous devez ajouter du code JavaScript.
JavaScript vous permet de spécifier ce qui se passe lors de certains événements, comme un clic sur un bouton :
Exemple
<button
onclick="document.location='default.asp'">HTML Tutorial</button>
Astuce : Apprenez-en plus sur JavaScript dans notre didacticiel JavaScript .
Titres des liens
L' titleattribut spécifie des informations supplémentaires sur un élément. Les informations sont le plus souvent affichées sous forme de texte d'info-bulle lorsque la souris se déplace sur l'élément.
Exemple
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
En savoir plus sur les URL absolues et les URL relatives
Exemple
Utilisez une URL complète pour créer un lien vers une page Web :
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Exemple
Lien vers une page située dans le dossier html du site Web actuel :
<a href="/html/default.asp">HTML tutorial</a>
Exemple
Lien vers une page située dans le même dossier que la page en cours :
<a href="default.asp">HTML tutorial</a>
Vous pouvez en savoir plus sur les chemins de fichiers dans le chapitre Chemins de fichiers HTML .
Résumé du chapitre
- Utiliser l'
<a>élément pour définir un lien - Utilisez l'
hrefattribut pour définir l'adresse du lien - Utilisez l'
targetattribut pour définir où ouvrir le document lié - Utilisez l'
<img>élément (à l'intérieur<a>) pour utiliser une image comme lien - Utilisez le
mailto:schéma à l'intérieur de l'hrefattribut pour créer un lien qui ouvre le programme de messagerie de l'utilisateur
Balises de lien HTML
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .