

HTML5 page structure without hassles - ochronus
http://blog.mostof.it/html5-page-structure/

======
Staydecent
This template is using the <section> element incorrectly, see:
[http://www.whatwg.org/specs/web-apps/current-
work/multipage/...](http://www.whatwg.org/specs/web-apps/current-
work/multipage/sections.html#the-section-element)

"The section element is not a generic container element. When an element is
needed for styling purposes or as a convenience for scripting, authors are
encouraged to use the div element instead. A general rule is that the section
element is appropriate only if the element's contents would be listed
explicitly in the document's outline."

------
thomasknowles
I've always found:

<http://playground.html5rocks.com/#semantic_markup>

A good resource too.

------
joegaudet
Forgive my ignorance, could someone let me know how older non HTML 5 browsers
will treat <header> <article> etc?

Will they just lay them out as divs? If not this seems like a pretty serious
barrier to entry for HTML5.

~~~
adamesque
Here's a fantastic explanation:
<http://diveintohtml5.org/semantics.html#unknown-elements>

The TL;DR is that all browsers treat unknown elements as inline elements, so
for older browsers you'll need to explicitly define elements like header,
section, etc as display: block.

IE has an extra wrinkle, where it won't apply CSS styles to unknown elements.
The fix, which Modernizr applies, is to create dummy elements of each new type
in JavaScript _before_ they appear in the page.

Once that's done, IE happily applies styling to the new elements.

