HTML5入門 新要素編

2011.11.21crossnodeHTML5


HTML5では新しいタグが多数追加されました。新たに追加された主な要素の中にはドキュメント(文書)構造だけを表すのではなく、WEBサイトとして表示される際のレイアウトや付加的なビジュアル/メディアデータをサポートするためのものも色々含まれています。純然たる文書データというよりもWEBでの使用を主眼にされているというのが今までのHTMLとは異なる点と言えるかもしれません。

というわけで、今回はHTML5で追加された主な新要素をいくつかピックアップしてみました。
なお、HTML5のW3C仕様書がHTML4と異なる点をまとめたものになっているように、HTML5について学ぶときにはHTML4について概ね理解している必要がありますので、HTML自体についてまだ理解できていないという人はまずはHTML4から勉強してみてください。

00 : 新要素を使うときには

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

上記のようなソースをhead内に記述してhtml5.jsというJSファイルを読み込みましょう。コメントアウトの「if lt IE 9」という箇所は閲覧しているブラウザが「もしIE9未満だったら」という意味です。HTML5ではブラウザが対応していない新要素は空要素として扱われてスルーされる仕様になっていますが、やはりどのブラウザでも認識して欲しいですよね。そんなときにこのhtml5.jsを読み込んであげると下位バージョンのIEでも新要素をタグとして定義して認識してくれます。IE8以下を使っているユーザーがまだまだいる当面はHTML5の新要素を使うときのお決まりの記述になるかと思います。

ソースを見たところabbr, article, aside, audio, bdi, canvas, data, datalist, details, figcaption, figure, footer, header, hgroup, mark, meter, nav, output, progress, section, subline, summary, time, videoに対応しているようですが、これらのタグはインライン要素のように扱われるだけで固有の機能は動作しないので、必要な場合はJS等で実装する必要があるかもしれません。
ちなみに、Google Codeのサービス終了に備えてこちらからJSファイルをダウンロードしておくのも手かもしれません。

01 : header

<header>〜</header>

ヘッダ部分に使います。div#headerとしていた時と用法は変わりません。

02 : footer

<footer>〜</footer>

フッタ部分に使います。div#footerとしていた時と用法は変わりません。

03 : nav

<nav>〜</nav>

ナビゲーション部分に使います。グローバルナビゲーション限定ではないのでページ内の複数箇所で使用可能です。

04 : section

<section>
<h1>見出し1</h1>
<p>本文1</p>
</section>
<section>
<h1>見出し2</h1>
<p>本文2</p>
</section>

sectionタグは一つのセクションを表します。見出しと本文などをひとまとまりとして扱う際に使用します。sectionタグ内にh1~h6のいずれかを含めることは必須ではありませんが、見出しを含まない/見出しを付けられない箇所には使用しない方がよいかもしれません。
ちなみに、上記ソースではh1タグが2回使われていますがHTML5ではh1もページ内で無制限に使用可能になりました。

05 : article

<article>
<h2>見出し</h2>
<p>本文</p>
<article>
<h2>コメント見出し</h2>
<p>コメント本文</p>
</article>
</article>

articleタグは単体で完結するセクションを表します。例えば、ブログのエントリーや、掲示板などの投稿などに使用します。sectionタグと同じく、基本的に見出しと本文のセットを含めるかたちになるでしょう。
ちなみに、上記ソースのようにarticleタグ内にarticleタグを含める入れ子もOKです。sectionタグを含めることもできます。

06 : canvas

<canvas id="sample">
ご利用のブラウザはcanvasタグをサポートしておりません。
</canvas>

<script>
//描画コンテキストの取得
var canvas = document.getElementById('sample');
if (canvas.getContext) {
	var context = canvas.getContext('2d');
	//長方形の描画。fillRect(X座標, Y座標, 幅, 高さ)
	context.fillRect(20,20,100,50); 
}
</script>

canvasタグは図形を描画する描画領域を設定するときに使います。領域の幅と高さはwidth, heightで指定できますが、指定なしの場合はデフォルト値の幅300px高さ150pxになります。なおタグ内のテキストは、非対応のブラウザで見たときだけ表示されます。
あくまでcanvasタグは描画する領域(キャンバス)であって、図形の設定はJSのほうで記述します。上記ソースのように描画する対象のcanvasタグのID名を指定してそこに図形を生成します。

▼参考サイト

W3C – 『HTML 5 differences from HTML 4』日本語訳 – HTML5.JP

HTML5 における HTML4 からの変更点

HTML5リファレンス

W3C HTML5最終草案(原文)

HTML5におけるHTML4からの変更点(HTML5最終草案日本語訳)


ページトップへ