HTML5を使い始めるには?

HTML5をいつから使い始めるのか?モダンブラウザですべての要素がサポートされ、ユーザーがそのブラウザをメインで利用するのを待っていると恐らく5年~10年の時間はかかることが予測されます。
2011年段階でシェアが最大のブラウザはIE8ですが、IE6もまだ10%前後のシェアがあるため切るに切れない状態となっています。IE6のリリースは2001年なので実に10年前のブラウザということになります。
IE9はWindows Vista以上、IE10はWindows 7以上のプラットフォームである必要があるようなので、XP環境のユーザーの多くはIE8で止まってしまうことが推測されます。(IE8が第2のIE6になる)
IE8では、HTML5の新規要素をほとんどサポートしていないため、section要素やheader要素を利用することができません。

IE8以前のIEでheader要素を利用するためには?

[1] Javascriptで要素を新規に生成する
次のスクリプトを用意し、適当なJSファイルに保存します。
(function () {
	// HTML5の新要素を定義
	var els = [
		'section', 'article', 'hgroup', 'header',
		'footer', 'nav','aside', 'figure',
		'mark', 'time', 'ruby', 'rt', 'rp',
		'figcaption', 'video', 'audio', 'meter', 'progress',
		'canvas', 'details', 'summary', 'output'
	];
	for (var i=0; i<els.length; i++ ) {
		// 要素を作成
		document.createElement(els[i]);
	}
})();
[2] 条件分岐を指定
条件分岐により、IE8以下のブラウザにのみ上記JSファイルを外部読み込みさせます。
IE9からは、HTML5の主要な要素をサポートしているため、条件分岐から外しています
<!--[if lt IE 9]><script src="/ie.js"></script><![endif]-->
[3.1] CSSの指定1:HTML5向けCSSリセットを使う
HTML5の新要素向けの記述が追記されたCSSリセットを使います。 ・Eric Meyers CSS resethtml 5 doctor reset ・既存のものにやっつけでつくったオリジナルリセットです。(そのうち良いものにしたい・・・)
html,
body,
div,
span,
object,
iframe,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,
abbr,address,
cite,code,del,dfn,em,
img,
ins,kbd, q, samp,small, strong, sub, sup, var,b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,time, mark, audio, video {
	margin:0;
	padding:0;
}
// HTML5をサポートしていないブラウザ向けにブロック化
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display:block;
}
table{
	border-collapse:collapse;
	border-spacing:0;
	font-size:inherit;
	font:100%;
}
body{
	letter-spacing:0;
}
fieldset,
img{
	border:0;
}
img{
	vertical-align:middle;
}
address,
caption,cite,em,strong,b,i,th{
	font-style:normal;
	font-weight:normal;
}
li{
	list-style:none;
}
caption,
th{
	text-align:left;
}
a{
	outline:none;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:normal;
}
sup{
	vertical-align:text-top;
}
sub{
	vertical-align:text-bottom;
}
button{
	font-size:99%;
}
input,textarea,select{
	outline-offset:0;
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	*font-size:100%;
}
button,
select,
label{
	cursor:pointer;
}
textarea{
	resize:none;
	overflow:auto;
}
label > input{
	vertical-align:middle;
}
[3.2] CSSの指定2:特定要素にスタイルを指定
HTML5の新要素、未定義の要素などは、ブラウザではspan要素などと同じような振る舞いになるため(何もしないインライン要素)
本来の振る舞いに近くなるようにスタイルでdisplay:block;を指定します。
// HTML5の新要素をブロック要素化
article, aside, dialog, figure, footer, header,	hgroup, nav, section {
	display:block;
}
[4] 使ってみる!
あとは、今までのHTML4やXHTMLと同様にコーディングすることができると思います。
input要素などでサポートしていないtype属性の場合は、基本input[type=text]と同等になったり、
一部の機能が複雑な属性や要素はサポートしていないことが多いのでその場合は、今までと同様にJavascriptによる、補填が必要だったりしますが、
基本的な部分はHTML5の要素でコーディングできます。
[5] HTML5で作成したサイトの例:
html 5 doctor(en) - 英語のHTML5の解説サイト
html5.jp - HTML5の仕様書を日本語訳してくれているサイト。当サイト作成の際にすごく参考にさせてもらいました。
楽ラク!お買いモノ広場 - HTML5を利用して当方で作成したショッピングサイト(楽天市場API)
  html5をURLに含めたかったのでサイト名に苦心しました。