Titres, listes, liens et images

Une page web, c’est avant tout du contenu : des titres qui structurent, des listes qui organisent, des liens qui relient et des images qui illustrent. Dans cette leçon, vous maîtrisez ces quatre piliers et vous commencez à donner du corps à la page de Camille. Vous comprendrez aussi pourquoi un « chemin » mal écrit est la cause numéro un des images invisibles.

Hiérarchiser avec les titres

HTML propose six niveaux de titres, de <h1> (le plus important) à <h6>. Pensez au plan d’un livre : un seul h1 pour le titre du livre, des h2 pour les chapitres, des h3 pour les sous-chapitres. Cette hiérarchie n’est pas cosmétique : les lecteurs d’écran proposent à leurs utilisateurs de naviguer de titre en titre, comme on feuillette une table des matières, et les moteurs de recherche s’en servent pour comprendre votre page.

<h1>Camille Morel, photographe</h1>
<h2>Mes projets</h2>
<h3>Les Alpes en hiver</h3>
<h3>Portraits d’artisans</h3>
<h2>Me contacter</h2>

Deux règles à respecter : ne sautez pas de niveau (pas de h4 directement sous un h2) et ne choisissez jamais un titre pour sa taille d’affichage. Si vous trouvez un h2 trop grand, réduisez-le en CSS ; ne le remplacez pas par un h4.

Paragraphes et mise en valeur du texte

Le paragraphe <p> est l’élément de base du texte. En plus de strong et em, quelques éléments utiles :

• <blockquote> pour une citation longue, avec éventuellement un <cite> pour la source ;
• <q> pour une courte citation insérée dans une phrase ;
• <abbr title="…"> pour une abréviation dont on précise la signification ;
• <mark> pour surligner un passage pertinent dans son contexte ;
• <sub> et <sup> pour les indices et les exposants ;
• <hr> pour un changement de thème dans le contenu.

Les listes

Une liste non ordonnée (ul) affiche des puces ; une liste ordonnée (ol) numérote des étapes dont l’ordre compte. Chaque entrée est un li. Une liste peut en contenir une autre : l’élément imbriqué se place à l’intérieur du li parent.

<h3>Matériel de la séance</h3>
<ul>
  <li>Boîtier et deux objectifs</li>
  <li>Accessoires
    <ul>
      <li>Trépied</li>
      <li>Réflecteur</li>
    </ul>
  </li>
</ul>

<h3>Déroulé</h3>
<ol>
  <li>Repérage du lieu</li>
  <li>Prises de vue</li>
  <li>Sélection et retouches</li>
</ol>

Il existe aussi la liste de description (dl), qui associe des termes (dt) à leurs définitions (dd) : pratique pour un glossaire ou une fiche technique. Plus tard, vous utiliserez les listes pour construire les menus de navigation : un menu n’est rien d’autre qu’une liste de liens.

Les liens

Le lien, ou hyperlien, est l’invention qui a donné son nom au « web » : une toile de pages reliées. On l’écrit avec l’élément a et son attribut href, qui contient la destination.

<a href="https://developer.mozilla.org/fr/">Documentation MDN</a>
<a href="contact.html">Page de contact</a>
<a href="#contact">Aller au contact</a>
<a href="mailto:camille@exemple.org">Écrire un e-mail</a>
<a href="tel:+33100000000">Appeler l’atelier</a>

Chaque ligne illustre un type de destination : une adresse complète vers un autre site, un fichier de votre propre site, une ancre vers un élément de la même page (celui qui porte id="contact"), une adresse e-mail et un numéro de téléphone.

Ouvrir dans un nouvel onglet : avec modération

L’attribut target="_blank" ouvre le lien dans un nouvel onglet. Utilisez-le avec parcimonie : il désoriente certains utilisateurs. Si vous l’employez, ajoutez rel="noopener" par précaution, et prévenez le visiteur dans l’intitulé du lien.

<a href="https://developer.mozilla.org/fr/" target="_blank" rel="noopener">MDN (nouvel onglet)</a>

Des intitulés qui ont du sens

Un lecteur d’écran peut lister tous les liens d’une page, hors contexte. « Cliquez ici » ou « En savoir plus » répétés dix fois ne veulent alors plus rien dire. Préférez « Découvrir le projet Alpes en hiver ». Un bon intitulé se comprend seul.

Chemins relatifs et chemins absolus

Pour désigner un fichier (une page, une image, une feuille de style), il faut écrire son chemin. Il en existe deux familles.

• Un chemin absolu contient l’adresse complète : https://www.exemple.org/images/portrait.jpg. Il sert pour pointer vers un autre site.
• Un chemin relatif part de l’emplacement du fichier qui contient le lien. C’est ce que vous utiliserez pour tout ce qui appartient à votre propre site.

Voici la structure du site de Camille :

camille-morel/
├── index.html
├── contact.html
├── css/
│   └── style.css
└── images/
    ├── portrait.jpg
    └── projets/
        └── alpes.jpg

Depuis index.html, les chemins s’écrivent ainsi :

• contact.html : un fichier situé dans le même dossier ;
• images/portrait.jpg : on entre dans le dossier images ;
• images/projets/alpes.jpg : on descend de deux niveaux.

Depuis css/style.css, pour atteindre une image, il faut d’abord remonter d’un dossier avec ../ : ../images/portrait.jpg. Retenez ce petit signe, vous l’utiliserez au chapitre 3.

Les images

L’élément vide img insère une image. Deux attributs sont indispensables : src (le chemin du fichier) et alt (une description textuelle). Ajouter width et height réserve la place de l’image pendant le chargement, ce qui évite que la page « saute » lorsqu’elle apparaît.

<img src="images/projets/alpes.jpg" alt="Sommets enneigés au lever du soleil, vus depuis un col" width="800" height="533">

Rédiger un bon texte alternatif

Le texte alternatif est lu par les lecteurs d’écran, affiché si l’image ne se charge pas et utilisé par les moteurs de recherche. Décrivez ce qui compte dans le contexte : une photo de portrait sur une page de présentation peut simplement avoir pour alt « Camille Morel, sourire, appareil photo en main ». Si l’image est purement décorative, écrivez alt="" (valeur vide, mais présente) : les lecteurs d’écran l’ignoreront. Évitez les formules comme « image de » ou « photo de » : l’utilisateur sait déjà qu’il s’agit d’une image.

Choisir le bon format

Adaptez aussi les dimensions de vos fichiers : inutile d’insérer une photo de 6 000 pixels de large pour l’afficher dans une carte de 400 pixels. Nous y reviendrons au chapitre 5, consacré à la performance.

Légender une image avec figure

Quand une image s’accompagne d’une légende, regroupez-les dans un élément figure :

<figure>
  <img src="images/projets/alpes.jpg" alt="Sommets enneigés au lever du soleil" width="800" height="533">
  <figcaption>Lever de soleil au col, janvier.</figcaption>
</figure>

À vous de jouer

Enrichissez index.html :

1. créez une structure de titres : un h1, deux h2 (« Mes projets » et « Me contacter ») et deux h3 sous « Mes projets » ;
2. ajoutez une liste ordonnée décrivant les étapes d’une séance photo ;
3. ajoutez trois liens : un vers un autre site (nouvel onglet avec rel), un vers contact.html, un d’ancre vers « Me contacter » ;
4. insérez deux images avec alt pertinent, dont une dans un figure avec légende. Vous pouvez utiliser n’importe quelles images dont vous avez les droits.

<h1>Camille Morel, photographe</h1>
<h2>Mes projets</h2>
<h3>Les Alpes en hiver</h3>
<figure>
  <img src="images/projets/alpes.jpg" alt="Sommets enneigés au lever du soleil" width="800" height="533">
  <figcaption>Lever de soleil au col.</figcaption>
</figure>
<h3>Portraits d’artisans</h3>
<img src="images/projets/boulanger.jpg" alt="Un boulanger sort des pains du four" width="800" height="533">
<ol>
  <li>Échange préalable</li>
  <li>Prises de vue</li>
  <li>Livraison des photos</li>
</ol>
<p><a href="contact.html">Voir la page de contact</a> ou <a href="#contact">aller à la section contact</a>.</p>
<h2 id="contact">Me contacter</h2>

À la leçon suivante, vous allez présenter des données en tableau et intégrer de l’audio, de la vidéo et d’autres contenus.