HTML5 雛形
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 雛形</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>
</body>
</html>
これを雛形とします。
【解説】
html5shiv
html5shiv は、HTML5 非対応の IE でも HTML5 の要素を使ったデザインをサポートする JavaScript ライブラリです。これで「IEが非対応だから…」という言い訳をしなくてもよくなります。
html5shiv
新要素のディフォルトの CSS
ブラウザが HTML5 の新要素を認識しているとは限りません。これは IE に限ったことでもありません。よって新要素のデフォルトの CSS スタイルを記述しておきます。
リセットスタイルシート for HTML5
リセットスタイルシートを適用する理由は、ブラウザごとに異なるディフォルトの CSS を初期化することにあります。
HTML4 では、Yahoo! User Interface Library の reset.css を採用していましたが、HTML5 の場合は、Eric Meyers CSS reset などが良さそうです。
※strong タグなども初期化されるので中身を一度確認しておきましょう。必要であれば改造してもいいと思います。
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
このリセットスタイルシートを使うなら、HTML5 雛形の head 内に記述した、新要素のデフォルトの CSS スタイルは不要になります。
CSS3やHTML5の対応状況を判別JavaScriptライブラリ「Modernizr」
現在のところ、HTML5 や CSS3 のブラウザごとの対応状況はさまざまです。
新しい要素やプロパティ、API を積極的に使いたいなら、以前紹介した JavaScript ライブラリ「Modernizr」を導入するといいと思います。
CSS3やHTML5の対応状況を判別するクロスブラウザJavaScriptライブラリ「Modernizr」
ちゃちゃっと HTML4 から HTML5 に書き直す
HTML4 では、ヘッダー、フッター、サイドバー、コンテンツなど、それぞれ役割が違う領域であろうとも div を使って表現するしかありませんでした。
たとえ、div id=”header”、div id=”footer” などと、それらしい id 名を付けたところで、すべて同じ div でしかなく、それぞれの役割や領域を表現することはできませんでした。
HTML5 では、これらの領域を区別するために新要素が導入されています。（header, nav, aside, footer, など）
さきほどの HTML4 の構造を HTML5 に書き直してみます。
簡単ですよね？
WordPress テーマ を HTML4 から HTML5 に書き直す
前項までの内容でもう十分だと思いますがw、念のため WordPress ループの部分だけサンプルを記載しておきます。
<div id="content"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <div <?php post_class(); ?> id="post-<?php the_ID(); ?>"> <?php the_content(); ?> </div> <?php endwhile; ?> <?php endif; ?> </div>
↓
<section id="content"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2> <article <?php post_class(); ?> id="post-<?php the_ID(); ?>"> <?php the_content(); ?> </article> <?php endwhile; ?> <?php endif; ?> </section>
補足 – 廃止された要素
HTML5 で廃止された要素
basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir
「これらはもう使わないんだ！」と心に決めましょう。
他の要素に置き換えるか CSS を使いましょう。
HTML5 と CSS3 について、なんとなく分かったら、是非一度 W3C の公式文書を一読してみてください。
より深〜く理解することができます。
参考: HTML5.JP