I was having a chat with htmlboy about why some elements aren’t self-closing in HTML5, specifically
One of the reasons is that by requiring a closing tag means you can delimit where fallback content begins and ends. It’s easy to see that in action:
<video src=nude-bruce.webm> <p>Your browser doesn't support HTML5 video. Lucky you.</p> </video> <p>Millions panic when the above video caused retina failure.</p>
Everyone sees the line “Millions..” because it’s outside the starting and ending tags. The stuff between the tags is the fallback content.
<canvas> element didn’t have an end tag when Apple dreamed it up, but Mozilla and Opera implemented a closing tag for exactly the same reason, and it got standardised with a closing tag.
Another model that could have been followed is having some kind of
alt attribute on a self-closing element, much like
<img> now, for example
<video src=nude-bruce.webm alt="Your browser doesn't support HTML5 video. Lucky you." />.
The trouble with this is that attributes don’t contain markup, and we want to have download links in the fallback content:
<video src=kitten.webm> <p><a href=kitten.webm>Download a kitten video</a>.</p> </video>
Another problem with alt attributes is that generally authors have no control over the way they are presented – that’s up to the browser and beyond the control of CSS.
Interestingly (if you’re a weird geek like I am) the much-maligned XHTML2 understood this problem and changed good ol’
<img> so that it was no-longer a self-closing element, thus allowing fallback content between the tags just as I describe above:
In the following example, the W3C logo would be presented if it were available. If it were unavailable, then the enclosed text would be presented.
So when HTML5 decided to adopt this idea from XHTML2 for
<canvas>, why didn’t they change the content model for
Because of backwards compatibility. All existing browsers that I can find show the image and the fallback content. Neither do they allow me to change the colour of the fallback content in CSS (Try it out).
But the canvas and multimedia elements are new and have no backwards-compatibility to break, so they get the content model that allows for better fallback content.