Why are some tags self-closing but others are not?

Question

Why are some tags self-closing (img, br, etc.) whereas others are not?

Answer

The important distinction between self-closing tags and all other tags is that self-closing tags represent void elements. Void elements like img and br cannot contain any content. All other tags may (but are not required to) contain content.

30 Likes

What does the abbreviation ‘src’ stand for?

4 Likes

It stands for “Source”, as in the location in which the file is located. In this situation the local or web address in which the image is located.

17 Likes

img and br cannot contain any content,
we can see"A field of yellow sunflowers"in No.14, It’s content!

2 Likes

Content is defined I believe on the second slide of this section as “information between the opening and closing tag.” This does not include attributes (like alt) which are solely defined within the opening tag!

21 Likes

If we need to define a content in terms of it’s START - END then, besides the start point we have to declare also the end point.
e.g.

  1. We declare a title, then we have start & end point for it, <title> </title>
  2. We write a paragraph just for others to see, then we use <p> and close it with </p>
  3. We declare a specific piece of this text for e.g. to be in French. We then use<span> & close it as </span>
  4. We declare some words to be in bold or italics, again we have start & end of the text we want to format, so <strong> & </strong> <em> & </em>
  5. We group elements, again we need to declare which items are to be grouped together. So again, we have an open close case <div> </div>. Same when we create lists, ordered or unordered ones.

Whereas,

  1. We insert a line break in a specific point, so we say <br> once. A line break is going to be formatted, without any other need.
  2. We insert an image in a specific point, so we say <img> once. Again, there’s no need to close anything, as we say <br> and <img> are self-closing tags.
54 Likes

It makes sense, what is confusing is that we insert a video in a specific point, so we should say <video> once, but we have to close it instead. :frowning:

4 Likes

wow, it is easy standard for recognizing those two!

Every rule have it’s exceptions :slight_smile:

2 Likes

So when it says “self-closing tags represent void elements […] like img and br cannot contain any content”. I’m slightly confused because isn’t the alt attribute in the img element in a way, content? It’s just not seen on the screen? Because it can be heard, right?

Lastly, if that’s the case, I also just wanted to know how videos contain content, and how that differs from the alt attribute…

I hope I’m kind of making sense here. This question took some time to put into words.

1 Like

You’re confusing what ‘content’ means in HTML.
With any HTML tag the ‘content’ is what appears between the opening and closing tag:
<openingTag>content</closingTag>
For example:
<p>Some random text.</p>
<img> is called self closing because there is no closing tag with content in the middle.
In this example:
<img src="myHouse.gif" alt="My House">
src and alt are attributes that have values assigned, but neither is referred to as ‘content’.
Hope this helps!

29 Likes

why post is still going in flag!!!

Any content between the opening and closing <video> tags is fallback content . This content is displayed only by browsers that don’t support the <video> tag.

6 Likes

yeah, it’s a pretty good explanation, but the video thing or i may say exception has to have an explanation :confused:

1 Like

To add on to that the video tag can also take a few sources so that it can be compatible with many browsers/devices

Are they any other exceptions that need clearing up?

yes, in the HTML DOCUMENT STANDARDS when they were talking about making an image clickable.
the exercice was about, (transform the image on your page into a link by wrapping the image element with an anchor element.)

and that’s exactly what i did, but i forget about the closing anchor ( < /a > )
Capture

but it worked anyway, without the closing anchor, so i just want to know why.

thanks for your help btw.

cheers.

2 Likes

Hi Jaadani

Certain errors in HTML can run normally as the browser will render correctly (it corrects your code)

In the case of a hyperlink if you don’t close it then the rest of the elements until there’s an end point (could be another hyperlink) will also be wrapped in the hyperlink.

Hope this makes sense.

3 Likes

‘Video not supported’ says it all on the difference between image and video. It makes sense to me. Thasnks.

Why the “>” of the opening video tag is after “controls”?

image

I mean, for example for text we use the full opening tag, then the content and then the closing tag

So I do not really understand because even for video is not something like that.

Hope make sense what I am saying

1 Like

‘src’ stands for source or source location.