Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Video and Audio Media Basics The Video Element

Posted by Unsubscribed User
Unsubscribed User
15,444 Points

The video element is a 'normal element', therefore it should not be self closing.

In this video, Nick states that the video element can be self-closing. This isn't the case. The reason why the web browser renders the element is due to the fact it is adding the closing tag for you. This is not best practice.

Void vs Normal Elements

Void Element

<img src="/img/the_moon.jpg" alt="The moon in a Waning Gibbous Phase"/>

An example of a void element would be an img element as it has no content, it only has attributes (src, alt, title, width, height, etc.). As this is void, this element is self-closing.

Void elements can’t have any content (since there’s no end tag, no content can be put between the start tag and the end tag).
W3C Recommendation HTML 5.2:8.1.2

A complete list of void elements are: area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr

Normal Element

<video src="/video/the_moon.mp4" title="Animation of the Moon as it cycles through its phases" type="video/mp4">Your device does not support video playback.</video>

However, a video element accepts content as well as attributes. An example of such content would be a text message that displays if the browser is unable to render the video (e.g. Your device does not support video playback.), Therefore this is a normal element and requires a closing tag.

More info can be found on the W3C website.

Kind regards,
Berian

1 Answer

Unsubscribed User
Unsubscribed User
15,444 Points
Unsubscribed User
Unsubscribed User
15,444 Points

In the next video, Nick visits the MDN page for the <video> element - it even states there that an opening and closing tag are mandatory!!!

The same mistake is made for the <audio> element too. As with the <video> element, that requires both opening and closing tags.

Then later in the course, we add a <track> element in order to apply closed captions to the embedded video. This is a void element, so not having a closing tag there is absolutely correct as there is no content, only attributes available for the element.