目次
HTML5とは
HTML5は2014年10月28日にW3Cから正式勧告されたXHTML1.0に続く新しいHTMLの仕様です。主に新しい要素と属性の追加やXHTML1.0の要素の一部意味づけの変更です。HTML5ではHTML以外にもデータベースやJavascriptに関する機能も追加されています。
HTML5で追加された要素について
HTML5では、要素、属性の追加、意味付けの変更がされました。以前紹介したsmall要素、strong要素、em要素はHTML5で意味付けが変更された要素です。
今回はその中でもdivに変わる要素を紹介します。注意点として今回紹介する要素はInternet Explorerの9以上しか対応していません。
header要素（ヘッダー）
ページの上部（ヘッダー部分）のブロックを定義する要素です。今まで div class=”header” としていた部分に使用します。後述するsectionやarticleタグ内のヘッダー部分に使用することもできます。
header要素の各ブラウザの対応状況
Can I use -header-
<!-- xhtml1.0までの定義 -->
<div class="header"></div>
<!-- html5では、下記のように定義できます -->
<header></header>
main要素（メイン）
ページのメインコンテンツのブロックに使用します。
main要素は各ページにつき1回しか使用できません。
main要素はページ特有のコンテンツを囲むものであり、ページ共通のコンテンツ（ナビゲーションリンク、コピーライト、ロゴ、バナー、検索フォーム）は除きます。main要素内に見出し（h1～h6）は必須ではありませんが、後述するarticle, sectionを入れ子に使うことで検索サイトに文章構造を理解させやすくなります。
main要素の各ブラウザの対応状況
Can I use -main-
<!-- xhtml1.0までの定義 -->
<div class="main"></div>
<!-- html5では、下記のように定義できます -->
<main></main>
main要素は、下記のようにarticle, aside, footer, header, nav要素の入れ子に使用してはいけません。
<!-- mainはarticleの入れ子に使用できない -->
<article>
<main></main>
</article>
article要素（アーティクル）
単独で成り立つコンテンツのブロックを定義する要素です。
ページの説明に適した内容であり、そのブロックだけで完結できる内容を囲みます。
div class=”content”などページに関連のあるブロックに使用します。
後述するsection要素と違い、見出し要素（h1〜h6）は必須ではありません。
article要素の各ブラウザの対応状況
Can I use -article-
<!-- xhtml1.0までの定義 -->
<div class="contents"></div>
<!-- html5では、下記のように定義できます -->
<article class="contents"></article>
aside要素（アサイド）
ページの内容と関連がないブロックや補足情報のブロックを定義する要素です。バナーなどの広告エリアや関連記事などが該当します。
aside要素の各ブラウザの対応状況
Can I use -aside-
<!-- xhtml1.0までの定義 -->
<div class="sidebar"></div>
<!-- html5では、下記のように定義できます -->
<aside class="sidebar"></aside>
section要素（セクション）
章を定義する要素です。article要素と似ていますがsection要素は「章分け」をするだけなのでページの内容に関連がない場所でも使用できます。ただし「章」という意味付けをするのでsection要素内の先頭に必ず見出し要素（h1〜h6）が必須となります。
section要素の各ブラウザの対応状況
Can I use -section-
<!-- 正しい使い方 -->
<section>
<h2>見出し</h2>
<p>本文</p>
</section>
<!-- 間違った使い方 -->
<section>
<p>本文</p>
<p>本文</p>
</section>
articleタグとsectionタグの入れ子
articleタグとsectionタグは入れ子にすることができます。
<!-- articleタグの入れ子にsectionタグ -->
<article>
<section>
<h2>見出し</h2>
<p>本文</p>
</section>
<section>
<h2>見出し</h2>
<p>本文</p>
</section>
</article>
<!-- sectionタグの入れ子にarticleタグ -->
<section>
<h2>見出し</h2>
<article>
<h3>見出し</h3>
<p>内容</p>
</article>
<article>
<h3>見出し</h3>
<p>内容</p>
</article>
</section>
またarticleタグ内にarticleタグを入れ子にしたりsectionタグ内にsectionタグを入れ子にすることもできます。
リセットCSSへの追加
HTML5からはブロックレベル要素、インライン要素は初期値として定義する必要がなくなりました。そのため今回紹介した新しい要素は、ブラウザごとに定義が変わる場合や初期値がない場合も考えられます。今回の新要素はdiv要素の代わりに使うものばかりなのでリセットCSSでdisplay: block;で指定しておきます。
/* reset.cssに下記を追加 */
header,
footer,
main,
nav,
article,
aside,
section{
display: block;
}
IE9より前のバージョンに対応させる – html5shiv
今回紹介した新要素はIE9以降に対応しています。9より前のバージョン（IE6, 7, 8）では要素として認識しないためレイアウトがくずれます。html5shivは古いIEでも新要素を認識できるようにしたJavascriptファイルです。
下記のサイトにアクセスしサイト右側の緑のボタン「Clone or downroad」をクリックし「Downroad zip」をクリックするするとダウンロードが始まります。
使用するファイルは「html5shiv-master.zip」解凍後→「distフォルダ」→「html5shiv.min.js」を使用します。
ファイルのリンクはhead内に記述します。スタイルシートのリンクより先に記述しないとレイアウトが崩れます。
※jsフォルダにある場合
<!-- スタイルシートより先に記述します -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->
<link href="css/reset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
if lt IE 9 〜 endif は条件分岐です。IE9より前のバージョンを開いた時だけ有効になります。
HTML5で追加した要素は必要か
ここで紹介した要素を使うメリットは、従来のdivの終了タグが連発するコードを構造的に分かりやすくすることができます。また、今までよりclass名を減らすこともできるでしょう。
SEO的な面で見るとHTML5で追加された要素を利用することで検索サイトに、より構造を分かりやすく伝えることができる可能性があります。
ただし、articleやsectionは、コンテンツの構造が変わると意味付け的に使えない場合が発生する可能性があります。最初は無理に使おうとはせず、構造的に理解しやすいheader, footer, main, navなどから使用してみると良いでしょう。
まとめ
- header要素･･･ページの上部のブロックに使う
- footer要素･･･ページの下部のブロックに使う
- main要素･･･ページの主要なブロックに使う。ページに1度しか使えない
- nav要素･･･主要なナビゲーションを定義する
- artile要素･･･ページに関連するブロックで独立しても成り立つブロックに使う
- aside要素･･･ページに関連がない。または補足情報のブロックに使う
- section要素･･･「章」のブロックに使う
- sectionタグ内には、見出し要素が必要
- IE9より前のバージョンに対応させる場合には、html5shiv.jsを使う