HTML and CSS Reference
In-Depth Information
ADDING CROSS-BROWSER SUPPORT FOR
HTML5 SEMANTIC ELEMENTS
Now you need to add some little helpers to be able to style unknown elements. Why?
Because older browsers do not support the HTML5 semantic elements discussed
later in the “Exploring HTML5 Elements” section.
This problem will diminish as time goes on, but for now you can add in sup-
port without too much trouble. To do this, you need to think about how browsers
handle unknown elements.
By default, an unknown element is treated as an anonymous inline element.
This includes all HTML5 elements that a browser doesn't recognize—for example,
<section>
and
<footer>
. You could even stick
<banana>
and
<porcupine>
elements
in your page if you had a reason to do so.
The trouble is that the new HTML5 elements you'll be using are block-level
elements. They are mostly more semantic containers to replace the slew of
<div>
s
you've traditionally used to contain different parts of your pages. Therefore, you
need to force nonsupporting browsers to treat them how you want. To do so, add
the following inside your
<head>
element:
<style>
article, aside, audio, canvas, datalist, details, figcaption,
p
figure, footer, header, hgroup, menu, nav, section, video {
: ;
}
</style>
NOTE:
Because the HTML5 spec is still not complete, it may change
to include or remove various elements; therefore, the HTML5
element fix may well need to be updated to remove elements or
include additional ones in the future.
