Liens et images

Créez des liens vers d'autres pages et affichez des images avec les balises a et img.

7 min · 3 questions

Le « HyperText » de HTML, c'est justement la possibilité de relier les pages entre elles avec des liens. Un lien se crée avec la balise <a> (de l'anglais anchor, ancre). Sa destination est donnée par l'attribut href (hypertext reference), qui contient une URL : l'adresse d'une page web, comme https://fr.wikipedia.org. Le texte placé entre <a> et </a> devient cliquable.

<p>Mes pages préférées :</p>
<a href="https://fr.wikipedia.org">Visiter Wikipédia</a>
<a href="contact.html">Voir la page contact</a>

Pour afficher une image, on utilise la balise <img>. C'est une balise autonome : elle n'a ni contenu ni balise fermante, tout tient dans la balise elle-même. Deux attributs sont essentiels. src (source) indique où se trouve le fichier de l'image. alt (texte alternatif) décrit l'image en mots : ce texte s'affiche si l'image ne se charge pas, et il est lu à voix haute par les lecteurs d'écran des personnes malvoyantes.

<img src="images/cat.jpg" alt="Un chaton roux endormi">
<img src="logo.png" alt="Logo de mon site">
<img src="beach.jpg" alt="Une plage au coucher du soleil">

On peut combiner les deux : une image placée à l'intérieur d'un élément <a> devient cliquable. C'est exactement ce que font les logos de sites, qui ramènent à la page d'accueil quand on clique dessus.

<a href="https://fr.wikipedia.org">
  <img src="wiki-logo.png" alt="Logo de Wikipédia">
</a>

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Quel attribut contient l'adresse de destination d'un lien ?
   • src
   • href
   • alt
   • lang
2. À quoi sert l'attribut alt d'une image ?
   • À décrire l'image si elle ne s'affiche pas
   • À indiquer la taille de l'image
   • À donner l'adresse du fichier image
3. La balise <img> a-t-elle une balise fermante ?
   • Oui, il faut toujours écrire </img>
   • Non, c'est une balise autonome
   • Seulement si l'image est grande