Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML HTML Video and Audio Media Basics The Video Element

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

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.