★HTML5リファレンス

■HTML 4との違い

HTML5では、これまでと同じようにHTMLタグを使ってHTML文書を作成することができます。
また、CSSと組み合わせることでデザインを制御できる点、XHTML形式で作成すればXMLデータとして扱える点などもHTML 4と同じです。

一方で新しく変更される点もあります。
HTML5におけるHTML 4からの主な変更点は以下の通りです。

• 新しい要素や属性が追加される
• HTML 4以前では使えた要素や属性のいくつかが廃止される
• より明確に文書構造を示すことができる
• フォームの入力補助やチェック機能などが充実している
• 動画や音声データをHTMLからシンプルに扱える
• 様々なAPIが追加される

詳細を見る

■HTML5で可能になること

HTML5では、HTML 4以前ではできなかったいくつかのことが可能となります。

より明確に文書構造を示すことができる

HTMLはマークアップ言語であり、HTML 4以前でも文書構造を示すことはできました。
ただ、今までは適切な要素が無い場合には、何でも<div>でくくってしまうことが多かったように思います。
HTML5では、文書構造を表す新しい要素が加わることで、ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようになります。

例えば、
ヘッダを示す<header>、
フッタを示す<footer>、
一つのセクションであることを示す<section>、
記事であることを示す<article>、
ナビゲーションであることを示す<nav> などの要素が追加されており、それぞれの役割に応じて適切な要素に割り当てることができるようになります。

※関連ページ：HTML5でマークアップしてみよう

フォームの入力補助やチェック機能を属性で指定できる

HTML5では、フォーム関連の新しい属性が多数追加されており、入力補助や入力チェックなどの機能が充実しています。
今まで、JavaScriptで作成するのが一般的だったこれらの機能が、
<input>などのフォーム要素に追加される新しい属性で簡単に指定できるようになります。
これらのフォーム属性が各ブラウザでサポートされるようになれば、煩雑で面倒なフォーム作成作業の手間が軽減されることになりそうです。

※関連ページ：フォーム機能の拡張

動画や音声データをHTMLからシンプルに扱える

HTML5では、動画や音声データをHTMLから扱えるようなります。
これまで動画や音声をウェブページに埋め込む際には、Flashなどのプラグインを利用するのが一般的でしたが、
HTML5では、新しく追加される<video>や<audio>を使用することで、
感覚的には<img>で画像を扱うような感じで、動画や音声をシンプルに扱えるようになります。

※関連ページ：<video>タグで動画を埋め込む

様々なAPIの追加により、ウェブアプリケーションが構築しやすくなる

HTML5では、HTML4以前では実現することが難しかった、
高度な機能を実現するための様々なAPIが新たに追加されています。

APIとは、Application Programming Interfaceの頭文字を取ったもので、
アプリケーションをプログラミングする際の決まりごとのことです。
つまり、何らかの機能を実現する際に指定する命令や関数の記述ルールを定めたものです。

例えば、ドラッグ＆ドロップ機能を取り入れたり、
ユーザー位置情報を取得したり、
ウェブアプリケーション（ウェブサイト）をオフラインでも使用できるようにする場合などに、
それぞれのAPIで定められた命令や関数を指定すれば、
簡潔な記述でこれらの機能を実現することができます。

現在、W3Cなどのウェブ標準化団体では、
様々な機能を実現するための様々なAPIについて仕様の検討が重ねられています。
勧告に近付いているAPIもあれば、まだまだ検討が必要が必要なAPIもありますが、
これらAPI群の仕様が確定する頃には、
標準のHTMLやJavaScriptだけでかなりの機能を実現することが可能となりそうです。

HTML5では、これらのAPIを利用することで、
単にHTML文書を作成するだけではなく、
より高度な機能を持ったウェブアプリケーションをウェブ標準として構築することが可能となります。

※関連ページ：HTML5のAPI、および、関連仕様

■HTML5で追加される予定の要素（タグ）

HTML5では、HTML 4には無かった以下の要素が新たに追加される予定です。

<article> …… 記事であることを示す
<aside> …… 余談であることを示す
<audio> …… 音声を再生する

<canvas> …… 図形を描く
<command> …… 操作メニューの各コマンドを指定する

<datalist> …… 入力候補となるデータリストを定義する
<details> …… 備考や操作手段などの詳細情報を示す

<embed> …… プラグインデータを埋め込む
<figcaption> …… 図表のキャプションを示す
<figure> …… 図表であることを示す
<footer> …… フッタであることを示す
<header> ……ヘッダであることを示す
<hgroup> …… セクションの見出しを表す、見出しをまとめる
<keygen> …… フォーム送信時にキーを発行する
<mark> …… 文書内の該当テキストを目立たせる
<menu> …… 操作メニューを作成する
<meter> …… 規定範囲内の測定値を表す
<nav> …… ナビゲーションであることを示す
<output> …… 計算結果を示す
<progress> …… タスク完了までの進行状況を示す
<section> …… 一つのセクションであることを示す
<source> …… 動画や音声などのURLや種類を指定する
<summary> …… <details>の内容の要約を示す
<time> …… 日付や時刻を正確に示す
<video> …… 動画を再生する
<rp> …… ルビを囲む記号を指定する
<rt> …… ルビのテキストを指定する
<ruby> …… ルビをふる
<wbr> …… 改行しても良い位置を示す

■HTML5で廃止される予定の要素（タグ）

以下の要素は、HTML5では廃止される（採用されない）予定です。

<acronym> …… 略語（頭字語）であることを表す

※<abbr>に置き換える

<applet> …… JAVAアプレットを挿入する

※<embed>や<object>に置き換える

<basefont> …… テキストの基準サイズ・基準色・基準フォントを指定する

※fontプロパティで指定

<bgsound> …… 効果音・BGMを鳴らす（IE独自の仕様）

※<audio>に置き換える

<big> …… テキストのサイズをひとまわり大きくする

※font-sizeプロパティで指定

<blink> …… 文字を点滅させる（NN独自）

※<blink>は使用しない（text-decoration: blinkで指定する方法があるが、現在主要なブラウザではtext-decorationプロパティのblink値はサポートを外されている）

<center> …… センタリングする

※margin:autoやtext-align: centerで指定

<dir> …… リストを表示する

※<ul>に置き換える

<font> …… フォントの種類・大きさ・色を指定する

※fontプロパティで指定

<frame> …… フレームに表示するファイルを指定する

※<iframe>やCSSに置き換えるか、メニューなどの共通部分はサーバー側でインクルードする。

<frameset> …… ウィンドウをフレームに分割する

※<iframe>やCSSに置き換えるか、メニューなどの共通部分はサーバー側でインクルードする。

<isindex> …… 検索キーワードの入力欄を作る

※<form>と<input type=”text”>に置き換える

<listing> …… ソースをそのまま表示する（タグは解釈される）

※<pre>や<code>に置き換える

<marquee> …… 文字をスクロールさせる（IE独自）

※CSS3のマーキー系プロパティで指定

<nobr> …… 改行なしで表示する（NN独自）

※white-space: nowrapなどのCSSで指定

<noembed> …… プラグインが利用できない環境用の表示内容を指定する（NN独自）

※プラグインが利用できない環境用の表示が必要な場合には、<embed>の代わりに<object>を使用する

<noframes> …… フレームが表示できない環境用の表示内容を指定する

※<iframe>やCSSに置き換えるか、メニューなどの共通部分はサーバー側でインクルードする。

<plaintext> …… ソースをそのまま表示する

※MIMEタイプに”text/plain”を指定する

<rb> …… ルビをふる文字を指定する（IE独自）

※<ruby>内に直接ルビベースを記述、<rb>タグは省略

<spacer> …… スペースを挿入する（NN独自）

※marginやpaddingプロパティで指定

<strike> …… 打ち消し線を引く

※削除を表す場合には<del>に置き換える、
正確ではなくなった内容を表す場合には<s>に置き換える、
それ以外の場合はtext-decoration: line-throughで指定

<tt> …… 等幅フォントで表示する

※font-family: monospaceで指定

<u> …… テキストに下線（アンダーライン）を引く

※text-decoration: underlineで指定

<xmp> …… ソースをそのまま表示する

※<pre>や<code>に置き換える