Liens, images et tableaux en HTML

Un lien HTML s'écrit avec la balise <a> et son attribut href, une image avec <img> et ses attributs src et alt, un tableau de données avec <table>, <tr>, <th> et <td>. Ce chapitre explique comment écrire ces trois éléments correctement, comment rédiger un chemin vers un fichier sans le casser, et comment rendre liens, images et tableaux compréhensibles par tous, y compris par un lecteur d'écran.

La balise a et l'attribut href

Le lien est ce qui fait le Web : un clic, et tu vas ailleurs. La destination est dans l'attribut href (hypertext reference), le texte cliquable entre les balises.

<a href="agenda.html">Voir l'agenda des ateliers</a>

Une ancre vise un id, qui doit exister et être unique dans la page :

<nav>
  <a href="#horaires">Horaires</a>
  <a href="#acces">Accès</a>
</nav>
…
<h2 id="horaires">Horaires</h2>
…
<h2 id="acces">Accès</h2>

Un lien se place autour d'un texte, d'une image ou même d'un bloc entier (une carte cliquable). En revanche, on ne met jamais un lien dans un autre lien, ni un bouton dans un lien.

Ouvrir un lien dans un nouvel onglet

L'attribut target="_blank" ouvre le lien dans un nouvel onglet :

<a href="https://www.culture.gouv.fr/" target="_blank" rel="noreferrer">
  Site du ministère de la Culture (nouvel onglet)
</a>

Pendant longtemps, un lien target="_blank" donnait à la page ouverte un accès à la tienne, par l'objet JavaScript window.opener : elle pouvait la remplacer en douce par une fausse page de connexion (une attaque appelée reverse tabnabbing). La parade était d'ajouter rel="noopener". Les navigateurs actuels appliquent noopener d'office à tout lien target="_blank", mais l'ajouter reste une bonne habitude pour les vieux navigateurs, et noreferrer empêche en plus d'envoyer au site de destination l'adresse de la page d'où vient le visiteur.

Écrire un bon texte de lien

Le texte d'un lien doit dire où il mène, même lu hors de son contexte. Les lecteurs d'écran proposent une liste de tous les liens de la page ; imagine cette liste :

Google se sert aussi du texte des liens pour comprendre de quoi parle la page de destination : « cliquez ici » ne lui apprend rien (chapitre 13).

Chemins relatifs et absolus

Quand tu écris href="agenda.html" ou src="images/facade.jpg", tu donnes un chemin : l'endroit où le navigateur doit chercher le fichier. Reprends l'arborescence du site :

mediatheque/
├── index.html
├── agenda.html
├── css/
│   └── style.css
├── images/
│   ├── facade.jpg
│   └── ateliers/
│       └── club-lecture.jpg
└── pages/
    └── mentions-legales.html

Un chemin relatif part du dossier de la page qui contient le lien :

Deux autres formes existent :

• le chemin absolu par rapport à la racine du site, qui commence par / : /images/facade.jpg marche depuis n'importe quelle page, mais seulement quand le site est servi par un serveur web à la racine d'un domaine (pas en file://, pas dans un sous-dossier comme sur GitHub Pages) ;
• l'URL absolue, avec le protocole et le domaine : https://www.mediatheque-tilleuls.fr/images/facade.jpg, obligatoire pour un lien vers un autre site.

Les images : img, alt, width et height

<img src="images/facade.jpg" alt="Façade vitrée de la médiathèque, entrée de plain-pied"
     width="1200" height="800">

Le texte de alt dépend du rôle de l'image, pas de son contenu :

Le choix du format pèse sur la vitesse de la page :

Une photo affichée sur 800 pixels de large n'a pas besoin d'être enregistrée en 4 000 pixels : redimensionne-la avant de la mettre en ligne. Le chapitre 10 montre comment servir automatiquement la bonne taille et le bon format à chaque écran avec srcset et <picture>.

figure et figcaption

Une image accompagnée d'une légende se place dans <figure>, la légende dans <figcaption> :

<figure>
  <img src="images/plan-rdc.svg" alt="Plan du rez-de-chaussée : accueil à l'entrée, espace jeunesse à gauche, postes informatiques au fond à droite">
  <figcaption>Plan du rez-de-chaussée</figcaption>
</figure>

<figure> ne sert pas qu'aux images : un extrait de code, un tableau ou une citation accompagnés d'une légende en sont aussi.

Audio, vidéo et contenus intégrés

HTML lit l'audio et la vidéo sans extension :

<video controls width="640" height="360" poster="images/atelier-apercu.jpg">
  <source src="videos/atelier.webm" type="video/webm">
  <source src="videos/atelier.mp4" type="video/mp4">
  <track kind="captions" src="videos/atelier.fr.vtt" srclang="fr" label="Français">
  <p>Ton navigateur ne lit pas cette vidéo : <a href="videos/atelier.mp4">télécharge-la</a>.</p>
</video>

• controls affiche les boutons lecture, volume, plein écran ; sans lui, l'utilisateur ne peut pas lancer la vidéo.
• Le navigateur prend la première <source> qu'il sait lire.
• <track kind="captions"> ajoute des sous-titres (fichier WebVTT) : indispensables pour les personnes sourdes et malentendantes, et pour ceux qui regardent sans le son.
• Évite autoplay : une vidéo qui démarre seule avec le son est une gêne pour tous et un obstacle pour qui utilise un lecteur d'écran.

Une vidéo YouTube ou une carte s'intègrent avec <iframe>, qui affiche une autre page dans la tienne. Donne-lui toujours un title qui décrit son contenu :

<iframe src="https://www.youtube-nocookie.com/embed/IDENTIFIANT"
        title="Visite virtuelle de la médiathèque" width="560" height="315"
        loading="lazy" allowfullscreen></iframe>

Les tableaux de données

Un tableau sert à présenter des données à deux dimensions : des lignes et des colonnes qui ont un sens. Jamais à faire de la mise en page : c'est le rôle de Flexbox et Grid (chapitre 9).

<table>
  <caption>Ateliers numériques de juin</caption>
  <thead>
    <tr>
      <th scope="col">Atelier</th>
      <th scope="col">Date</th>
      <th scope="col">Places</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Initiation à l'ordinateur</th>
      <td>3 juin</td>
      <td>8</td>
    </tr>
    <tr>
      <th scope="row">Démarches en ligne</th>
      <td>10 juin</td>
      <td>6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td></td>
      <td>14</td>
    </tr>
  </tfoot>
</table>

Grâce aux <th> et à scope, un lecteur d'écran annonce chaque cellule avec ses en-têtes : « Démarches en ligne, Places, 6 ». Sans eux, la personne entend une suite de valeurs sans savoir à quoi elles correspondent.

Fusionner des cellules : colspan et rowspan

colspan="n" étend une cellule sur n colonnes, rowspan="n" sur n lignes.

<table>
  <caption>Planning de la salle informatique</caption>
  <thead>
    <tr>
      <th scope="col">Horaire</th>
      <th scope="col">Mardi</th>
      <th scope="col">Mercredi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">10 h</th>
      <td rowspan="2">Initiation (2 h)</td>
      <td>Accès libre</td>
    </tr>
    <tr>
      <th scope="row">11 h</th>
      <td>Club code</td>
    </tr>
    <tr>
      <th scope="row">14 h</th>
      <td colspan="2">Fermé (réunion d'équipe)</td>
    </tr>
  </tbody>
</table>

La règle pour ne pas se tromper : chaque ligne doit totaliser le même nombre de colonnes. Ici, trois colonnes. La deuxième ligne de données n'a que deux cellules (11 h et Club code), parce que la colonne du mardi est déjà occupée par la cellule rowspan="2" de la ligne précédente. La troisième ligne compte 1 + 2 = 3 grâce au colspan="2".

Exercices

<table>
  <caption>Fréquentation 2026 (nombre de visiteurs)</caption>
  <colgroup></colgroup>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <td rowspan="2"></td>
      <th scope="colgroup" colspan="2">Début d'année</th>
    </tr>
    <tr>
      <th scope="col">Janvier</th>
      <th scope="col">Février</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Adultes</th>
      <td>1 240</td>
      <td>1 180</td>
    </tr>
    <tr>
      <th scope="row">Jeunes</th>
      <td>860</td>
      <td>905</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>2 100</td>
      <td>2 085</td>
    </tr>
  </tfoot>
</table>

<a href="programme.pdf">Cliquez ici</a> pour le programme.
<a href="https://www.bnf.fr" target="_blank">www.bnf.fr</a>
<a href="#">Ouvrir le menu</a>
<a href="C:\site\contact.html">Contact</a>

<a href="programme.pdf">Programme de juin (PDF, 240 Ko)</a>
<a href="https://www.bnf.fr" target="_blank" rel="noreferrer">Bibliothèque nationale de France (nouvel onglet)</a>
<button type="button" aria-expanded="false" aria-controls="menu">Ouvrir le menu</button>
<a href="contact.html">Contact</a>