HTML5 is defined in a way that it is backwards compatible with the way user agents handle deployed content…User agents…will always have to support…older elements and attributes and this is why the HTML5 specification clearly separates requirements for authors and user agents.
This means two things for your markup:
- If you code sensitively, it can still be rendered meaningfully in older browsers
- Just because it works, doesn’t mean it’s valid HTML5
Rendering in older browsers
HTML5 video provides a simple example:
<video width="640" height="360" controls> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video>
A browser HTML that implements HTML5 video will play one of the myvideo files. A browser that doesn’t implement it will ignore the tags and render the text content: “Your browser does not support HTML5 video.”
As an engineer, you’re able to write markup that renders even when specific tags do not.
This is especially useful in the current environment, with wide variability in implementation of HTML5 features between browsers (and browser versions).
The last part of that quote again:
…the HTML5 specification clearly separates requirements for authors and user agents.
HTML5 requires compliant user agents to support deprecated features, even when these features are not valid HTML5. This is largely to support older standards – HTML4 and XHTML. Unfortunately (or fortunately, depending on your point of view) it means you can get away with non-compliant code.
What does <acronym title="AMARA Means A Recursive Acronym">AMARA</acronym> mean?
acronym is not a valid HTML5 element, but browsers will still render it.
HTML5 error handling
This backwards compatibility is related to HTML5’s approach to error handling:
HTML5 also defines detailed parsing rules (including “error handling”) for this syntax which are largely compatible with HTML4-era implementations.
Errors here means ill-formed HTML – mostly old HTML4 constructs but partly also coding errors, eg the classic example of non-nested tags:
<b>bold <i>and italic </b>end bold </i>what does this non-nested closing tag mean?
The intention is that even ill-formed HTML should render similarly in different browsers.
Your mileage may vary as to whether this is a good thing.