img

Image : élément HTML

Si nous allons sur un site inter­net, et que nous accé­dons au code source de la page, nous nous aper­ce­vons que der­rière une page visuel­le­ment orga­ni­sée se trouve une struc­tu­ra­tion en lignes de codes. Ce code est écrit en lan­gage HTML.

libe

À gauche, une page du site inter­net du jour­nal Libe­ra­tion. À droite, un extrait du code HTML de cette page.

Le code HTML est consti­tué de carac­tères inclus entre des signes supé­rieurs et infé­rieurs : ils sont appelé élé­ments HTML. Les élé­ments sont la plu­part du temps consti­tués de 2 tags : un tag ouvrant et un tag fer­mant. Le tag fer­mant est pré­cédé d’un slash.

_BALISE-ELEMENT-P---web

À gauche, tag ouvrant de l’élément HTML p (pour les para­graphes). À droite, le tag fermant.

Après cette courte intro­duc­tion, nous com­men­ce­rons par nous inté­res­ser à l’élément img qui per­met d’afficher les image dans les pages HTML.

Élé­ment HTML <img />

img-element00L’élément <img /> seul indique sim­ple­ment au navi­ga­teur l’emplacement d’une image. Sans attri­buts, l’affichage de la page HTML ne mon­trera aucune image.

Attri­buts de l’éléments <img />

Les attri­buts apportent des infor­ma­tions com­plé­men­taires sur le contenu d’un élé­ment. Ils se situent dans le tag de l’élement
et sont consti­tués de 2 par­ties : un nom et une valeur.

L'élément img et ses attributs.

L’élément <img /> et ses attributs.

src

Cet attri­but indique au navi­ga­teur où trou­ver l’image. Sa valeur prend la forme d’une URL poin­tant sur votre ser­veur ou vers une URL sur internet

alt

Cet attri­but pré­cise la des­crip­tion de l’image. Cet attri­but est très utile pour les lec­teurs des défi­cients visuels.

title

L’attribut title indique le titre de l’image. Il appa­raît dans le navi­ga­teur dans une info-bulle quand l’internaute sur­vole l’image avec le cur­seur de sa souris.

Insé­rer une image dans une page : HTML et aperçu

Le code HTML de l'élément img et son aperçu dans un navigateur.

Le code HTML de l’élément <img /> et son aperçu dans un navigateur.

HTML5 : Image & responsive

0