如何正确关闭<img>标签？

Question

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

哪一个是正确的？

Answer 1

这个是有效的HTML5,没有关闭它绝对没问题.这是一个所谓的虚空元素:

<img src='stackoverflow.png'>

以下是有效的XHTML标记.他们必须关闭.后者在HTML 5中也很好:

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

Answer 2

<img src='stackoverflow.png' />

工作正常并正确关闭标签.最好为alt视障人士添加属性.

Answer 3

实际上，在 HTML5 中 只有第一个有效

<img src='stackoverflow.png'>  

只有最后两个在 XHTML 中有效

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

（虽然不是严格要求，但alt通常也应该包含一个属性）。

也就是说，您的 HTML5 页面可能会按预期显示，因为浏览器会将您的 html 重写或解释为它认为您的意思。例如，这可能意味着它将标签从
<div />变为<div></div>。或者它可能只是忽略了最后的斜线<img ... />。
请参阅 2016：将 HTML5 作为 XHTML 5.0 提供旧版验证。
请参阅：2011 年讨论和其他链接，但随着时间的推移，一些内容可能会发生变化

部分原因是浏览器非常努力地纠正错误。另外，因为自闭标签和无效标签存在很多混淆。最后，规范已经改变，或者并不总是清晰的，浏览器试图向后兼容。

因此，虽然您可能可以使用这三个选项中的任何一个，但
只有第一个选项符合 HTML5 标准，并且保证通过 HTML5 验证器。

一个合理的策略可能是：

• 编写不带结束斜杠的新代码。
• 重构代码时，当您遇到附近的图像标签时，请更新它们。
• 除非出现特殊需要，否则不必过度担心您不接触的遗留文件中的标签。

以下是HTML5 中不应关闭的标签列表：

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