HTMLとHTML5の違い
HTMLには現在までにいくつかのバージョンが制定されています。HTMLのバージョンは、W3CというWebで使われる技術を標準化する団体によって制定・勧告されます。現在は、2014年に勧告されたHTML5が多くのサイトで採用されています。
ここでは、HTML5以前のバージョン(1999年に勧告された4.01を含む)を単にHTMLと呼称し、HTML5でなにが変わったのかについて説明していきます。
HTMLとHTML5の違い
HTML5は、4.01のバージョンに比べて、新しい要素や属性が追加されました。videoタグやaudioタグ、canvasタグが追加されたことに加え、構造化タグとしてheaderタグやfooterタグにより明確に文章構造を示すことができるようになりました。
さらにフォーム関連の属性追加により、入力補助やチェック機能が充実し、ドラッグ&ドロップ機能を取り入れるなど、ウェブページが構築しやすい環境となっています。例えば、1行目に必要なHTMLバージョンのDOCTYPE(DTD)宣言が、HTML4以前では長い記述が必要でした。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
しかしHTML5では下記の様に簡略化されています。
<!DOCTYPE html>
HTML5で追加されたタグ
| article | 記事のように独立したセクションを示す要素 |
| aside | 文書全体には影響しない余談を示す要素 |
| audio | 音声ファイルを参照して埋め込む要素 |
| bdi | 方向が異なるテキストで隔離する部分を示す要素 |
| canvas | ビットマップ図形を記述する要素 |
| command | ユーザーが呼び出し可能なコマンドを指定する要素 |
| data | 文字列がデータである事を示す要素 |
| datalist | 入力「候補のリストを定義する要素 |
| details | オンデマンドに参照できる詳細情報を示す要素 |
| embed | プラグインコンテンツを示す要素 |
| figcaption | 図や表のキャプションを示す要素 |
| figure | 画像と表を1つのまとまりとして示す要素 |
| footer | フッターを示し作者・著作権情報を含める事ができる |
| header | ヘッダーを示す要素 |
| hgroup | 見出しを表し、要素h1-h6をまとめる要素 |
| keygen | フォーム送信時に秘密鍵と公開鍵ペアを生成する |
| mark | 該当文字列をハイライトさせる要素 |
| meter | ディスク使用量のような測定値を表す要素 |
| nav | 文書のナビゲーションを示す要素 |
| output | スクリプトによる計算結果を示す要素 |
| progress | タスクの完了度合いを示す要素 |
| section | 1つのセクションを明示し、見出し要素とともに使える |
| source | 動画や音声で利用可能な異なる形式のを参照する素 |
| summary | details要素においてその内容示す要素 |
| time | 日付や時間である事を示す要素 |
| track | 音声動画ファイルに字幕を表示する要素 |
| video | 動画ファイルを参照して再生する要素 |
| rp | ルビに対応していないブラウザで囲む記号を指定する |
| rt | ふりがな(ルビ)を指定する要素 |
| ruby | ふりがな(ルビ)をふるための要素 |
| wbr | 改行しても良い位置を示す要素 |
HTML5で削除されたタグ
| acronym | 頭字語(略語)であることを示す |
| applet | Javaアプレットの挿入 |
| basefont | 基準フォントやサイズ、色を指定 |
| big | フォントを一回り大きく表示 |
| center | 水平方向のセンタリング |
| dir | リストの表示 |
| font | フォントの種類、サイズ、装飾を指定 |
| frame | フレームに表示する内容の指定 |
| frameset | ウィンドウのフレームの表示 |
| isindex | 検索キーワードの入力欄 |
| listing | ソースコードのテキストをそのまま表示 |
| noframes | フレームが非対応環境での表示内容を指定 |
| strike | 取り消し線の表示 |
| tt | 等幅フォントで表示 |
まとめ
極端に古い一部のブラウザではバージョン5に対応していないものがありますが、スマートフォンブラウザには標準対応していて、HTML4への下位互換性もありますので、これから学ぶ方はHTML5でのコーディングがおすすめです。