This forum is now read-only. Please use our new forums at

151 points
Submitted by
almost 5 years ago

img tag-it doesn't need closing?

so I used this part of code:

<a href="">
<img src="" ></a>

and the correct one is also like this:

<a href=""> <img src="" /></a>

Notice there is now closing slash behind the picture URL.
Can someone explain this duality i.e. why the both parts will work normally?
And which method is better to use from now on?

14 votes


short answer:
It's optional, you may leave it. However, make sure you do it consistently, i.e. either close all of your img elements or leave them all "unclosed".

Long explanation:
As we're using HTML5, let's have a look at the documentation:

Start tags consist of the following parts, in exactly the following order:

  1. A "<" character.
  2. The element’s tag name.
  3. Optionally, one or more attributes, each of which must be preceded by one or more space characters.
  4. Optionally, one or more space characters.
  5. Optionally, a "/" character, which may be present only if the element is a void element.
  6. A ">" character.

Important is point 5, which says the slash / is optional, if the element is a void element. And img is a void element. A list containing the void elements can be found here.
So the slash is syntactic suggar for these, who are accustomed to XHTML, in which you had to close the element.
In my opinion it's better to close void elements, as I'm used to close these. ;-)

3108 points
Submitted by
almost 5 years ago


51feb0ecabf821650a002d38_216306839 Michal888 almost 5 years ago

Thanks for bothering, it's clear now!

5154c6cf115b457ac9000021_667301409 boring12345 almost 5 years ago

You are welcome! :-)

C0e72b4d26d78171089b3151a7a16eb6?s=140&d=retro owv900 almost 5 years ago

Why this explanation is not in the course?! It is stated that we have to do that, without explanation so It is a lie.

5154c6cf115b457ac9000021_667301409 boring12345 almost 5 years ago

I don't really know... Perhaps it could be confusing.

528ae8ec80ff33c203000939_687421740 KhalilDaCoder over 4 years ago

It's not a lie, but to explain it, would take some time! using the slash is best practice and to ensure that your code can be validated. Also, remember that we have gone from HTML 1, 2, 3, and 4, XHTML XHTML 1.0 Transitional, XHTML Strict and now HTML 5. Because of that some of the syntax has changed and some tags are deprecated. But some can still be used but shouldn't.

4130e30f65dc0202fc706a8accc129f7?s=140&d=retro Sticky Arrow about 4 years ago

boring12345 is right

80800ab51ccfb9142bd343b7f9346a38?s=140&d=retro 龙登余 almost 4 years ago


98d26496279556aae8240023419dffe9?s=140&d=retro Piotr Aleksander about 3 years ago

in given "results tab" giving a space before "/"-slash in makes a difference. Similiar returns "oops, try again".

5562bf1293767618c00004f3_39392218 Anjuna about 3 years ago

oh look it's the guy who uses a lot of smileys

7 votes


I posted this answer in a different forum, but thought it might be good to have it here here too...

<img> is what's called a "self-closing" tag.

There are a few tags in html that are self closing.

This means that you when you open the tag with <tag> you don't need a separate </tag> to close the element tag.

For self-closing tags you just use:

<img src ="blah blah blah" />
<img src ="blah blah blah" >

The second one should work just like the first.

In html and css especially, there are things you can get away with, but if it isn't the standardized way of doing things, it might not work in some browsers or in certain situations.

This isn't to say that <img> won't work, it just means that to be a good coder, it is good to get into the habit of following the standards and specifications, and being consistent when writing code.

Since most tags DO have a closing tag with a forward slash like <p></p>, it's a good habit to use /> instead of just > to denote the closing of a tag. Later on if you get into PHP, Javascript, etc, you can use things like regular expressions or pattern matching to parse on /> to detect the end of a self-closing tag. If you just use > to close a self-closing tag, you would have to do a bit more pattern matching so your script could determine whether > was the end of an opening tag or a the end of a self-closing tag. You would do this if your script was creating dynamic pages where it needed to manipulate html elements on the fly.

Sure you could just have the script look for <img and then look for the very next >, but that requires a little more work, and there are edge cases where it would just be easier to look for /> so you don't have as many cases or conditions to worry about. (Not that it's terribly difficult to code a script to do any of these things once you learn how. I'm just pointing out the usefulness of having the slash there in certain, although probably very few and limited, situations).

See the point? Best Practices are called Best Practices for a reason. It's really not that much more work to type a single / to close a self-closing tag that doesn't absolutely need to have it. But having it there won't hurt anything and can be useful as I said above.

1171 points
Submitted by
almost 5 years ago

4 votes


is an example of a singleton tag, you don't have to close it.

323 points
Submitted by
Nitin Vijayakumar
over 4 years ago

3 votes


I found the instructions in 10/13 to be a little confusing because the <!DOCTYPE html> is for HTML5 documents; however, 5 does not require the "/" for any void elements. It's contradicting to see this when it was a requirement of older versions, but not currently. If the course is going to teach a modern DOCTYPE, why not teach the reason "/" is no longer used? Every modern site I've seen to date does not use "/". That includes frameworks like Bootstrap and Foundation, and reliable resources like and I guess if it's optional it comes down to user preference, but like I said it did throw me off because every HTML5 website seems to leave it off. And to top it all off, do a view source on this page and you'll see that even Codecademy doesn't use it.

Just another opinion. :)

658 points
Submitted by
Burt Crismore
over 4 years ago

1 Comment

5154c6cf115b457ac9000021_667301409 boring12345 over 4 years ago

The source code of this page contains both: <meta ...s which are closed and metas, which are not closed. However, I think you should choose one method (either closing or not closing) and do it everywhere. I prefer closing, as it looks cleaner and as there are still many websites written in XHTML, in which not closing is an error.

2 votes


What confuses me is this: if you inspect Codecademy's code, you'll noticed that their developers do not use " /" in img tag. I just don't like that you cannot pass the challenge without slash.

196 points
Submitted by
Ana Gledović
about 3 years ago

2 votes


I was having the same problem. just leave space between the text and closing tag.

396 points
Submitted by
almost 3 years ago

-1 votes


Any teaching material should be consistent. If is not accepted, then shouldn't be accepted, too, according to XHTML standart.

990 points
Submitted by
almost 3 years ago

-3 votes


The optional slash is really an XML thing. In HTML void elements should not have a trailing forward slash.

More information can be found in the WHATWG docs. A good quick reference is the Google HTML and CSS Styleguide:

928 points
Submitted by
Andrew Ogryzek
about 3 years ago