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

Which one(s) of them is correct?

2
  • I don't know which of the following answers is correct, but interestingly, Firefox's Code Inspector adds the </img> at the end of the tag if you don't put it there. And IE doesn't. This is significant in my universe.
    – Chiwda
    Jul 15, 2015 at 8:49
  • P.S. Dreamweaver inserts the /> XHTML tag.
    – Chiwda
    Jul 15, 2015 at 12:17

8 Answers 8

211

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' />
3
  • 6
    It is not only valid HTML5, but rather valid in HTML4 as well. HTML doesn't require self-closing "void" elements as you said. +1 for the coherent answer. Feb 13, 2013 at 20:24
  • 3
    The HTML5 or XHTML will fail to validate with the W3C's HTML checker if targeting 4.01 Transitional and higher. Also see W3C Markup Validation Service. You need to use the one <img src='stackoverflow.png'> (if it matters to you).
    – jww
    Oct 30, 2016 at 6:08
  • Commenting after many years... Got confused seeing the <img src="about:logo" alt="about:logo"> tag in firefox 76's about:logo page! Although document.body.innerHTML shows <img src=\"about:logo\" alt=\"about:logo\">... Very good answer...
    – 15 Volts
    Apr 21, 2020 at 11:53
68
<img src='stackoverflow.png' />

Works fine and closes the tag properly. Best to add the alt attribute for people that are visually impaired.

6
  • 8
    It is correct that <img /> is valid in [X]HTML/XML, though the use of XHTML is very rare nowadays and if your server is serving the pages as text/html all you have to worry about is writing valid HTML. The odds to have to migrate an HTML app to XHTML is close to nil. Feb 13, 2013 at 21:00
  • 2
    The answer above will fail to validate with the W3C's HTML checker if targeting 4.01 Transitional and higher. Also see W3C Markup Validation Service. I believe the answer above requires HTML5 or XHTML. To avoid validation failures, you need to use the one <img src='stackoverflow.png'> (if it matters to you).
    – jww
    Oct 30, 2016 at 6:13
  • 1
    @FabrícioMatté You severely underestimate xhtml in actual usage. The larger the company, the more likely they work with xhtml over html, or html5 formatted like xhtml (for easy/faster parsing), or you work with other things like microdata, or enhanced markup like ixbrl. Nov 18, 2019 at 21:40
  • There is a big difference between "works fine" and "specified" and you will never find any HTML specification calling out the use of the closing slash on that tag. As others mentioned, it is allowed as to not break web sites originally written to use XHTML/XML but nowhere will you find any wording or examples stating its usage is needed. In fact, you WILL find wording stating it has no meaning and browsers are instructed to ignore it!
    – Rob
    Nov 28, 2019 at 13:05
  • 1
    Rob - 6 years ago there was a problem. This did fix it. Guess now browsers are better
    – Ed Heal
    Nov 28, 2019 at 13:11
10

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)
8
  • 3
    This is technically incorrect. A self-closing void element is perfectly valid in html 5. See html.spec.whatwg.org/#start-tags which would make <img src='stackoverflow.png' /> valid in any version of XHTML and HTML 5. Nov 18, 2019 at 21:32
  • 1
    @RobertMcKee No, it is technically correct. While using the closing slash is allowed, and won't be flagged as an error, nowhere in any HTML specification will you see that it is specified as to be used. It is allowed as to not breaking older web sites which were based on XHTML/XML but nowhere will you ever find any HTML spec showing, by words or example, the use of a closing slash on those tags where they are specified by either the W3C or WHATWG.
    – Rob
    Nov 28, 2019 at 13:01
  • 3
    @Rob According to the WHATWG document I linked above in section 12.1.2.1.6 - Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing. img is a void element per section 12.1.2 Dec 1, 2019 at 4:06
  • 1
    @RobertMcKee Yes. That is (part of) the specification outlining the why the slash is allowed (for the reasons I gave in my previous comment). However, you should be looking at the actual specification for that element--img in this case--which clearly shows, by words and examples, that no closing slash is required or specified. In fact, without looking it up, further reading in that section will state that the closing slash has no meaning, does nothing and browsers are required to ignore it. So it is useless and pointless and brings us back to my original comment: the closing slash is not used.
    – Rob
    Dec 1, 2019 at 4:57
  • 10
    @Rob Yes, it is optional, but completely valid to do so. Which makes the statement Actually, only the first one is valid in HTML5 technically incorrect. The second one is valid in HTML5 as well. Not required, but valid. Noone is arguing that it is required. Only that per the specifications, using the self-closing form of the tag is valid in all current forms of XHTML and HTML. Dec 2, 2019 at 4:48
3

It's helpful to have the closing tag if you will ever try to read it with an XHTML parser. Might be an edge case but I do it all the time. It does no harm having it, and means I know we can use an array of XML readers which won't keel over when they hit an unclosed tag.

If you are never going to try to parse the content, then ignore the closing.

1

The best use of tags you should use:

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

Also you can use in HTML5:

<img src="" alt="">

These two are completely valid in HTML5 Pick one of them and stick with that.

2
  • The first is not the best in that it is not specified in any HTML standard while the second is. The first is allowed for historical reasons only! (Compatibility with XHTML/XML usage in older web sites that would break should browsers disallow it.)
    – Rob
    Nov 28, 2019 at 12:54
  • 2
    Not sure what Rob is trying to say here, but the html spec does specify that the first is valid. Dec 1, 2019 at 4:23
1

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.

1
  • 1
    Incorrect. The first is the only one specified in any HTML specification. The second is allowed for historical reasons only but, again, not specified as required anywhere.
    – Rob
    Nov 28, 2019 at 12:52
0

-The tag is Empty and it contains Attribute only. -The tag does not have 'Closing' tag.

So,

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

both are correct in HTML5 also.

1
  • The first is correct! The second is only allowed for historical reasons. (Compatibility with XHTML/XML usage in older web sites that would break should browsers disallow it.)
    – Rob
    Nov 28, 2019 at 12:55
0

Unfortunately the above solutions did not work in my case - maybe because a put the button inside a form-tag. This code ...

<input class="button" type="submit" value=" ">
    <img src="../assets/logo.png" alt="test" />
</input>

... always leads to error (with or without the closing slash of the img tag):

error  Parsing error: x-invalid-end-tag  vue/no-parsing-error

✖ 1 problem (1 error, 0 warnings)

A kind of workaround that did work was to define the image as background-image by means of css.

The html snippet describes the button only. The value attribute contains a single blank in order to suppress some browsers presenting unwanted default text.

<input class="button" type="submit" value=" " />

the CSS defines the button's background image:

.button {
  display: block;
  width: 6em;
  height: 6em;
  color: white;
  background-color: #639f59;
  padding: 0.4em 1.2em;
  box-shadow: inset 0 -0.6em 1em -0.35em rgba(5, 122, 11, 0.30),
    inset 0 0.6em 2em -0.3em rgba(255, 255, 255, 0.30),
    inset 0 0 0em 0.05em rgba(255, 255, 255, 0.30);
  cursor: pointer;
  background: url("../assets/logo.png") ;
  background-repeat: no-repeat;
  background-size: 6em;
  background-position: center;
  border: 0;
  border-radius: 3em;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.