HTML5 layout

Despite the fact that the HTML5 standard is not officially approved, you can use it now. Most browsers already understand the new structural elements and to use it, just add a new doctype .



So, the new doctype looks great! You can memorize.

<! DOCTYPE html >

* This source code was highlighted with Source Code Highlighter .

HTML5 introduces some structural elements that many have probably heard about, but still briefly:

<section>

Element groups thematic blocks. section can be nested in each other.

<header>

It contains the title of any section, table, etc.

')

<footer>

Usually includes copyright or contact information.

<nav>

Defines a navigation area, usually a list of links.

<article>

Separate blog entry or article on the site.

<aside>

Secondary content, usually away from the mainstream.



In the latest versions of all modern browsers, except for everyone's favorite, Internet Explorer, these elements are supported by default. But with the help of a magic pendal a little javascript and he begins to understand.

< script >

document .createElement( 'header' );

document .createElement( 'nav' );

document .createElement( 'section' );

document .createElement( 'article' );

document .createElement( 'aside' );

document .createElement( 'footer' );

</ script >



* This source code was highlighted with Source Code Highlighter .

The same code can be downloaded from google:

< script src ="http://html5shiv.googlecode.com/svn/trunk/html5.js" ></ script >



* This source code was highlighted with Source Code Highlighter .

By default, in all browsers new elements will be inline, so you also need to add the following CSS:

header,

nav,

section,

article,

aside,

footer {

display: block

}



* This source code was highlighted with Source Code Highlighter .

Preparation is over, let's start:



Let's make a classic blog layout:



In the implementation on html5 it looks like this:

<! DOCTYPE html >

< html >

< head >

< meta charset = utf-8 >

< title > Simple HTML5 blog </ title >

<!--[if IE]>

<script>

document.createElement('header');

document.createElement('nav');

document.createElement('section');

document.createElement('article');

document.createElement('aside');

document.createElement('footer');

</script>

<![endif]-->

< style >

styles

</ style >

</ head >

< body >

< header >

blog header

</ header >

< nav >

navigation

</ nav >

< section >

< article >

< header >

Article header

</ header >

Article

</ article >

< article >

< header >

Article header

</ header >

Article

</ article >

</ section >

< aside >

sidebar content

</ aside >

< footer >

copyright

</ footer >

</ body >

</ html >



* This source code was highlighted with Source Code Highlighter .

Working example

PS: With validation everything is OK !

The standard validator already understands html5.