Comment fermer correctement la balise <img> ?

Question

<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

Lequel ou lesquels d'entre eux sont corrects ?

Answer 1

Celui-ci est HTML5 valide et tout va bien sans le fermer. C'est ce qu'on appelle un élément vide :

<img src='stackoverflow.png'>

Les balises suivantes sont des balises XHTML valides. Elles doivent être fermées. La dernière balise est également valable en HTML 5 :

<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />

Answer 2

<img src='stackoverflow.png' />

Cela fonctionne bien et ferme la balise correctement. Le mieux est d'ajouter la balise alt attribut pour les personnes malvoyantes.

Answer 3

En fait, seul le premier est valide en HTML5

<img src='stackoverflow.png'>  

Seuls les deux derniers sont valides en XHTML.

<img src='stackoverflow.png'></img>  
<img src='stackoverflow.png' />

(Bien que cela ne soit pas strictement nécessaire, un alt doit _généralement_ aussi être inclus).

Cela dit, votre page HTML5 s'affichera probablement comme prévu, car les navigateurs réécriront ou interpréteront votre html en fonction de ce qu'ils pensent être votre intention. C'est mai signifie qu'il transforme une balise, par exemple, de
<div /> sur <div></div> . Ou peut-être qu'il ignore simplement le slash final sur <img ... /> .
voir 2016 : Servez HTML5 comme XHTML 5.0 pour la validation de l'héritage.
voir : discussion de 2011 et liens supplémentaires ici, bien qu'au fil du temps certains éléments aient pu changer

Cela s'explique en partie par le fait que les navigateurs s'efforcent de corriger les erreurs. C'est aussi parce qu'il y a beaucoup de confusion au sujet des balises auto-fermantes et des balises void. Enfin, la spécification a changé, ou n'a pas toujours été claire, et les navigateurs essaient d'être rétrocompatibles.

Donc, même si vous pouvez probablement vous en sortir avec n'importe laquelle de ces trois options,
seule la première adhère à la norme HTML5, et est garantie de passer un validateur HTML5.

Une bonne stratégie pourrait consister à :

• Écrivez un nouveau code sans la barre oblique de fermeture.
• Lors du remaniement du code, mettez à jour les balises d'image proches, au fur et à mesure que vous les rencontrez.
• Ne pas trop se préoccuper des balises dans les fichiers hérités que vous ne touchez pas, sauf en cas de besoin particulier.

Voici une liste de balises qui ne doivent pas être fermées en HTML5 :

 <br>    <hr>    <input>       
 <img>  <link>   <source>  
 <col>  <area>   <base>
 <meta> <embed>  <param>  
<track>  <wbr>   <keygen> (HTML 5.2 Draft removed)

Answer 4

Les deux sont la bonne réponse. HTML5 suit des règles strictes et en HTML5 nous pouvons fermer toutes les balises. Donc, cela dépend de vous d'utiliser HTML5 ou HTML et de suivre une réponse appropriée.

<img src='stackoverflow.png'>
<img src='stackoverflow.png' />

La deuxième propriété est plus appropriée.

Answer 5

La meilleure utilisation des balises que vous devriez utiliser :

<img src="" alt=""/>

Vous pouvez également l'utiliser en HTML5 :

<img src="" alt="">

Ces deux-là sont tout à fait valables en HTML5 Choisissez l'une d'entre elles et tenez-vous-en à celle-ci.