HTML Liens
Les liens se trouvent dans presque toutes les pages Web. Les liens permettent aux utilisateurs de cliquer pour se frayer un chemin de page en page.
Liens HTML - Liens hypertextes
Les liens HTML sont des hyperliens.
Vous pouvez cliquer sur un lien et accéder à 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 : Il n'est pas nécessaire qu'un lien soit envoyé par SMS. Un lien peut être une image ou tout autre élément HTML !
HTML Liens - Syntaxe
La balise HTML <a> définit un lien hypertexte. Il 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 qui sera visible par 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/">Visitez W3Schools.com !</a>
Try it Yourself »
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 allure !
HTML Liens — L'attribut cible
Par défaut, la page liée sera affichée dans la fenêtre actuelle du navigateur. Pour modifier 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 sur lequel 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 du navigateur :
<a href="https://www.w3schools.com/" target="_blank">Visitez W3Schools !</a>
Try it Yourself »
URL absolues et URL 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 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>
Try it Yourself »
HTML Liens – Utiliser une image comme lien
Pour utiliser une image comme lien, placez simplement la balise <img> à l'intérieur du <a> étiquette :
Exemple
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Try it Yourself »
Lien vers une adresse e-mail
Utilisez mailto : dans l'attribut href pour créer un lien qui ouvre le programme de messagerie de l'utilisateur (pour laissez-les envoyer un nouvel e-mail) :
Bouton comme 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 :
Astuce : Apprenez-en plus sur JavaScript dans notre Tutoriel JavaScript.
Titres des liens
L'attribut title 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="Accédez à la section HTML de W3Schools">Visitez notre tutoriel HTML</a>
Try it Yourself »
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>
Try it Yourself »
Exemple
Lien vers une page située dans le dossier html du site actuel :
<a href="/html/default.asp">HTML tutorial</a>
Try it Yourself »
Exemple
Lien vers une page située dans le même dossier que la page actuelle :
<a href="default.asp">HTML tutorial</a>
Try it Yourself »
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
hrefpour définir l'adresse du lien - Utilisez l'attribut
targetpour 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'attributhrefpour créer un lien qui ouvre le programme de messagerie de l'utilisateur.
Balises de lien HTML
| Balise | Description |
|---|---|
| <a> | Définit un lien hypertexte |
Pour une liste complète de toutes les balises HTML disponibles, visitez la Référence des balises HTML sur notre site Web W3SchoolsFR. Le meilleur.
HTML - Liens - Vidéo W3Schools
Cette vidéo explique ce que sont les liens et comment ils fonctionnent en HTML.
Fait partie d'une série de didacticiels vidéo pour apprendre le HTML pour les débutants !
