HTML5 page structure without hassles

http://blog.mostof.it/html5-page-structure/

by ochronus • 15 years ago

15 5 15 years ago

blog.mostof.it

joegaudet• 15 years ago

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.

nathos• 15 years ago

you'll want to use something like Modernizr http://www.modernizr.com/ or html5shim/html5shiv to turn them into divs with JavaScript.

adamesque• 15 years ago

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.

thomasknowles• 15 years ago

I've always found:

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

A good resource too.

Staydecent• 15 years ago

This template is using the <section> element incorrectly, see: http://www.whatwg.org/specs/web-apps/current-work/multipage/...

"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."

HTML5 page structure without hassles

Related Stories