このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

HTML5への変更点

HTMLタグ辞書
HTML4からHTML5への要素や属性の主な変更点。新しい要素と属性や変更、廃止された要素と属性の一覧

このページの内容にはHTML5.1、HTML5.2への変更は反映されていません。それぞれのバージョンの変更点は“HTML5.1への変更点”、“HTML5.2への変更点”を参照してください。

HTML5

HTML5とは?

HTML5は、HTMLの5回目、15年ぶりの大幅な改定版で2014年10月28日にHTML5は勧告されました。HTML4からの主な変更としてはスタイリング要素がほとんど廃止されて文書構造をHTMLで、装飾やスタイリングはCSSで、と明確に役割が分担されるようにな ったこと、文書の構造をより明確に示すことができるセクショニング要素の追加、ブラグインなどを使用せずHTMLで直接動画や音声データ、グラフィックなどを埋め込むことができるようになったことなどがあげられます。

要素の変更点

追加された要素

以下の要素はHTML5で新しく追加されました。

要素 用途
<article> 自己完結する記事のセクションであることを示す
<aside> メイン・コンテンツを補足するセクションであることを示す
<audio> 音楽や音声などのオーディオ・コンテンツを文書へ埋め込む
<bdi> 双方向テキスト書式の範囲を示す
<canvas> スクリプトでグラフィックを描く領域を示す
<datalist> 入力欄に入力する候補のリストを表す
<embed> プラグインが必要なコンテンツを埋め込む
<figcaption> 図版に付けるキャプションを示す
<figure> 参照される図版を表す
<footer> フッターを表す
<header> ヘッダを表す
<keygen> 暗号鍵を生成する
<main> 文書のメイン・コンテンツであることを示す
<mark> テキストのハイライト表示
<meter> 特定の範囲内の計測を表す
<nav> ナビゲーションであることを示す
<output> 計算結果の出力欄を表す
<progress> タスクの進捗度を表す
<rb> ルビをの対象となるテキストを指定する
<rp> ルビを囲む括弧を指定する
<rt> ルビを表す
<rtc> ルビテキストの集まり
<ruby> ルビを振るテキストを指定する
<section> 一般的なセクションを表す
<source> 形式の異なる複数の再生候補を指定する
<template> スクリプトにより複製し挿入するHTML要素の断片を示す
<time> 日付や時刻を、機械可読な形式で指定する
<track> 動画・音声と同期するテキストトラック
<video> 動画コンテンツを文書に埋め込む
<wbr> 改行候補を表す

変更された要素

以下の要素はHTML5で変更されました。

要素 変更点
<a> href”属性を持たないa”要素はプレースホルダー(場所取り)を表すようになりました
<address> 直近の祖先要素に当たるarticle”要素もしくはbody”要素の連絡先情報を表すようになりました
<b> 定義が太字から記事のリード文など他の文章とは区別したいテキストに変わりました
<blockquote> footer”要素cite”要素を要素内に配置して引用元などを示すことできるようになりました
<dl> 定義が定義リストから説明リストに変わりました
会話文を表すことはできなくなりました
<hr> 定義が水平線から段落レベルのテーマの区切りに変わりました
<i> 定義がイタリック体から専門用語や多言語の語句等他とは質が異なるテキストに変わりました
<s> 定義が取り消し線から正確ではない内容や関係性のない内容に変わりました
<small> 定義が小さめの文字から細目のような注釈に変わりました
<strong> 定義が強い強調から重要性の高いテキストに変わりました
<u> 定義が下線付きからテキストのラベル付けに変わりました

廃止された要素

以下の要素はHTML5で廃止されたため使用することができません。

要素 用途
<acronym> 略語(頭字語)を表す
<applet> Javaアプレットの埋め込み
<basefont> 基準となるフォント
<big> 大きめの文字
<center> 中央揃え
<dir> ディレクトリリストを表す
<font> フォント
<frame> フレーム内の設定
<frameset> ウィンドウの分割
<isindex> テキスト入力欄を表す
<noframes> フレームの代替内容を表す
<strike> 取り消し線
<tt> 等幅フォント

属性の変更点

追加された属性

以下の属性はHTML5で新しく追加されました。

要素 属性 用途
<a> download="" ダウンロードさせるかどうか、ダウンロード時のファイル名
<area> download="" ダウンロードさせるかどうか、ダウンロード時のファイル名
hreflang="" リンク先の記述言語
type="" リンク先のMIMEタイプ
rel="" 現在の文書から見たリンク先の関係
<base> target="" リンク先の表示方法
<button> autofocus 自動フォーカスの指定する
form="" 関連付けるform”要素の“id”属性値
formaction="" 送信先の指定する
formenctype="" 送信時のデータ形式を指定する
formmethod="" HTTPメソッドを指定する
formnovalidate 妥当性をチェックしない
formtarget="" 送信結果の表示方法
<form> novalidate 妥当性をチェックしない
<fieldset> disabled グループ化したフォームの内容を無効化する
form="" 関連付けるform”要素の“id”属性値
name="" グループの名前を指定する
<html> manifest="" キャッシュマニフェストの指定する
<iframe> sandbox="" 埋め込まれたHTML文書を制限
srcdoc="" 埋め込むHTML文書の内容
<img> crossorigin="" 取得したデータに関わるCORSリクエストを設定
<input> autocomplete="" オートコンプリートを指定する
autofocus 自動フォーカスの指定する
dirname="" 書字方向の送信に使う名前
form="" 関連付けるform”要素の“id”属性値
formaction="" 送信先の指定する
formenctype="" 送信時のデータ形式を指定する
formmethod="" HTTPメソッドを指定する
formnovalidate 妥当性をチェックしない
formtarget="" 送信結果の表示方法
height="" 画像の高さを指定する
list="" 入力候補となるデータリストを指定する
min="" 入力できる最小値を指定する
minlength="" 入力できる最少文字数
max="" 入力できる最大値を指定する
multiple="" 複数の値を入力・選択できるようにする
pattern="" 正規表現で入力値のパターンを指定する
placeholder="" 入力のヒント
required 入力必須
step="" 入力欄で刻むステップ値を指定する
width="" 画像の横幅を指定する
<label> form="" 関連付けるform”要素の“id”属性値
<link> sizes="" 関連付けられた画像ファイルなどのサイズを指定する
<meta> charset="" 文字エンコーディングの指定する
<object> form="" 関連付けるform”要素の“id”属性値
typemustmatch "data”属性で指定したリソースのMIMEタイプと"type”属性の値が一致する場合のみ読み込む
<ol> reversed="" 逆順序のリスト
<output> form="" 関連付けるform”要素の“id”属性値
<script> async="" スクリプトが使用可能になったら実行
<select> autofocus 自動フォーカスの指定する
form="" 関連付けるform”要素の“id”属性値
required 入力必須
<textarea> autofocus 自動フォーカスの指定する
dirname="" 書字方向の送信に使う名前
form="" 関連付けるform”要素の“id”属性値
maxlength="" 入力できる最大文字数
minlength="" 入力できる最少文字数
placeholder="" 入力のヒント
required 入力必須
wrap="" 送信時の改行の有無

グローバル属性

グローバル属性になった属性

以下のHTML4で定義されていた属性はすべての要素に指定することが可能になりました。これらの属性はグローバル属性と呼ばれます。

属性 説明
accesskey="" 要素にアクセスキーを割り当てる
class="" 要素にクラス名を指定する
dir="" 要素の内容の書字方向を示す
id="" 要素に固有の識別子を指定する
lang="" 要素の内容の記述言語を指定する
style="" 要素に直接スタイルシートを指定する
tabindex="" フォーカスの可否とフォーカスの移動順序を指定する
title="" 要素に補足情報を付ける

グローバル属性として追加された属性

以下の属性は新たにグローバル属性として追加されました。

属性 説明
contenteditable="" 要素の内容が編集可能かどうかを指定する
data-*="" カスタムデータ属性
hidden 要素の内容が関連性がないことを表す
spellcheck="" 要素の内容のスペルチェックを行うかどうかを指定する
translate="" 要素の内容を翻訳するかどうかを指定する

イベント属性

以下のHTML4で定義されていたイベントハンドラ属性グローバル属性としてすべての要素に指定することが可能になりました。

属性 説明
onchange="" 要素の入力内容に変化があった時に実行されるスクリプト
ondblclick="" 要素がダブルクリックされた時に実行されるスクリプト
onkeydown="" 要素上でキーが押された時に実行されるスクリプト
onkeypress="" 要素上でキーを押して放した時に実行されるスクリプト
onkeyup="" 要素上でキーを放した時に実行されるスクリプト
onload="" 文書をロードした時に実行されるスクリプト
onmousedown="" 要素上でマウスのボタンを押した時に実行されるスクリプト
onmousemove="" 要素上でマウスのカーソルを移動した時に実行されるスクリプト
onmouseover="" マウスのカーソルを要素と重なった時に実行されるスクリプト
onreset="" フォームをリセットした時に実行されるスクリプト
onselect="" 要素の入力内容が選択された時に実行されるスクリプト
onsubmit="" フォームを送信した時に実行されるスクリプト

以下の属性は新たにイベントハンドラ属性として追加されました。

属性 説明
onabort="" データの読み込みを中断した時に実行されるスクリプト
oncanplay="" メディアが再生可能になった時に実行されるスクリプト
oncanplaythrough="" バッファリングのために中断しないで最後までメディアを再生することができるようになった時に実行されるスクリプト
onclick="" 要素をクリックした時に実行されるスクリプト
oncontextmenu="" コンテキストメニューを表示した時に実行されるスクリプト
oncuechange="" メディアの字幕や副音声トラックが読み込まれた時に実行するコード
ondrag="" 要素のドラッグされた時に実行されるスクリプト
ondragend="" 要素のドラッグが終わった時に実行されるスクリプト
ondragenter="" ドラッグしたアイテムが要素に入った時に実行されるスクリプト
ondragleave="" ドラッグしたアイテムが要素から離れた時に実行されるスクリプト
ondragover="" ドラッグしたアイテムが要素の上に重なった時に実行されるスクリプト
ondragstart="" 要素のドラッグが始まった時に実行されるスクリプト
ondrop="" 要素にアイテムをドロップされた時に実行されるスクリプト
ondurationchange="" メディアの長さが変わった時に実行されるスクリプト
onemptied="" メディアの一時データが空になった時に実行されるスクリプト
onended="" メディアの再生が終了したときに実行するスクリプト
onerror="" 要素の処理中にエラーが発生した時に実行されるスクリプト
oninput="" 要素に入力された時に実行するスクリプト
oninvalid="" 要素の入力内容が無効な時に実行されるスクリプト
onloadeddata="" メディアのデータが読み込まれた時に実行されるスクリプト
onloadedmetadata="" メディアのメタデータが読み込まれた時に実行されるスクリプト
onloadstart="" メディアのデータの読み込みが始まる時に実行されるスクリプト
onmouseout="" マウスのカーソルを要素の外へ移動した時に実行されるスクリプト
onmouseup="" 要素上でマウスのボタンを放した時に実行されるスクリプト
onmousewheel="" 要素上でマウスホイールを動かしたときに実行されるスクリプト
onpause="" メディアの再生が一時停止された時に実行されるスクリプト
onplay="" メディアを再生した時に実行されるスクリプト
onplaying="" メディアが再生中になった時に実行されるスクリプト
onprogress="" メディアのデータの読み込み中に時に実行されるスクリプト
onratechange="" メディアの再生速度を変更した時に実行されるスクリプト
onreadystatechange="" 文書の読み込みのステータスが変化した時に
onscroll="" 要素上でスクロールした時に実行されるスクリプト
onseeked="" メディアの再生位置の変更が終わった時に実行されるスクリプト
onseeking="" メディアの再生位置の変更を始めた時に実行されるスクリプト
onsuspend="" メディアのデータが読み込みをしていない状態になった時に実行されるスクリプト
ontimeupdate="" メディアの再生時刻が更新された時に実行されるスクリプト
onvolumechange="" メディアの音量が変更された時に実行されるスクリプト

変更された属性

以下の属性はHTML5で変更されました。

要素 属性 変更点
<a> target="" 非推奨ではなくなりました
<area> coords="" マップが円形のときに属性値にパーセントの数値は指定できなくなりました
target="" 非推奨ではなくなりました
<base> href="" 属性値に相対URLを指定できるようになりました
<form> action="" 属性値として空の文字列は指定できなくなりました
enctype="" 属性値として“text/plain”を指定できるようになりました
<iframe> height="" 属性値にパーセントの数値は指定できなくなりました
width="" 属性値にパーセントの数値は指定できなくなりました
<img> alt="" より細かく必要条件が定められ、場合によっては省略が可能になりました
height="" 属性値にパーセントの数値は指定できなくなりました
usemap="" 属性値にURLを指定できなくなりました
width="" 属性値にパーセントの数値は指定できなくなりました
<input> accept="" 属性値として“audio/*”、video/*”、image/*”を指定できるようになりました
type="" 属性値として“tel”、search”、url”、email”、date”、time”、number”、range”、color”を指定できるようになりました
<li> value="" 非推奨ではなくなりました
<link> href="" 属性値として空の文字列は指定できなくなりました
media="" 属性値としてメディアクエリが指定できるようになりました
all”が初期値になりました
<meta> http-equiv="" HTTPヘッダ用のプロパティ名ではなくプラグマ指示子として使用されます
<object> width="" 属性値にパーセントの数値は指定できなくなりました
height="" 属性値にパーセントの数値は指定できなくなりました
<ol> start="" 非推奨ではなくなりました
type="" 非推奨ではなくなりました
<script> defer 文書の読み込みが完了した時点での実行を明確に意味するようになりました
type="" JavaScriptの場合は省略が可能になりました
<style> type="" 省略が可能になりました
<table> border="" 属性値として“1”または空の文字列のみが指定可能になりました
<td> colspan="" 属性値は0より大きくなければならなくなりました
<th> colspan="" 属性値は0より大きくなければならなくなりました

グローバル属性になった以下の属性はHTML5で変更されました。

属性 用途
accesskey="" 属性値として複数の値が指定可能になりました
dir="" 属性値として“auto”が指定可能になりました
id="" 属性値としてどのような文字列でも指定できるようになりました(ただし、重複したり、スペースを含めたり、空の文字列であってはなりません)
lang="" 属性値として空の文字列は指定可能になりました
style="" スタイルシート言語にCSSを使用するようになりました
tabindex="" 属性値に負の値を指定できるようになりました

廃止された属性

以下の属性はHTML5では廃止されたため使用できません。

要素 属性 用途
<a> charset="" リンク先の文字コード
coords="" 領域の座標(イメージマップ用)
rev="" リンク先から見た現在の文書との関係
shape="" 領域の形状(イメージマップ用)
<area> nohref="" リンクしない
<body> alink="" 選択中のリンクの文字色
background="" 文書の背景画像
bgcolor="" 文書の背景色
link="" 未訪問のリンクの文字色
text="" 文字の色
vlink="" 訪問済のリンクの文字色
<br> clear="" 回り込みの解除
<caption> align="" タイトルの表示位置
<col> align="" 水平方向の位置指定する
char="" 位置揃えの対象文字
charoff="" セルの端から対象文字までの距離
valign="" 垂直方向の位置指定する
width="" 列の幅
<div> align="" 水平方向の位置指定する
<dl> compact コンパクトに表示
<form> accept="" プログラム側が受け入れるMIMEタイプ
<h1>~<h6> align="" 水平方向の位置指定する
<head> profile="" メタデータプロファイルの指定する
<hr> align="" 水平方向の位置指定する
noshade 影をつけない
size="" 水平線の太さ
width="" 水平線の長さ
<html> version HTML DTDのバージョン
<iframe> align="" 位置の指定する
frameborder="" 境界線の表示
longdesc="" フレームを説明した文書へのリンク
marginheight="" フレーム内の上下の余白
marginwidth="" フレーム内の左右の余白
scrolling="" スクロールバーの表示
<img> align="" 垂直方向の位置指定・フロートの指定する
hspace="" 左右の余白
longdesc="" 画像を説明した文書へのリンク
name="" 画像の名前
vspace="" 上下の余白
<input> align="" 垂直方向の位置指定・フロートの指定する
usemap="" イメージマップの関連付け
<legend> align="" ラベルの位置指定する
<li> type="" マーカーの種類
<link> charset="" リンク先の文字コード
rev="" リンク先から見た現在の文書との関係
target="" リンク先の表示方法
<meta> scheme プロパティ値に関する追加情報
<object> align="" 垂直方向の位置指定・フロートの指定する
archive="" アーカイブの指定する
border="" 境界線の太さ
classid="" 実行プログラムの指定する
codebase="" 基準となるURI
codetype="" 実行プログラムのMIMEタイプ
declare 実行せずに待機状態にする
hspace="" 左右の余白
standby="" ダウンロード中のメッセージ
vspace="" 上下の余白
<ol> compact コンパクトに表示
<p> align="" 水平方向の位置指定する
<param> valuetype="" value”属性のタイプ
type="" 参照先のMIMEタイプ
<pre> width="" 1行に表示できる文字数
<table> align="" 水平方向の位置指定する
bgcolor="" 表全体の背景色
cellpadding="" セル内の余白
cellspacing="" セルの間隔
frame="" 外枠の表示方法
rules="" 内罫線の表示方法
summary="" 表の説明
width="" 表全体の横幅
<tbody> align="" セル内の水平方向の位置指定する
char="" 位置揃えの対象文字
charoff="" セルの端から対象文字までの距離
valign="" セル内の垂直方向の位置指定する
<td> align="" セル内の水平方向の位置指定する
axis="" セルの分類
bgcolor="" セルの背景色
char="" 位置揃えの対象文字
charoff="" セルの端から対象文字までの距離
height="" セルの高さ
nowrap="" セル内の自動改行を禁止
valign="" セル内の垂直方向の位置指定する
width="" セルの横幅
<tfoot> align="" セル内の水平方向の位置指定する
char="" 位置揃えの対象文字
charoff="" セルの端から対象文字までの距離
valign="" セル内の垂直方向の位置指定する
<th> align="" セル内の水平方向の位置指定する
axis="" セルの分類
bgcolor="" セルの背景色
char="" 位置揃えの対象文字
charoff="" セルの端から対象文字までの距離
height="" セルの高さ
nowrap="" セル内の自動改行を禁止
valign="" セル内の垂直方向の位置指定する
width="" セルの横幅
<thead> align="" セル内の水平方向の位置指定する
char="" 位置揃えの対象文字
charoff="" セルの端から対象文字までの距離
valign="" セル内の垂直方向の位置指定する
<tr> align="" セル内の水平方向の位置指定する
bgcolor="" セルの背景色
char="" 位置揃えの対象文字
charoff="" セルの端から対象文字までの距離
valign="" セル内の垂直方向の位置指定する
<ul> compact コンパクトに表示
type="" マーカーの種類

以下の属性はHTML5でも使用することが可能ですが仕様から除外されているため使用しないか他の手段を使用することが推奨されます。

要素 属性 用途
<img> border="" 境界線の太さ(属性値は“0”のみ指定可能)
<script> language="" スクリプト言語の指定(属性値は“JavaScript”のみ指定可能)
<a> name="" 到達点として指定するための名前
HTMLタグ辞書
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク