Tutoriel HTML5

HTML5

Découvez les bases et les nouveautés du HTML5 dans ce tutoriel.

HTML CSS Dreamweaver Bootstrap PHP

Images en HTML5

Dans ce tutoriel, nous allons voir quelles sont les nouveautés sur les images.

Nouveautés sur les images

En HTML5, nous mettrons désormais notre balise img entre des balises de paragraphe (p).

Nous ne mettons plus les attibuts width et height.

Exemple

Bootstrap
<p><img src="images/boostrap-logo.png" alt="Bootstrap" class="img-responsive"></p>

La balise <figure> et <figcaption>

La balise <figure> est en fait une unité de contenu, un encart pour isoler un bloc avec un contenu principalement constitué de un ou plusieurs éléments : multimédias, diagrammes, tableaux, illustrations, exemples, codes, images, vidéos, ou carrément du texte.

la balise <figcaption> permet d'afficher une légende ou une description du contenu de la figure.

Exemple

Bootstrap
Bootstrap Twitter
<figure>
<img src="images/boostrap-logo.png" alt="Bootstrap" class="img-responsive">
<figcaption>Bootstrap Twitter</figcaption>
</figure>

Quand mettre <p> ou <figure> ?

La balise figure a un rôle sémantique, si votre image apporte du sens à la page ou contribue à la bonne compréhension, vous utiliserez la balise <figure>.
Si votre image est uniquement présente pour décorer, vous utiliserez la balise <p>.