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

self closing tags are tags that don’t have a closing tag, it is void element and don’t need any closing tag, it is self defining and is itself enough to give an idea about the use of the element.
In self closing tags slash ‘/’ is optional in HTML5.
non closing tags list

VERY GOOD explanation with examples of only things that are covered till now. Thank you.

1 Like

" Void elements like img and br cannot contain any content."

What does ‘void’ mean?

Essentially, void means empty. It means that these elements can only have attributes and cannot have content between the opening and closing tags. (Note that both <br> and <img> are self-closing tags though.) For example, the <br> tag can’t have any content because it’s just a line break, and the <img> tag can only have attributes like src and alt, not any actual content.

1 Like

Thanks. This actually helped me understand it better!

An image, just as a video, could potentially fail to load for a number of reasons. Therefore, why can’t it have content with a closing tag to display text to be shown if that happened, just as with a video?

It can. By using the alt attribute:

<img src="/my_lovely_dog.png"/ alt="A Dutch Shepherd dog with a lovely face">

One of the reason the img element doesn’t have a closing tag is because it’s a replaced element, that is to say an element whose content is replaced by a source outside of the HTML document. Which means there is no content inside img and if there’s no content the closing tag is not needed.

1 Like

Thanks for the answer but I don’t get it. How do you mean it ? I mean a video too doesn’t contain anything

To answer your question as accurately as I can I’m going to bring up the topic of nodes. Don’t worry about them too much right now, you will cover nodes once you get to lessons on the Document Object Model (DOM). To be specific, a void element cannot have any child nodes. A child node could be either a nested element, or a text node.

Here is an example of a paragraph with a text node:

<p>This is a paragraph</p>

Here is an example of a video with a nested element:

<video controls width="250">
    <source src="/media/cc0-videos/flower.webm" type="video/webm">
</video>

So a video tag can have content in it, it is just nested elements in this case. You can have one, or many source tags inside a video tag. The source tags allow a browser to pick from a list of formats to find one that it best supports, allowing the developer to use technologies that might not be supported in all browsers, but to have fall-back formats that are.

An img tag can have neither text nodes, nor child elements, making it a void element.

1 Like

I understand your explanation but what if i don’t want to add any content to the video like"video not supported" do i still need to add the closing tag? if yes why? because without the content the video tag will only contain attributes which means it dosen’t need a closing tag.