4 ms·
HTML5 page structure without hassles
- joegaudet 16y agoForgive 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 16y agoyou'll want to use something like Modernizr http://www.modernizr.com/ http://www.modernizr.com/ or html5shim/html5shiv to turn them into divs with JavaScript.
- adamesque 16y agoHere's a fantastic explanation: http://diveintohtml5.org/semantics.html#unknown-elements 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 16y agoI've always found: http://playground.html5rocks.com/#semantic_markup http://playground.html5rocks.com/#semantic_markup A good resource too.
- Staydecent 16y agoThis template is using the <section> element incorrectly, see: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element 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."