La structure HTML des images, figures et autres illustrations

Complément indispensable de certains contenus, le images vont pouvoir illustrer les propos de nos pages. Cependant, il est important de séparer les images purement décoratives, des images directes de contenu. Les premières pourront être relayées par l’affichage CSS, alors que pour les secondes on utilisera un balisage HTML approprié.

Prenons un exemple : dans la rubrique « Où Sommes nous ? », la page propose un plan de situation. Il s’agit là d’un contenu, au même titre qu’un texte de présentation, ou qu’une information de localisation GPS. De même, imaginons un site de vente de vins, où chaque rubrique orne la page de grappes de raisins, ou de bouteilles millésimées. Dans chaque cas, nous pourrons dégager le contenu, et relayer cette tâche à un affichage CSS.

Parfois, on peut se retrouver devant des situations complexes à trancher, par exemple le logo de l’entreprise, doit-il être présent dans le contenu ou relayer au CSS ? En fait, posons nous alors la question différemment, que représente le logo ? L’entreprise.

Donc, si on utilise une balise de tête pour présenter le nom de l’entreprise, nous pouvons tout aussi bien afficher le logo depuis une CSS, sans affecter quoique ce soit au niveau information, référencement, accessibilité, datas… de plus, en usant de cette logique, le logo peut très bien être en qualité optimale pour les présentations sur écran, optimisé pour les diffusions sur appareils mobiles, et adapté en niveau de gris pour l’impression.

Focalisons nous sur les images de contenus, donc, ayant recourt à l’insertion d’une balise <img> dans le contenu HTML. Quatre formats d’images sont accessibles, jpg, gif (y compris gif animé, qui possède néanmoins la même extension), png et svg. Bien qu’incomplet, voir l’article L’image numérique.

<img src="image.jpg" />

Comme toutes les balises, la balise <img> possède son propre lot d’attributs. Faisons le tour des principaux :

• src, cet attribut permet simplement de définir la source de l’image. Ici encore, comme pour les liens, nous pouvons opter soit pour le chemin relatif, soit pour le chemin absolu.
• alt, est un attribut ‘obligatoire’ qui permet de définir l’image dans le cas où celle-ci n’est pas affichée. Le plus important reste la restitution sur des lecteurs d’écrans ou des personnes mal, ou non voyantes peuvent toujours accéder à la nature descriptive de l’image.
• title, apporte un complément d’information à l’attribut alt. La plupart des navigateurs affiche cette information sous la forme d’une info-bulle. Par contre, faites attention à n’apporter ainsi que de l’information complémentaire et non essentielle.
• longdesc, cet attribut propose une alternative sous forme de lien, vers une source d’informations plus claires à la représentation de données usuellement représentées par des graphiques. Bien que ce lien puisse paraître invisible lors d’une navigation par navigateurs, les lecteurs d’écran savent informer les utilisateurs de sa présence.
• width, height, permettent d’annoncer largeur et hauteur de l’image. Attention, si vous travaillez en mode responsive, ces attributs doivent être omis afin de permettre aux feuilles de styles CSS de prendre le relais.

Depuis HTML 5, il existe une nouvelle paire de balises qui permet à la fois de préciser la nature des images de contenus, et à la fois de les isoler en tant que telles au sein du document. Ces deux balises sont, <figure> et <figcaption>. La première regroupe une ou plusieurs image(s) et la seconde permet d’apposer une description. L’intérêt, contrairement aux attributs alt, longdesc ou title, vient du fait que cette fois-ci la description se fait au sein même de la page et devient donc visible de l’extérieur.

<figure>
	<img src="image1.jpg" alt="texte 1" title="titre 1"/>
	<img src="image2.jpg" alt="texte 2" title="titre 2"/>
	<img src="image3.jpg" alt="texte 3" title="titre 3"/>
   <figcaption>Présentation des derniers travaux</figcaption>
	<p>Texte de complément d'information</p>
</figure>