Utiliser les images sur une page Web en HTML5

Pour placer une image sur votre page nous avons déjà vu qu'il fallait utiliser l'élément img avec deux attributs. Nous avons également vu que l'élément img était un élément embarqué dans la page, que le plus souvent cet élément est placé dans un paragraphe qui est un conteneur de type block.

Depuis HTML5 il est possible d'utiliser une autre structure qui a une sémantique dédiée à une image ou plus généralement à un média.

Figure et figcaption sont des éléments de type block. La légende peut être placée avant ou après la ou les photos voire plus généralement les médias. Exemple

Remarquez bien que des règles de style sont appliquées par défaut par les navigateurs ici vous avez un exemple avec Chrome

Sur les petits écrans essayez de faire en sorte que vos photos occupent toute la largeur de l'écran en procédant comme dans cet exemple

Réduisez la taille de la fenêtre pour aller vers un écran de la taille d'un smartphone et vous verrez que les marges par défaut gauche et droite ne sont pas négligeables.