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

HTML5への変更点

記事Jul. 25th,2018
Aug.21st,2020
HTML4からHTML5への要素や属性の主な変更点。新しい要素と属性や変更、廃止された要素と属性の一覧

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

HTML5

“HTML5”とは?

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

仕様書

HTML5の仕様書はW3Cのウェブサイトで閲覧することができます。

要素の変更点

追加された要素

以下の要素は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> 定義が定義リストから説明リストに変わりました
会話文を表すことはできなくなりました
<h1>~<h6> section”要素でアウトラインを生成すると見出しをすべてh1”要素にすることができるようになりました
<hr> 定義が水平線から段落レベルのテーマの区切りに変わりました
<i> 定義がイタリック体から専門用語や他言語の語句等他とは質が異なるテキストに変わりました
<s> 定義が取り消し線から正確ではない内容や関係性のない内容に変わりました
<script> データブロックを表すことができるようになりました。
<small> 定義が小さめの文字から細目のような注釈に変わりました
<strong> 定義が強い強調から重要性の高いテキストに変わりました
<u> 定義が下線付きからテキストのラベル付けに変わりました

廃止された要素

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

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

属性の変更点

追加された属性

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

要素 属性 用途
<a> download="" ダウンロードさせるかどうか、ダウンロード時のファイル名
<area> download="" ダウンロードさせるかどうか、ダウンロード時のファイル名
href リンク先の記述言語
type="" リンク先のMIMEタイプ
rel="" 現在の文書から見たリンク先との関係
<base> target="" リンク先の表示方法
<body> onafterprint="" 文書の印刷後に実行するスクリプト
onbeforeprint="" 文書の印刷前に実行するスクリプト
onbeforeunload="" 文書から移動もしくは文書を閉じる前に実行するスクリプト
onhashchange="" URLのハッシュ値が変更されたときに実行するスクリプト
onmessage="" 文書がAPIからメッセージを受信したときに実行するスクリプト
onoffline="" ネットワークとの交信ができなくなったときに実行するスクリプト
ononline="" ネットワークとの交信ができるようになったときに実行するスクリプト
onpagehide="" セッション履歴の中で移動してウェブページから移動したときに実行するスクリプト
onpopstate="" セッション履歴の中で移動したときに実行するスクリプト
onstorage="" ウェブストレージが変更されたときに実行するスクリプト
onunload="" 文書から移動もしくは文書を閉じるときに実行するスクリプト
<button> autofocus="" 自動的にフォーカスする
form="" 関連付けるform”要素id”属性の値
formaction="" 送信先の指定する
formenctype="" 送信時のデータ形式を指定する
formmethod="" HTTPメソッドを指定する
formnovalidate="" 妥当性をチェックしない
formtarget="" 送信結果の表示方法
menu="" 関連付けるmenu”要素
<fieldset> disabled="" グループ化したフォームの内容を無効化する
form="" 関連付けるform”要素id”属性の値
name="" グループの名前を指定する
<form> autocomplete="" オートコンプリートの可否を指定する
novalidate="" 妥当性をチェックしない
<html> manifest="" キャッシュマニフェストを指定する
<iframe> sandbox="" 埋め込まれたHTML文書を制限
srcdoc="" 埋め込むHTML文書の内容
<img> crossorigin="" 取得したデータに関わるCORSリクエストを設定
<input> autocomplete="" オートコンプリートの可否を指定する
autofocus="" 自動的にフォーカスする
dirname="" 書字方向の送信に使う名前
form="" 関連付けるform”要素id”属性の値
formaction="" 送信先の指定する
formenctype="" 送信時のデータ形式を指定する
formmethod="" HTTPメソッドを指定する
formnovalidate 妥当性をチェックしない
formtarget="" 送信結果の表示方法
height="" 画像の高さを指定する
inputmode="" 入力する時のソフトウェアキーボードの種類を指定する
list="" 入力候補となるデータリストを指定する
max="" 入力できる最大値を指定する
min="" 入力できる最小値を指定する
minlength="" 入力できる最少文字数
multiple="" 複数の値を入力・選択できるようにする
pattern="" 正規表現で入力値のパターンを指定する
placeholder="" 入力のヒント
required 入力必須
step="" 入力欄で刻むステップ値を指定する
width="" 画像の横幅を指定する
<label> form="" 関連付けるform”要素id”属性の値
<link> crossorigin="" 取得したデータに関わるCORSリクエストを設定
sizes="" アイコンのサイズを示す
<meta> charset="" 文字エンコーディングの指定する
<object> form="" 関連付けるform”要素id”属性の値
typemustmatch="" 埋め込まれる外部リソースがtype”属性で指定したMIMEタイプと一致する場合にのみ埋め込みを許可
<ol> reversed="" 逆順序のリスト
<optgroup> label="" 選択肢のグループの名前
<option> label="" 選択肢の名前
selected="" 初期状態で選択する
value="" フォームで送信する値
<script> async="" スクリプトが使用可能になったら実行
crossorigin="" 取得したデータに関わるCORSリクエストを設定
<select> autofocus="" 自動的にフォーカスする
form="" 関連付けるform”要素id”属性の値
required="" 入力必須
<table> sortable="" ソート可能にする
<th> sorted="" 表をソートした時の順序
<textarea> autocomplete="" オートコンプリートの可否を指定する
autofocus="" 自動的にフォーカスする
dirname="" 書字方向の送信に使う名前
form="" 関連付けるform”要素id”属性の値
inputmode="" 入力する時のソフトウェアキーボードの種類を指定する
maxlength="" 入力できる最大文字数
minlength="" 入力できる最少文字数
placeholder="" 入力のヒント
required="" 入力必須
wrap="" 送信時の改行の有無

グローバル属性

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

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

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

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

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

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

イベント属性

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

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

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

属性 説明
onabort="" データの読み込みを中断した時に実行されるスクリプト
onafterprint="" 文書の印刷後に実行するスクリプト
onbeforeprint="" 文書の印刷前に実行するスクリプト
onbeforeunload="" 文書から移動もしくは文書を閉じる前に実行するスクリプト
oncancel="" ダイアログをキャンセルした時に実行されるスクリプト
oncanplay="" メディアが再生可能になった時に実行されるスクリプト
oncanplaythrough="" バッファリングのために中断しないで最後までメディアを再生することができるようになった時に実行されるスクリプト
oncuechange="" メディアの字幕や副音声トラックが読み込まれた時に実行するコード
ondurationchange="" メディアの長さが変わった時に実行されるスクリプト
onemptied="" メディアの一時データが空になった時に実行されるスクリプト
onended="" メディアの再生が終了したときに実行するスクリプト
onerror="" 要素の処理中にエラーが発生した時に実行されるスクリプト
onhashchange="" URLのハッシュ値が変更されたときに実行するスクリプト
oninput="" 要素に入力された時に実行するスクリプト
oninvalid="" 要素の入力内容が無効な時に実行されるスクリプト
onloadeddata="" メディアのデータが読み込まれた時に実行されるスクリプト
onloadedmetadata="" メディアのメタデータが読み込まれた時に実行されるスクリプト
onloadstart="" メディアのデータの読み込みが始まる時に実行されるスクリプト
onmessage="" 文書がAPIからメッセージを受信したときに実行するスクリプト
onmouseenter="" マウスのカーソルを要素の上に移動した時に実行されるスクリプト
onmouseleave="" マウスのカーソルを要素の外に移動した時に実行されるスクリプト
onmousewheel="" 要素上でマウスのホイールを回した時に実行されるスクリプト
onoffline="" ネットワークとの交信ができなくなったときに実行するスクリプト
ononline="" ネットワークとの交信ができるようになったときに実行するスクリプト
onpagehide="" セッション履歴の中で移動してウェブページから移動したときに実行するスクリプト
onpause="" メディアの再生が一時停止された時に実行されるスクリプト
onplay="" メディアを再生した時に実行されるスクリプト
onpopstate="" セッション履歴の中で移動したときに実行するスクリプト
onplaying="" メディアが再生中になった時に実行されるスクリプト
onprogress="" メディアのデータの読み込み中に時に実行されるスクリプト
onratechange="" メディアの再生速度を変更した時に実行されるスクリプト
onreadystatechange="" 文書の読み込みのステータスが変化した時に実行されるスクリプト
onresize="" ウィンドウサイズを変更した時に実行されるスクリプト
onscroll="" 要素上でスクロールした時に実行されるスクリプト
onseeked="" メディアの再生位置の変更が終わった時に実行されるスクリプト
onseeking="" メディアの再生位置の変更を始めた時に実行されるスクリプト
onshow="" 操作メニューを表示した時に実行されるスクリプト
onstalled="" メディアのデータが読み込めなかった時に実行されるスクリプト
onstorage="" ウェブストレージが変更されたときに実行するスクリプト
onsuspend="" メディアのデータが読み込みをしていない状態になった時に実行されるスクリプト
ontimeupdate="" メディアの再生時刻が更新された時に実行されるスクリプト
ontoggle="" 開閉式のウィジェットを開閉した時に実行されるスクリプト
onvolumechange="" メディアの音量が変更された時に実行されるスクリプト
onwaiting="" メディアの再生がバッファリングのために途中で止まった時に実行されるスクリプト

変更された属性

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

要素 属性 変更点
<a> rel="" 属性値として“author”、“license”、“nofollow”、“noreferrer”、“search”、“tag”を指定できるようになりました
<area> coords="" マップが円形のときに属性値にパーセントの数値は指定できなくなりました
rel="" 属性値として“author”、“license”、“nofollow”、“noreferrer”、“search”、“tag”を指定できるようになりました
<base> href="" 属性値に相対URLを指定できるようになりました
<form> action="" 属性値として空の文字列は指定できなくなりました
enctype="" 属性値として“text/plain”を指定できるようになりました
<iframe> height="" 属性値にパーセントの数値は指定できなくなりました
width="" 属性値にパーセントの数値は指定できなくなりました
<img> alt="" より細かく必要条件が定められ、場合によっては省略が可能になりました
height="" 属性値にパーセントの数値は指定できなりました
画像のアスペクト比を変えるために使用することもできなくなりました
width="" 属性値にパーセントの数値は指定できなりました
画像のアスペクト比を変えるために使用することもできなくなりました
<input> accept="" 属性値として“audio/*”、video/*”、image/*”を指定できるようになりました
type="" 属性値として“tel”、search”、url”、email”、date”、time”、number”、range”、color”を指定できるようになりました
<li> value="" 非推奨ではなくなりました
<link> href="" 属性値として空の文字列は指定できなくなりました
media="" 属性値としてメディアクエリが指定できるようになりました
all”が初期値になりました
rel="" 属性値として“author”、“icon”、“license”、“prefetch”、“search”を指定できるようになりました
<meta> http-equiv="" サーバーがHTTPヘッダを生成するためではなく、ユーザーエージェントが使用するためのプラグマ指示子として使用されます
<object> data="" codebase”属性と関連しなくなりました
height="" 属性値にパーセントの数値は指定できなくなりました
width="" 属性値にパーセントの数値は指定できなくなりました
<ol> start="" 非推奨ではなくなりました
type="" 非推奨ではなくなりました
<script> defer="" 文書の読み込みが完了した時点での実行を明確に意味するようになりました
type="" スクリプトの記述言語がJavaScriptの場合は省略が可能になりました
<style> type="" スタイルシートの記述言語がCSSであれば省略が可能になりました
<table> border="" 属性値として“1”または空の文字列のみが指定可能になりました
<td> colspan="" 属性値は0より大きくなければならなくなりました
<th> colspan="" 属性値は0より大きくなければならなくなりました

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

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

廃止された属性

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

要素 属性 用途
<a> charset="" リンク先の文字コード
coords="" 領域の座標(イメージマップ用)
name="" ページ内リンクの到達点として使用するための識別子
rev="" リンク先から見た現在の文書との関係
shape="" 領域の形状(イメージマップ用)
<area> nohref="" リンクしない
type="" リンク先のMIMEタイプ
<body> alink="" 選択中のリンクの文字色
background="" 文書の背景画像
bgcolor="" 文書の背景色
link="" 未訪問のリンクの文字色
text="" 文字の色
vlink="" 訪問済のリンクの文字色
<br> clear="" 回り込みの解除
<caption> align="" タイトルの表示位置
<col> align="" 水平方向の位置を指定する
char="" 位置揃えの対象文字
charoff="" セルの端から対象文字までの距離
valign="" 垂直方向の位置を指定する
width="" 列の幅
<colgroup> width="" 列の横幅
<div> align="" 水平方向の位置を指定する
<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="" 画像を説明した文書のURL
name="" 画像の名前
vspace="" 上下の余白
<input> align="" 垂直方向の位置指定・フロートの指定する
ismap="" サーバーサイドイメージマップの関連付け
usemap="" クライアントサイドイメージマップの関連付け
<legend> align="" ラベルの位置を指定する
<li> type="" マーカーの種類
<link> charset="" リンク先の文字コード
<meta> scheme="" プロパティ値に関する追加情報
<object> align="" 垂直方向の位置指定・フロートの指定する
archive="" アーカイブの指定する
border="" 境界線の太さ
classid="" 実行プログラムの指定する
codebase="" 基準となるURI
codetype="" 実行プログラムのMIMEタイプ
declare="" 実行せずに待機状態にする
hspace="" 左右の余白
standby="" ダウンロード中のメッセージ
typemustmatch="" 埋め込まれる外部リソースがtype”属性で指定したMIMEタイプと一致する場合にのみ埋め込みを許可
vspace="" 上下の余白
<ol> compact コンパクトに表示
<p> align="" 水平方向の位置を指定する
<param> type="" 参照先のMIMEタイプ
valuetype="" 引数の値の種類
<pre> width="" 1行に表示できる文字数
<script> language="" スクリプトの記述言語
<table> align="" 水平方向の位置を指定する
bgcolor="" 表全体の背景色
cellpadding="" セル内の余白
cellspacing="" セルの間隔
frame="" 外枠の表示方法
rules="" 内罫線の表示方法
summary="" 表の説明
width="" 表全体の横幅
<tbody> align="" セル内の水平方向の位置を指定する
char="" 位置揃えの対象文字
charoff="" セルの端から対象文字までの距離
valign="" セル内の垂直方向の位置を指定する
<td> abbr="" セルの内容の省略形
align="" セル内の水平方向の位置を指定する
axis="" セルの分類
bgcolor="" セルの背景色
char="" 位置揃えの対象文字
charoff="" セルの端から対象文字までの距離
height="" セルの高さ
nowrap="" セル内の自動改行を禁止
scope="" 見出しの対象範囲
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タグ辞書
HTMLタグ辞書
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク