How to close <img> tag properly?
<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
Which one(s) of them is correct?
This one is valid HTML5 and it is absolutely fine without closing it. It is a so-called void element:
<img src='stackoverflow.png'>
The following are valid XHTML tags. They have to be closed. The later one is also fine in HTML 5:
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
<img src='stackoverflow.png' />
Works fine and closes the tag properly. Best to add the alt
attribute for people that are visually impaired.
Actually, only the first one is valid in HTML5
<img src='stackoverflow.png'>
Only the last two are valid in XHTML
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
(Though not stricly required, an alt
attribute _usually_ should also be included).
That said, your HTML5 page will probably display as intended because browsers will rewrite or interpret your html to what it thinks you meant. That may mean it turns a tag, for example, from<div />
into <div></div>
. Or maybe it just ignores the final slash on <img ... />
.
see 2016: Serve HTML5 as XHTML 5.0 for legacy validation.
see: 2011 discussion and additional links here, though over time some bits may have changed
Partly this is because browsers try very hard to error correct. Also, because there has much confusion about self-closing tags, and void tags. Finally, The spec has changed, or hasn't always been clear, and browsers try to be backwards compatible.
So, while you can probably get away with any of the three options,
only the first adheres to the HTML5 standard, and is guaranteed to pass a HTML5 validator.
A sound strategy might be to:
- Write new code without the closing slash.
- When re-factoring code, update nearby image tags, as you run across them.
- Not overly worry about tags in legacy files that you do not touch, unless a particular need arises.
Here is a list of tags that should not be closed in HTML5:
<br> <hr> <input>
<img> <link> <source>
<col> <area> <base>
<meta> <embed> <param>
<track> <wbr> <keygen> (HTML 5.2 Draft removed)
Both the right answer. HTML5 follows strict rules and in HTML5 we can close all the tags. So, it depends on you to use HTML5 or HTML and follow an appropriate answer.
<img src='stackoverflow.png'>
<img src='stackoverflow.png' />
The second property is more appropriate.