Le mot « link » en HTML désigne deux balises différentes : le lien cliquable et le lien vers un fichier. Pas de panique, c’est simple une fois qu’on a compris la différence.
Ce guide vous montre comment utiliser la balise <a> et la balise <link> sans vous tromper, avec des exemples clairs.
Créer un lien hypertexte cliquable avec la balise <a>
Le « a » vient du mot anglais *anchor*, qui veut dire « ancre ». On l’utilise pour « ancrer » un document à un autre. C’est la base de la navigation sur internet.
Syntaxe de base : comment créer un lien simple ?
Pour faire un lien, vous avez besoin de la balise `` et de son attribut le plus important : `href`. L’attribut `href` contient l’URL de la page de destination.
La syntaxe de base est la suivante :
Code :
<a href="url">texte du lien</a>- <a>…</a> : C’est la balise qui entoure le contenu cliquable.
- href= »… » : C’est ici que vous mettez l’adresse de la page web de destination.
- texte du lien : C’est le texte qui sera visible et sur lequel l’utilisateur va cliquer. Ce texte de lien est important pour le référencement.
Par exemple, pour créer un lien vers le site W3Schools, le code HTML ressemblera à ça :
<a href="https://www.w3schools.com/">Visiter W3Schools</a>Ce code affichera un texte cliquable « Visiter W3Schools » sur votre page.
Les attributs essentiels de la balise <a>
En plus de `href`, il existe d’autres attributs utiles pour contrôler le comportement de vos liens. Les connaître vous permet de mieux gérer la navigation de l’utilisateur.
Voici les trois attributs principaux à connaître :
- href : Comme on l’a vu, il définit l’URL de destination. C’est obligatoire.
- target : Cet attribut spécifie où ouvrir le document lié. C’est très utile si vous ne voulez pas que l’utilisateur quitte votre site.
- title : Il ajoute une information supplémentaire qui apparaît quand on passe la souris sur le lien (une « tooltip »).
L’attribut target
L’attribut `target` peut prendre plusieurs valeurs. Voici les plus courantes :
- _self : C’est la valeur par défaut. Le lien s’ouvre dans le même onglet ou la même fenêtre. L’utilisateur quitte donc la page actuelle.
- _blank : Le lien s’ouvre dans une nouvelle fenêtre ou un nouvel onglet. C’est la meilleure option pour les liens externes, car l’utilisateur reste sur votre site.
- _parent : Utilisé avec des jeux de cadres (frames), le lien s’ouvre dans le cadre parent.
- _top : Utilisé aussi avec des cadres, le lien annule tous les cadres et s’ouvre dans la fenêtre complète.
Exemple de lien qui s’ouvre dans un nouvel onglet :
<a href="https://www.google.com" target="_blank">Ouvrir Google dans un nouvel onglet</a>Quand on utilise `target= »_blank »`, il est recommandé d’ajouter `rel= »noopener noreferrer »` pour des raisons de sécurité et de performance. Cependant, le code de base fonctionne sans.
L’attribut title
L’attribut `title` donne un contexte supplémentaire au lien. Le texte que vous y mettez s’affiche dans une petite bulle quand l’utilisateur survole le lien avec sa souris.
<a href="page.html" title="Plus d'infos sur ce sujet">Lisez cet article</a>C’est utile pour l’accessibilité et pour donner une meilleure expérience utilisateur, mais ce n’est pas essentiel.
URL absolues vs. URL relatives
L’attribut `href` peut contenir deux types d’URL. Comprendre la différence est important pour construire la structure de liens de votre site web.
- Une URL absolue est une adresse web complète. Elle commence toujours par `http://` ou `https://`. On l’utilise pour créer des liens vers d’autres sites web.
- Une URL relative est une adresse locale, relative à la page actuelle. Elle ne contient pas le nom de domaine. On l’utilise pour créer des liens entre les pages de votre propre site.
Exemples de code :
<!-- URL Absolue : lien vers un autre site -->
<a href="https://developer.mozilla.org/">Documentation MDN</a>
<!-- URL Relative : lien vers un fichier dans le même dossier -->
<a href="contact.html">Page de contact</a>
<!-- URL Relative : lien vers un fichier dans un sous-dossier "images" -->
<a href="/images/photo.jpg">Voir la photo</a>Utiliser des URL relatives pour vos liens internes est une bonne pratique. Si vous changez de nom de domaine, vos liens internes continueront de fonctionner sans que vous ayez à tout modifier.
Cas d’usage courants pour les liens <a>
Utiliser une image comme lien
Il est possible de rendre une image cliquable. Pour cela, il suffit de placer la balise `` à l’intérieur de la balise ``. Le visiteur pourra cliquer sur l’image pour accéder à une autre page.
<a href="page-produit.html">
<img src="image-produit.jpg" alt="Description du produit">
</a>Dans cet exemple, l’image `image-produit.jpg` devient un lien vers `page-produit.html`.
Lien vers une adresse e-mail
Vous pouvez créer un lien qui, une fois cliqué, ouvre l’application de messagerie par défaut de l’utilisateur avec une adresse e-mail pré-remplie. Pour cela, on utilise `mailto:` dans l’attribut `href`.
<a href="mailto:[email protected]">Envoyez-nous un e-mail</a>Cet exemple crée un lien « Envoyez-nous un e-mail » qui prépare un nouvel e-mail à destination de `[email protected]`.
Utiliser un bouton comme lien
Techniquement, un bouton HTML (`
Pour faire ça, on utilise l’attribut JavaScript `onclick` pour définir la redirection.
<button onclick="document.location='contact.html'">Aller à la page contact</button>Ce n’est pas la méthode la plus propre pour la sémantique HTML, mais c’est une pratique courante pour des raisons de style.
Mettre en forme les liens avec CSS
Par défaut, les navigateurs affichent les liens de manière assez reconnaissable. Vous avez sûrement déjà remarqué ces différents états :
- Lien non visité : Texte souligné et de couleur bleue.
- Lien visité : Texte souligné et de couleur violette.
- Lien actif : Texte souligné et de couleur rouge (juste au moment du clic).
Grâce au CSS, vous pouvez personnaliser entièrement l’apparence des liens. Pour cela, on utilise des pseudo-classes qui ciblent les différents états d’un lien.
Les 4 pseudo-classes principales sont :
- `a:link` : Cible un lien normal, non visité.
- `a:visited` : Cible un lien qui a déjà été visité par l’utilisateur.
- `a:hover` : Cible un lien lorsque la souris le survole.
- `a:active` : Cible un lien au moment précis où l’on clique dessus.
Exemple de code CSS pour styliser des liens :
/* Style pour un lien normal */
a:link {
color: #007bff; /* Couleur bleue */
text-decoration: none; /* Enlève le soulignement */
}
/* Style pour un lien déjà visité */
a:visited {
color: #6c757d; /* Couleur grise */
}
/* Style quand on passe la souris sur le lien */
a:hover {
color: #0056b3; /* Bleu plus foncé */
text-decoration: underline; /* Ajoute un soulignement au survol */
}
/* Style au moment du clic */
a:active {
color: #ff0000; /* Couleur rouge */
}
Cet exemple de code permet de supprimer le soulignement par défaut et de le faire réapparaître uniquement au survol, ce qui est une pratique de design web très courante.
Lier des ressources externes avec la balise <link>
Passons maintenant à la deuxième balise, la balise ``. Son rôle est très différent de celui de ``. Elle ne crée pas de lien cliquable pour l’utilisateur.
Son but est de définir une relation entre le document HTML actuel et une ressource externe. Le plus souvent, il s’agit de lier une feuille de style CSS, mais elle a de nombreux autres usages.
À quoi sert la balise <link> et où la placer ?
La balise `` est un élément « vide », ce qui signifie qu’elle n’a pas de balise de fermeture. On la place toujours à l’intérieur de la balise `` de votre document HTML.
Son rôle est de donner des instructions au navigateur, comme « va chercher ce fichier CSS pour mettre en forme la page » ou « utilise cette image comme icône pour l’onglet ». L’utilisateur ne voit jamais directement le résultat de cet élément.
Exemples d’utilisation fondamentaux
Voici les deux cas d’usage les plus fréquents pour la balise `` que vous rencontrerez partout.
Lier une feuille de style CSS
C’est l’utilisation la plus connue. Pour appliquer un style défini dans un fichier `style.css` à votre page HTML, vous utilisez ce code :
<link href="style.css" rel="stylesheet">- href= »style.css » : Indique le chemin vers le fichier CSS.
- rel= »stylesheet » : Spécifie que la relation entre ce document et le fichier est celle d’une « feuille de style » (*stylesheet*). Cet attribut est crucial.
Ajouter une icône de site (favicon)
La petite icône qui apparaît dans l’onglet du navigateur à côté du titre de la page s’appelle une « favicon ». On l’ajoute aussi avec la balise ``.
<link rel="icon" href="favicon.ico" type="image/x-icon">Pour les appareils mobiles comme les iPhones, on peut aussi spécifier une icône de meilleure qualité :
<link rel="apple-touch-icon" href="apple-icon.png">Le navigateur choisira automatiquement le bon fichier à utiliser.
Liste complète des attributs de la balise <link>
La balise `` est bien plus puissante qu’il n’y paraît. Elle possède de nombreux attributs qui permettent de gérer finement la relation avec les ressources externes. Voici une liste des plus importants.
- href
- Comme pour la balise ``, cet attribut définit l’URL de la ressource externe à lier. C’est l’attribut le plus important.
- rel
- Définit la relation entre le document courant et la ressource liée. C’est un attribut essentiel. Voici quelques valeurs communes :
stylesheet: Pour une feuille de style CSS.icon: Pour une favicon.preload: Pour précharger une ressource (police, script, image) avant qu’elle ne soit nécessaire, afin d’améliorer la vitesse de chargement de la page.alternate: Pour indiquer une version alternative du document (par exemple, une version pour l’impression ou un flux RSS).
- as
- Cet attribut est obligatoire quand on utilise `rel= »preload »`. Il spécifie le type de contenu qui est préchargé, ce qui aide le navigateur à prioriser le chargement. Valeurs possibles : `style`, `script`, `image`, `font`, `fetch`…
- type
- Indique le type MIME de la ressource liée. Par exemple, `text/css` pour un fichier CSS ou `image/png` pour une image PNG. C’est une bonne pratique de l’inclure.
- media
- Spécifie à quel type de média la ressource s’applique. Très utile pour les feuilles de style responsives. Exemples : `media= »screen »`, `media= »print »`, ou une media query comme `media= »screen and (max-width: 600px) »`.
- sizes
- Utilisé avec `rel= »icon »`, cet attribut définit les dimensions de l’icône. Il peut prendre la valeur `any` ou des dimensions précises comme `16×16` ou `32×32`.
- crossorigin
- Indique si le navigateur doit utiliser CORS (Cross-Origin Resource Sharing) pour récupérer la ressource. Utile pour charger des polices ou des scripts depuis un autre domaine. Valeurs : `anonymous` ou `use-credentials`.
- integrity
- C’est une mesure de sécurité. Cet attribut contient un hachage cryptographique qui permet au navigateur de vérifier que le fichier externe n’a pas été modifié ou corrompu. Très utilisé pour les fichiers chargés depuis un CDN.
- hreflang
- Indique la langue de la ressource liée. Utile pour le SEO si vous avez un site multilingue.
- referrerpolicy
- Contrôle la quantité d’informations de « référent » (la page d’où vient l’utilisateur) qui est envoyée lors de la requête. Valeurs : `no-referrer`, `origin`, `unsafe-url`…
- fetchpriority
- Donne une indication au navigateur sur la priorité de chargement de la ressource. Valeurs : `high`, `low`, ou `auto` (par défaut).
- title
- A un rôle différent de celui de la balise ``. Pour les feuilles de style, il permet de définir des feuilles de style alternatives que l’utilisateur peut choisir dans les options du navigateur.
Attributs obsolètes :
Certains attributs comme `charset`, `rev` ou `target` existaient pour la balise `` mais sont aujourd’hui obsolètes et ne doivent plus être utilisés.
Cas d’usage avancés
Grâce à ces attributs, on peut utiliser la balise `` pour des optimisations de performance et des cas plus complexes.
Précharger des ressources critiques
Si vous savez qu’une police de caractères ou un script important sera nécessaire plus tard sur la page, vous pouvez demander au navigateur de le charger en avance pour gagner du temps.
<link rel="preload" href="ma-police.woff2" as="font" type="font/woff2" crossorigin="anonymous">Dans cet exemple, on précharge le fichier de police `ma-police.woff2`.
Chargement conditionnel avec les media queries
Vous pouvez charger une feuille de style uniquement pour l’impression, ou uniquement pour les petits écrans. Cela évite de charger du CSS inutile.
<!-- Ce fichier CSS ne sera chargé que pour l'impression de la page -->
<link href="print.css" rel="stylesheet" media="print">
<!-- Ce fichier ne sera chargé que sur les écrans de moins de 768px de large -->
<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 768px)">Fournir des feuilles de style alternatives
En utilisant l’attribut `title` et `rel= »alternate stylesheet »`, vous pouvez proposer plusieurs thèmes pour votre site (par exemple, un thème clair et un thème sombre).
<!-- Feuille de style par défaut -->
<link href="default.css" rel="stylesheet" title="Thème par défaut">
<!-- Feuille de style alternative -->
<link href="dark.css" rel="alternate stylesheet" title="Thème sombre">L’utilisateur pourra alors choisir son thème préféré dans les menus de son navigateur (cette fonctionnalité est souvent masquée aujourd’hui, mais elle existe).
La seconde est une balise technique, invisible pour le visiteur, mais essentielle pour connecter votre page à d’autres fichiers comme le CSS, les polices ou les icônes. Maîtriser les deux est une étape clé pour créer des sites web fonctionnels et bien structurés.
