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でのコーディングがおすすめです。


イベント

2017/10/06(金)
UX School(全10回)