Do I need a "/" at the end of an <img> or <br> tag, etc.?

Html

Html Problem Overview


Do you need to have a / at the end of an img tag? I saw an example on W3schools.com without a /:

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

I know it isn't necessary to self-close the tag, at least in my browser, but should I do so?

Html Solutions


Solution 1 - Html

The / is only required for XHTML & XML.

If you're using a HTML5 doctype, then there's no need to terminate self-closing tags in this way.

This applies to <img src="img.png" />, <br />, <hr /> etc.

I.e. Just use <img src="img.png">, <br> and <hr>.

If you need an empty element (like a div), don't use <div />, instead use <div></div>. This is important since in HTML5, the slash is ignored and <div /> is interpreted as <div> without a closing tag.

Solution 2 - Html

It's only required for XHTML standards, as mentioned in other answers. HOWEVER, it also has another use.

Some code editors such as Notepad++ allow you to expand/collapse tags to make for faster viewing. But if you just put <img>, how is it supposed to know the difference between a tag that doesn't require an end tag, and one that uses the same tag name but does (ie. in XML)? This is especially true if you use custom tags.

Therefore, using /> explicitly tells the editor that it's self-closing, allowing it to continue working just fine and not having it warn you about a mismatched tag.

Solution 3 - Html

Apart from the validity issue, which simply depends on the doctype you are validating against, the slash really matters only if your page is served with an XML content type, such as application/xhtml+xml (which is rarely used, because old versions of IE choke on it).

If you do that, then well-formedness error handling is Draconian: any error (such as a start tag without a matching end tag, which can be the start tag itself when the <img ... /> syntax is used) prevents the page from being displayed at all, and instead an error message is shown.

Solution 4 - Html

I think it would be better to close the img tag. Off the top of my head I can think of 2 reasons:

  1. It won't validate under xhtml, if you care about this sort of thing.

  2. Anything/anyone trying to programmatically work with it may get confused/run in to issues about unclosed tags. Who knows, this may include you in the future. :)

Solution 5 - Html

The code is acceptable in html without using / but it is required in XHTML. I prefer to put / on so that there is no problem migrating from HTML to XHTML

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMarJamRobView Question on Stackoverflow
Solution 1 - HtmlDanny BeckettView Answer on Stackoverflow
Solution 2 - HtmlNiet the Dark AbsolView Answer on Stackoverflow
Solution 3 - HtmlJukka K. KorpelaView Answer on Stackoverflow
Solution 4 - HtmlmitimView Answer on Stackoverflow
Solution 5 - HtmlSnippetView Answer on Stackoverflow