2016年1月、ついに世界のWEBデザイナーが切望していたIE8のサポートが実質終了しました。
ようやく大手を降ってhtml5に移行できるよねということで、html5の基本タグを再確認しながらソースサンプルというかデモページを作りました。

HTMLの基本を見直す良いタイミングだったので、ついでにリセットCSSも見直すことに。
HTML5に対応していて、Normalize.css系の、「オールリセットじゃなくて、ブラウザ間の差をなくす」タイプのCSS、「sanitize.css」を使ってみたので合わせてまとめておきます。

HTML5のヘッダー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="html5の基本文法と、ベースレイアウトに良く使う基本タグについて説明しています。">
<meta name="copyright" content="&copy; atomicbox">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>html5要素の確認と、「sanitize.css」の初期状態についての確認</title>
<link rel="canonical" href="http://atomicbox.tank.jp/lab/html-sample/">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="css/sanitize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

HTML5では「!DOCTYPE」宣言とかメタタグの書き方がいくつか変更になっています。
styleやscriptも、typeの記載がなくてもデフォルト設定があるので省略できます。
jQueryも、IEに引きずられてver.1を使っていたりしましたが、ver.2を使っても大丈夫になりました。（既存のページをhtml5対応する場合は、jQueryのバージョンを変えると動かなくなる可能性があります。新規ページから順次ver.2にしたらOK）

今回sanitize.cssを使う前提になっているので読み込みタグも入っています。

HTML5のベースレイアウト・良く使う基本タグ

HTML5の対応といえば、上述の「!DOCTYPE」宣言と<head>タグの中身の対応と、あとはメインコンテンツを作るタグの変更になってきます。
HTML5で追加された、ベースレイアウトに関わる基本タグを見ていきたいと思います。

<header></header> ヘッダーのエリアを囲む。文書内で複数使用可。
<footer></footer> フッターのエリアを囲む。文書内で複数使用可。
<main></main> メインコンテンツのエリアを囲む。文書内で単一。
※ IE9〜11でインライン表示されるバグあり。sanitize.cssでブロック要素に直してくれるが注意。
<nav></nav> ナビゲーションのエリアを囲む。文書内で複数使用可。
<article></article> ひとつのブログ記事のように、単独で再配布・再利用できるまとまり。文書内で複数使用可。
<section></section> 章や論文のような、番号付きのセクションなどに利用する。文書内で複数使用可。
<aside></aside> 文とは内容がそれるような内容。文書内で複数使用可。

今まで各自<div>タグにIDやCLASSをつけて対応していたような構造を、タグで書けるようになりました。
<header>とか<footer>は直感的にわかるし置き換え簡単そうですね。（複数使用できるというのは意外。）

一個ずつみていきます。

<header>タグ

ヘッダーのエリアを囲みます。複数使用可能なので、<article>タグの中などに、入れ子にして「親articleに対するヘッダー」という括りとしても使えます。

<footer>タグ

フッターのエリアを囲みます。複数使用可能なので、<article>タグの中などに、入れ子にして「親articleに対するフッター」という括りとしても使えます。

<main>タグ

メインコンテンツ全体のエリアを囲みます。HTML文書内に一回しか登場できません。
IE9〜11でインライン表示されるバグあり。sanitize.cssでブロック要素に直してくれますが、念のため覚えておいた方がよさそうです。

<nav>タグ

ナビゲーションのエリアを囲みます。複数使用可能なので、<article>タグの中などに、入れ子にして「親articleに対するナビゲーション」という括りとしても使えます。
ナビゲーションを<ul>タグで作っているような場合が多いと思いますが、その外側を覆うのに使えます。

<article>タグ

ひとつのブログ記事のように、単独で再配布・再利用できるまとまりに使います。<section>との使い分けに迷うかもしれませんが、articleのなかにsectionを持っても大丈夫なので、「これはsectionだな」って思わない感じのやつはarticleでよさそう。

ブログの連載で、今回は第一章、次回（別ページ）は第2章とかっていう場合は紛らわしいけどarticleでしょう。
判断基準は「一つのHTML文書内」で章立てられているのかどうかだと思います。

<section>タグ

章や論文のような、番号付きのセクションなどを記述するときに使います。articleで色々書いたので略。

<aside>タグ

文とは内容がそれるような内容を記述する時に使います。ブログでいうサイドにある著者プロフィールとか、関連情報系に利用。

HTML5 + sanitize.cssを利用した、使い方サンプル

今までの情報を盛り込んだソースサンプルを作りました。
記事内ではふれませんでしたが「sanitize.css」の初期状態についても検証しています。
（ソースを眺めるよう、って感じなので読みにくいところもありますが。。。）

デモページ：html5要素の確認と、「sanitize.css」の初期状態についての確認

単純にhtml5にするだけならそんなに難しくないし、HTML5前提のプラグインも多いので早めに対応していきましょ〜。

おわり