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

HTML Basics Forum

View Course

151 points
51feb0ecabf821650a002d38_216306839
Submitted by
Michal888
almost 4 years ago

img tag-it doesn't need closing?

Hi,
so I used this part of code:

<a href="http://www.autoblog.com">
<img src="http://31.media.tumblr.com/4f5afd4f36b011fd53a043831329c0b4/tumblr_mk7d7tQupN1qzdza2o1_500.jpg" ></a>

and the correct one is also like this:

<a href="http://www.autoblog.com"> <img src="http://31.media.tumblr.com/4f5afd4f36b011fd53a043831329c0b4/tumblr_mk7d7tQupN1qzdza2o1_500.jpg" /></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?
Thanks!


14 votes

permalink

Hello,
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
5154c6cf115b457ac9000021_667301409
Submitted by
boring12345
almost 4 years ago

9 Comments

51feb0ecabf821650a002d38_216306839 Michal888 almost 4 years ago

Thanks for bothering, it's clear now!

5154c6cf115b457ac9000021_667301409 boring12345 almost 4 years ago

You are welcome! :-)

C0e72b4d26d78171089b3151a7a16eb6?s=140&d=retro owv900 over 3 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 over 3 years ago

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

528ae8ec80ff33c203000939_687421740 KhalilDaCoder over 3 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 3 years ago

boring12345 is right

80800ab51ccfb9142bd343b7f9346a38?s=140&d=retro 龙登余 over 2 years ago

HTML BASICS 11

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

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

5562bf1293767618c00004f3_39392218 Anjuna almost 2 years ago

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


7 votes

permalink

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" />
or
<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
5251c01cf10c60748700d891_678478070
Submitted by
Mark
over 3 years ago


4 votes

permalink

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

323 points
52c86025282ae3da55002ba3_878146203
Submitted by
Nitin Vijayakumar
over 3 years ago


3 votes

permalink

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 WebPlatform.org and WHATWG.org. 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
74f27bc6891367f8144de8866fa314c3?s=140&d=retro
Submitted by
Burt Crismore
over 3 years ago

1 Comment

5154c6cf115b457ac9000021_667301409 boring12345 over 3 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

permalink

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
Picture
Submitted by
Ana Gledović
about 2 years ago


2 votes

permalink

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

396 points
1b4b4e42bc93d9e4d454ba681a759cd3?s=140&d=retro
Submitted by
imafzal
almost 2 years ago


-1 votes

permalink

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

990 points
C176dbfae96c30361f91324c512b4777?s=140&d=retro
Submitted by
Tirinir
almost 2 years ago


-3 votes

permalink

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: https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

919 points
4fd2a8029064390003004d38_61426818
Submitted by
Andrew Ogryzek
about 2 years ago