DEVENIR-WEBMASTER.COM Log In
 17
close

Utiliser les images sur une page Web en HTML5

Visiter ma chaine Youtube

# Figure et Figcaption close

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.

Stucture HTML5 figure et figcaption

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

# Les marges CSS par défaut close

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

Stucture HTML5 figure et figcaption

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.