Tableaux, audio, vidéo, contenus intégrés et entités

Tout contenu n’est pas du texte ou de la photo. Camille veut présenter ses tarifs, publier un court film de présentation et intégrer une carte pour indiquer l’adresse de son atelier. Dans cette leçon, vous apprenez à écrire un tableau accessible, à insérer du son et de la vidéo, à intégrer un contenu externe avec précaution et à afficher correctement les caractères spéciaux.

Les tableaux : pour des données, pas pour la mise en page

Un tableau sert à présenter des données en lignes et en colonnes : des tarifs, un emploi du temps, un comparatif. Il ne doit jamais servir à disposer des blocs sur la page : pour cela, vous utiliserez CSS aux chapitres 3 et 4. Ce principe était courant dans les premiers temps du web ; il est aujourd’hui à proscrire.

Un tableau complet se construit avec plusieurs éléments :

• table : le tableau entier ;
• caption : sa légende, qui le décrit en une phrase ;
• thead, tbody, tfoot : l’en-tête, le corps et éventuellement le pied ;
• tr : une ligne ;
• th : une cellule d’en-tête ; td : une cellule de données.

<table>
  <caption>Tarifs des prestations photo</caption>
  <thead>
    <tr>
      <th scope="col">Prestation</th>
      <th scope="col">Durée</th>
      <th scope="col">Livrables</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Portrait</th>
      <td>1 heure</td>
      <td>10 photos retouchées</td>
    </tr>
    <tr>
      <th scope="row">Reportage d’événement</th>
      <td>Demi-journée</td>
      <td>Galerie en ligne</td>
    </tr>
  </tbody>
</table>

L’attribut scope précise si l’en-tête concerne une colonne (col) ou une ligne (row). Les lecteurs d’écran s’en servent pour annoncer, en parcourant une cellule, à quelle ligne et à quelle colonne elle se rattache. Sans en-têtes, un tableau devient une suite de valeurs incompréhensibles pour une personne aveugle.

Fusionner des cellules

Quand une cellule doit s’étendre sur plusieurs colonnes ou lignes, utilisez colspan ou rowspan :

<tr>
  <td colspan="3">Devis gratuit sur demande</td>
</tr>

Ces fusions compliquent la lecture assistée : gardez-les pour des cas où elles sont vraiment utiles, et restez sur des tableaux simples autant que possible.

L’audio et la vidéo

HTML sait lire du son et de la vidéo sans extension supplémentaire, grâce aux éléments audio et video.

<video controls width="640" poster="images/video-apercu.jpg">
  <source src="media/presentation.webm" type="video/webm">
  <source src="media/presentation.mp4" type="video/mp4">
  <track kind="captions" src="media/presentation.fr.vtt" srclang="fr" label="Français">
  Votre navigateur ne lit pas la vidéo. <a href="media/presentation.mp4">Téléchargez-la ici</a>.
</video>

<audio controls src="media/ambiance-forêt.mp3">
  Votre navigateur ne lit pas l’audio.
</audio>

Plusieurs attributs sont à connaître :

• controls affiche les boutons de lecture. Sans lui, le média est invisible ;
• poster définit l’image affichée avant le lancement de la vidéo ;
• preload (none, metadata ou auto) indique ce que le navigateur peut précharger ;
• loop et muted existent, mais n’abusez pas des médias qui se lancent seuls ;
• plusieurs éléments source permettent de proposer plusieurs formats : le navigateur prend le premier qu’il sait lire.

Le contenu placé entre les balises est un repli affiché si le navigateur ne gère pas l’élément.

Penser à l’accessibilité des médias

Une vidéo ou un son doit pouvoir être compris par tout le monde. Pour une personne sourde, il faut des sous-titres (ici via track, avec un fichier au format WebVTT). Pour une personne aveugle, une transcription textuelle à côté du média est précieuse. Et lancez toujours un média à la demande du visiteur : une vidéo qui démarre seule avec du son est une nuisance.

Intégrer un contenu externe avec iframe

L’élément iframe affiche une autre page web à l’intérieur de la vôtre : c’est ainsi qu’on intègre une carte, une vidéo hébergée ailleurs ou un document. Voici un exemple générique :

<iframe
  src="https://www.exemple.org/carte-atelier"
  title="Carte indiquant l’emplacement de l’atelier"
  width="600" height="400"
  loading="lazy">
</iframe>

L’attribut title est essentiel : il décrit le contenu aux lecteurs d’écran. loading="lazy" retarde le chargement tant que l’élément n’est pas près d’apparaître.

Quel contenu intégrer, et pourquoi ?

Avant d’ajouter un média ou un contenu externe, posez-vous trois questions simples. Apporte-t-il vraiment quelque chose à votre visiteur ? Est-il accessible à tous (sous-titres, description, alternative textuelle) ? Quel est son coût, en poids de page comme en confidentialité ? Un portfolio gagne davantage à présenter dix belles photos légères et bien décrites qu’à empiler des lecteurs vidéo et des cartes interactives qui ralentissent la page.

Cette sobriété est aussi bénéfique pour l’environnement et pour les visiteurs disposant d’une connexion lente : moins de ressources, c’est une page qui s’affiche plus vite pour tout le monde.

Les entités HTML : afficher les caractères réservés

Certains caractères ont un sens particulier en HTML, notamment les chevrons < et > qui ouvrent et ferment les balises, et l’esperluette & qui débute une entité. Pour les afficher comme texte, écrivez une entité : un code commençant par & et finissant par ;.

Avec un fichier en UTF-8 et la balise meta charset, vous pouvez saisir directement les lettres accentuées et la plupart des symboles (é, œ, €, ©) sans passer par des entités. Les entités restent indispensables pour <, > et &. C’est exactement ce que vous voyez dans les blocs de code de ce cours : pour montrer une balise sans qu’elle soit interprétée, on échappe ses chevrons.

Le code que vous affichez dans une page se place dans <pre><code>…</code></pre> : pre conserve les retours à la ligne et l’indentation, code indique qu’il s’agit de code.

À vous de jouer

Complétez le site de Camille :

1. ajoutez une section « Tarifs » avec un tableau comprenant une légende, trois colonnes (prestation, durée, prix), des en-têtes avec scope et trois lignes ;
2. ajoutez un élément audio ou video factice avec un texte de repli (le fichier peut ne pas exister : vous testez la structure) ;
3. écrivez la phrase « Photos & vidéos © Camille Morel » en utilisant les entités nécessaires.

<h2>Tarifs</h2>
<table>
  <caption>Tarifs indicatifs</caption>
  <thead>
    <tr><th scope="col">Prestation</th><th scope="col">Durée</th><th scope="col">Prix</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Portrait</th><td>1 heure</td><td>90 €</td></tr>
    <tr><th scope="row">Reportage</th><td>Demi-journée</td><td>sur devis</td></tr>
    <tr><th scope="row">Séance famille</th><td>1 h 30</td><td>120 €</td></tr>
  </tbody>
</table>

<audio controls src="media/ambiance.mp3">Votre navigateur ne lit pas l’audio.</audio>

<p>Photos &amp; vidéos &copy; Camille Morel</p>

Prochaine étape : structurer la page avec les balises sémantiques.