56

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
MarJamRob
  • 3,395
  • 7
  • 22
  • 31
  • @John - funny thing: http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#the-img-element uses the img tag without the closing / – Pat May 10 '13 at 21:25
  • You should probably never self close tags of any kind, as that is excessively tricky. – Code Whisperer Feb 05 '14 at 16:19

5 Answers5

84

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.

Community
  • 1
  • 1
Danny Beckett
  • 20,529
  • 24
  • 107
  • 134
  • 9
    For HTML5, you *may* end [void elements](http://w3c.github.io/html-reference/syntax.html#void-element) with a `/` or omit it. Both forms are valid. However, you *must not* use a closing tag such as `` for them. – David Harkness Jan 27 '15 at 22:40
12

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.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • 10
    Per this question, http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5, I wouldn't advise just slapping `/`'s all over a HTML5 doctype'd page, just for the sake of it: "In HTML 5, means . The slash is just syntactic sugar for people who are addicted to XML. The syntax is valid, but it is not a "self-closing tag". The distinction is important since (in the HTML syntax at least)
    means
    in HTML 5 and not
    as it does in XHTML."
     – Danny Beckett Mar 01 '13 at 03:09
5

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.

Danny Beckett
  • 20,529
  • 24
  • 107
  • 134
Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
3

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. :)

Matt
  • 74,352
  • 26
  • 153
  • 180
mitim
  • 3,169
  • 5
  • 21
  • 25
  • 2
    HTML is not XHTML, so I find #1 irrelevant. #2 might be an issue on non-HTML-aware editors, however. (Bigger issues with XHTML/HTML relate to empty tags and CDATA, so I just give up on these other ones: pick your battles) –  Mar 01 '13 at 03:01
  • I would not overplan to migrate to XHTML sometime in the future. If somebody is migrating they should be able to take care of this kind of thing... – irregularexpressions Mar 01 '13 at 03:56
  • heh a little bit amusing now: there is another question I am looking at on this site asking how to parse html using actionscript 3. And the open img tag (and apparently other tags too) is raising an issue. – mitim Mar 01 '13 at 10:08
3

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

Snippet
  • 1,522
  • 9
  • 31
  • 66
  • 3
    Per this question, http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5, I wouldn't advise just slapping /'s all over a HTML5 doctype'd page, just for the sake of it: "In HTML 5, means . The slash is just syntactic sugar for people who are addicted to XML. The syntax is valid, but it is not a "self-closing tag". The distinction is important since (in the HTML syntax at least)
    means
    in HTML 5 and not
    as it does in XHTML."
     – Danny Beckett Mar 21 '13 at 15:10