Comment fermer correctement la balise <img>?

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

Lequel (s) d'entre eux est correct?

<img src='stackoverflow.png' />

Fonctionne bien et ferme correctement la balise. Il est préférable d'ajouter l' altattribut pour les personnes malvoyantes.

Celui-ci est du HTML5 valide et il est absolument parfait sans le fermer. C'est un élément dit vide:

<img src='stackoverflow.png'>

Les balises XHTML suivantes sont valides. Ils doivent être fermés. Le dernier est également très bien en HTML 5:

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

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 obligatoire, un altattribut «généralement» doit également être inclus).

Cela dit, votre page HTML5 s'affichera probablement comme prévu, car les navigateurs réécriront ou interpréteront votre code HTML selon ce qu'ils pensent que vous vouliez dire. Cela peut signifier qu'il transforme une balise, par exemple, de
<div />en <div></div>. Ou peut-être qu'il ignore simplement la barre oblique finale <img ... />.
voir 2016: Servez HTML5 comme XHTML 5.0 pour la validation héritée.
voir: discussion de 2011 et liens supplémentaires ici, bien qu'au fil du temps certains éléments aient pu changer

C'est en partie parce que les navigateurs essaient très fort de corriger les erreurs. Aussi, parce qu'il y a beaucoup de confusion sur les balises à fermeture automatique et les balises vides. Enfin, la spécification a changé, ou n'a pas toujours été claire, et les navigateurs essaient d'être rétrocompatibles.

Ainsi, même si vous pouvez probablement vous en tirer avec l'une des trois options,
seule la première respecte 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 de la refactorisation du code, mettez à jour les balises d'image à proximité, au fur et à mesure que vous les parcourez.
• Ne vous inquiétez pas trop des balises dans les fichiers hérités auxquels vous ne touchez pas, sauf si un besoin particulier se fait sentir.

Voici une liste de balises à ne pas fermer en HTML5 :

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

La meilleure utilisation des balises à utiliser:

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

Vous pouvez également utiliser en HTML5:

<img src="" alt="">

Ces deux sont totalement valides en HTML5 Choisissez l'un d'entre eux et tenez-vous-en à cela.

Les deux 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.

-La balise est vide et ne contient que l'attribut. -La balise n'a pas de balise «Closing».

Alors,

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

les deux sont également corrects en HTML5.

Il est utile d'avoir la balise de fermeture si vous essayez de la lire avec un analyseur XHTML. Peut-être un cas de pointe, mais je le fais tout le temps. Cela ne fait aucun mal de l'avoir, et signifie que je sais que nous pouvons utiliser un tableau de lecteurs XML qui ne s'effondreront pas lorsqu'ils atteindront une balise non fermée.

Si vous n'essayez jamais d'analyser le contenu, ignorez la fermeture.