- HTML
HTML5とは|HTMLとの違い・今の標準と描画モードを実測
結論
HTML5は、HTML4(1999年)の次に作られたHTMLの版で、2014年にW3Cの勧告になりました。今は版の番号を付けない「HTML Living Standard」(WHATWGが更新し続ける1つの仕様)が唯一の標準で、「HTML5」は今のHTMLを指す呼び名として使われています。
この記事でわかること
- HTML4との違いと、W3C・WHATWGの経緯(2004〜2021年)
- DOCTYPEの書き方9通りで描画モードが変わる実物(Chromium)
- 新しい要素・フォーム・canvas・Web Storageと、廃止された要素の今の扱い
HTML5を一言でいうと、「Webページを書くための言葉(HTML)を、動画・描画・アプリまで扱えるように作り直した版」です。名前の「5」は版の番号ですが、今は番号のない1つの仕様に引き継がれています。
flowchart TD
A[HTML 4.01<br>1999年 W3C勧告] --> B[WHATWG 設立<br>2004年]
B --> C[HTML5 草案<br>2008年 W3C]
C --> D[HTML5 勧告<br>2014年]
D --> E[HTML 5.1 / 5.2<br>2016・2017年]
B --> F[HTML Living Standard<br>WHATWG が更新]
E --> G[2019年 W3CとWHATWGが合意<br>仕様を1つに]
F --> G
G --> H[2021年 W3Cの5.x を引退<br>今は Living Standard]
よく調べられることの答えを先にまとめます。
| 知りたいこと | 答え | 詳しい節 |
|---|---|---|
| HTML5とは | HTML4の次の版。動画・描画・フォーム・APIを標準で扱える | HTML5とは |
| HTML5とHTMLの違い | HTML5はHTMLの版の1つ。HTML4と比べて書き方が簡単になり、要素が増えた | HTML5とHTML4の違い |
| HTML5は今も最新か | W3Cの版としては引退。今はHTML Living Standardが唯一の標準 | 歴史とHTML Living Standard |
| DOCTYPEの書き方 | <!DOCTYPE html> の1行。書かないと後方互換モードになる |
DOCTYPEと描画モード |
| HTML5で追加されたタグ | header・nav・main・article・section・video・canvas など | セマンティック要素 |
| HTML5で廃止されたタグ | font・center・big・marquee など。ブラウザは今も表示する | 廃止されたタグの今の扱い |
| HTML5で書けているか確かめたい | 検証ツール(vnu・html-validate)に通す | HTMLの検証 |
| 「HTML5対応」の意味 | 今のブラウザで動く標準のHTMLで作った、という意味でほぼ使われる | 判断表 |
確認環境:Ubuntu 24.04.5 LTS の上で、Python 3.13.18 の http.server を 127.0.0.1 のポートで起動し、自分で書いた試験用の HTML(DOCTYPE を変えた9枚、新しい要素・フォーム・video・canvas・Web Storage を並べた1枚、廃止された要素の1枚、パーサーの誤り処理の2枚)を置きました。表示は Playwright 1.63.0 の Chromium 153.0.8010.12(ヘッドレス、ja-JP、幅480px)で開き、document.compatMode・要素の大きさ・計算後のスタイル・アクセシビリティツリー・canvas の画素を JavaScript で取り出しています。検証は Nu Html Checker(vnu.jar 26.10.12、OpenJDK 21.0.12)と html-validate 11.17.0(Node.js 22.23.4)を作業用の場所に入れて実行しました。W3C と WHATWG の経緯は、W3C の各仕様の履歴ページ・W3C のブログとニュース・W3C と WHATWG の覚え書き(MOU)・WHATWG の FAQ と HTML Living Standard の本文、描画モードは MDN で確かめています。図は mermaid 11.16.0 で描画を確かめました(確認日 2026年10月29日)。
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
(記載例)出典:株式会社RJC「HTML5とは|HTMLとの違い・今の標準と描画モードを実測」
HTML5とは(意味と今の位置づけ)
この節では、HTML5が何を指す言葉で、今どういう位置づけなのかが分かります。
HTML5は、Webページの骨組みを書くマークアップ言語「HTML」の第5版です。 HTML(HyperText Markup Language)は、見出し・段落・リンク・画像などを、<h1> や <p> のようなタグで囲んで、ブラウザに「ここは見出し」「ここは段落」と伝える言葉です。HTML5は、その仕様を大きく作り直した版として、2014年10月28日に W3C(Web の標準を作る団体)の勧告(正式な標準)になりました。
HTML5では、次の3つが大きく変わりました。
- 書き方が簡単になった:DOCTYPE が
<!DOCTYPE html>の1行になり、文字コードの指定も<meta charset="utf-8">で済むようになった。 - 意味を表す要素が増えた:
header・nav・main・article・section・aside・footerなど、ページの中の役割を表す要素ができた。 - プラグインなしで動画・描画・アプリが作れるようになった:
video・audio・canvas、入力チェックつきのフォーム、Web Storage などの API が標準になった。以前は動画やゲームに Flash などのプラグインを使っていた。
ただし今は「HTML5」という名前の仕様は更新されていません。 2019年に W3C と WHATWG(ブラウザの開発者が中心の団体)が合意し、WHATWG が更新し続ける HTML Living Standard が唯一の HTML の標準になりました。W3C の https://www.w3.org/TR/html/ を開くと、WHATWG の HTML Living Standard(html.spec.whatwg.org)へ転送されます(2026年10月29日に確認)。
HTML Living Standard の本文は「Is this HTML5?」という問いに「In short: Yes.」と答え、「HTML5」という言葉は今の Web の技術を指す流行語(buzzword)として広く使われている、と書いています。つまり、今「HTML5」と言うときは、多くの場合「今のHTML」と同じ意味です。
<!DOCTYPE html> だけHTML5とHTML4の違い(何が変わったかの比較表)
この節では、「HTML5とHTMLの違い」と検索したときに知りたい、HTML4との具体的な違いが一覧で分かります。
「HTML」は言葉全体の名前で、「HTML5」はその版の1つです。 ですから「HTMLとHTML5の違い」は、実際には「HTML5より前の版(主にHTML 4.01・XHTML 1.0)とHTML5の違い」です。
| 項目 | HTML 4.01(1999年) | HTML5・今のHTML |
|---|---|---|
| DOCTYPE | DTD の名前とURLを書く長い1行(3種類から選ぶ) | <!DOCTYPE html> だけ |
| 文字コードの指定 | <meta http-equiv="Content-Type" content="text/html; charset=…"> |
<meta charset="utf-8"> |
| ページの構造 | 汎用の箱(div)に id や class を付けて表す | header・nav・main・article・section・aside・footer で役割を表す |
| 動画・音声 | Flash などのプラグインを object・embed で埋め込む | video・audio 要素で再生できる |
| 描画 | 画像を並べるか、プラグイン | canvas(JavaScript で描く)・HTMLの中に SVG を直接書ける |
| フォーム | テキスト・チェックボックスなどだけ。入力チェックは JavaScript で書く | date・email・number・range・color など。required・pattern でブラウザがチェック |
| 見た目の指定 | font・center、bgcolor・align 属性が使えた | 廃止。見た目は CSS で書く |
| 誤りのある HTML | ブラウザごとに扱いが違った | パーサーの誤り処理まで仕様で決まり、どのブラウザでも同じ形の DOM になる |
| JavaScript の API | DOM の操作が中心 | Web Storage・履歴の操作・ドラッグ&ドロップ・オフラインなどが仕様に入った(広い意味のHTML5) |
「狭い意味のHTML5」と「広い意味のHTML5」
HTML5という言葉は、2つの範囲で使われます。
狭い意味のHTML5
W3C が2014年に勧告した仕様そのもの
要素・属性・パーサー・一部の API
W3C の版としては今は引退している
広い意味のHTML5
HTML+CSS3+JavaScript の API をまとめた呼び名
Web Storage・WebSocket・位置情報なども含める
「HTML5のゲーム」「HTML5対応」はこちら
求人票や製品の説明で「HTML5」と書かれているときは、広い意味(今の Web 技術全体)であることがほとんどです。CSS の役割と書き方は、記事「CSSとは|HTMLとの違い・書き方・効かない原因を実例で解説」で扱っています。
HTML5の歴史とHTML Living Standard(W3C・WHATWGの経緯)
この節では、HTML5がどう作られ、なぜ今は「HTML Living Standard」と呼ばれるのかが、公式の記録で分かります。
HTMLの仕様は、W3C と WHATWG という2つの団体が、一時期それぞれ別に作っていました。 WHATWG の FAQ によると、WHATWG は2004年に W3C のワークショップのあと、Apple・Mozilla Foundation・Opera Software の人たちが作った団体です。当時、W3C は HTML を XML の形に置き換える XHTML の方向へ進んでおり、ブラウザの開発者はその方向を心配していた、と書かれています。
| 年月日 | できごと | 出典 |
|---|---|---|
| 1999年12月 | HTML 4.01 が W3C 勧告 | W3C |
| 2004年 | WHATWG を設立(Apple・Mozilla・Opera の人たち) | WHATWG FAQ |
| 2008年1月22日 | W3C が HTML5 の作業草案(Working Draft)を公開 | W3C 仕様の履歴 |
| 2014年10月28日 | HTML5 が W3C 勧告(Recommendation) | W3C 仕様の履歴・W3C ブログ |
| 2017年12月14日 | HTML 5.2 が W3C 勧告(5.1 は2016年) | W3C 仕様の履歴 |
| 2018年3月27日 | W3C の HTML5(5.0)が「Retired(引退)」 | W3C 仕様の履歴 |
| 2019年5月28日 | W3C と WHATWG が覚え書きに合意。HTML と DOM は1つの版にする | W3C ブログ・MOU |
| 2021年1月28日 | WHATWG の HTML Review Draft(2020年1月29日版)を W3C が勧告として承認。HTML 5.2 は「Retired」 | W3C ニュース・仕様の履歴 |
2019年5月28日の W3C のブログは、合意の中身を次のように説明しています。
- WHATWG が HTML と DOM の Living Standard を管理する。
- W3C は、HTML・DOM に関する決められた仕様を独自に出すことをやめる(W3C stops independent publishing)。
- WHATWG が定期的に出す Review Draft を、W3C が勧告として承認できる。W3C の勧告と WHATWG の Review Draft は「同じ文書」になる。
W3C の HTML 5.2 の仕様のページには、今は「This specification is a Superseded Recommendation.」(この仕様は置き換えられた勧告です)と表示され、2021年1月28日に置き換えられたことが書かれています。
Living Standard(生きている標準)とは
Living Standard は、版の番号を付けず、意見を受けて少しずつ更新し続ける標準のことです。 WHATWG の FAQ は「continuously updated as they receive feedback」と説明しています。手元で確かめた時点で、HTML Living Standard の本文には「Last Updated 26 October 2026」と書かれていました。
WHATWG の FAQ は、HTML が最後に「完成」と言われたのは HTML4 のあとで、そのあと数年間開発が止まった、とも書いています。HTML6 が出ないのは、この反省から「完成させずに更新を続ける」方法に変えたためです。
HTMLの仕様を調べるとき
2014年の勧告のあとに追加・変更された要素や属性(dialog など)が、以前の版には載っていない
DOCTYPE宣言の違いと描画モード(Chromiumで実測)
この節では、HTML5のDOCTYPEの意味と、DOCTYPEの書き方でブラウザの描画モードが変わる様子が、実際に表示した数値で分かります。
今のHTMLのDOCTYPEは <!DOCTYPE html> の1行で、役目は「ブラウザを標準モードにすること」だけです。 MDN によると、ブラウザには3つの描画モードがあります。
- 後方互換モード(quirks mode):Navigator 4 や Internet Explorer 5 の動きをまねる。Web 標準が広まる前に作られたページを壊さないためのもの。
- 限定後方互換モード(limited-quirks mode、準標準モード):ごく少数の互換の動きだけを残したモード。
- 非後方互換モード(no-quirks mode、標準モード):HTML と CSS の仕様のとおりに動く。
JavaScript の document.compatMode を見ると、後方互換モードなら "BackCompat"、それ以外なら "CSS1Compat" が返ります(MDN)。
試したページ
次の本文の前に、DOCTYPE だけを変えて9枚のページを作り、Chromium 153 で開きました(幅480px・高さ600px)。
<style>td{border:1px solid #888;padding:0}img{border:0}</style>
<body style="margin:0">
<main id="m" style="height:100%;background:#eef"></main>
<table id="t"><tr><td id="c"><img src="px.png" width="20" height="20" alt=""></td></tr></table>
<p id="u" style="width:100;background:#fee">単位なし</p>
</body>
const r = await page.evaluate(() => ({
mode: document.compatMode,
mainH: document.getElementById('m').getBoundingClientRect().height, // height:100% の高さ
cellH: document.getElementById('c').getBoundingClientRect().height, // 20px の画像を入れたセルの高さ
uw: getComputedStyle(document.getElementById('u')).width, // width:100(単位なし)
}));
Chromium 153.0.8010.12
d0-none {"mode":"BackCompat","dt":null,"mainH":600,"cellH":22,"uw":"100px"}
d1-html5 {"mode":"CSS1Compat","dt":"html||","mainH":0,"cellH":26,"uw":"480px"}
d2-401strict {"mode":"CSS1Compat",…,"mainH":0,"cellH":26,"uw":"480px"}
d3-401trans-url {"mode":"CSS1Compat",…,"mainH":0,"cellH":22,"uw":"480px"}
d4-401trans-nourl {"mode":"BackCompat",…,"mainH":600,"cellH":22,"uw":"100px"}
d5-xhtml10trans {"mode":"CSS1Compat",…,"mainH":0,"cellH":22,"uw":"480px"}
d6-xhtml10strict {"mode":"CSS1Compat",…,"mainH":0,"cellH":26,"uw":"480px"}
d7-text-before {"mode":"BackCompat","dt":null,"mainH":600,"cellH":22,"uw":"100px"}
| DOCTYPE | compatMode | 描画モード(結果から) | 画像のセルの高さ | height:100%/width:100 |
|---|---|---|---|---|
| 書かない | BackCompat | 後方互換 | 22px | 600px/100px(効く) |
<!DOCTYPE html>(小文字も同じ) |
CSS1Compat | 標準 | 26px | 0px/無視(480px) |
| HTML 4.01 Strict | CSS1Compat | 標準 | 26px | 0px/無視 |
| HTML 4.01 Transitional(URLあり) | CSS1Compat | 限定後方互換 | 22px | 0px/無視 |
| HTML 4.01 Transitional(URLなし) | BackCompat | 後方互換 | 22px | 600px/100px |
| XHTML 1.0 Transitional | CSS1Compat | 限定後方互換 | 22px | 0px/無視 |
| XHTML 1.0 Strict | CSS1Compat | 標準 | 26px | 0px/無視 |
| DOCTYPEの前に文字「x」 | BackCompat | 後方互換(DOCTYPEが無視された) | 22px | 600px/100px |
| DOCTYPEの前にコメント | CSS1Compat | 標準 | ― | 0px |
1後方互換は CSS の書き間違いを通す
単位の無い width:100 が100pxとして効き、height:100% が画面の高さ(600px)まで伸びた。標準モードでは、単位なしは無視され、高さは0px。
2限定後方互換は compatMode で見分けられない
Transitional は CSS1Compat なのに、画像の下のすき間が無く(22px)、標準モード(26px)と違った。
3DOCTYPE は必ず先頭
前に文字が1つあるだけで DOCTYPE が無視され(doctype が null)、後方互換モードになった。コメントは前にあっても標準モードのまま。
後方互換モードでは表の文字の大きさも変わる
body に font-size:20px を付けて、表のセルの文字の大きさを比べました。標準モード・限定後方互換モードでは20pxを受け継ぎ、後方互換モードでは16pxのままでした。 「表の中だけ文字が小さい」「高さ100%が効く・効かない」が、ページによって違うときは、まず DOCTYPE と document.compatMode を見ます。
d0-none {"mode":"BackCompat", "tf":"16px"}
d1-html5 {"mode":"CSS1Compat","tf":"20px"}
d3-401trans-url {"mode":"CSS1Compat","tf":"20px"}
d4-401trans-nourl {"mode":"BackCompat", "tf":"16px"}
DevTools のコンソールで document.compatMode と打つと、開いているページのモードが分かります。MDN は、Firefox では後方互換・限定後方互換のときに開発ツールのコンソールに警告が出る、としています。
HTML5の基本の書き方(雛形・meta charset・省略できるタグ)
この節では、HTML5の最小の雛形と、文字コードの指定を忘れたときに起きること、終了タグを省略したときの動きが分かります。
今のHTMLの雛形は、次の形が基本です。 1行目の DOCTYPE、lang 属性、先頭近くの <meta charset="utf-8"> の3つは、毎回書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページの題名</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<header>…</header>
<main>…</main>
<footer>…</footer>
</body>
</html>
HTML4では <script type="text/javascript"> と書きましたが、今は type を省きます。検証ツールの vnu は「The “type” attribute is unnecessary for JavaScript resources.」と知らせました。雛形の1行ずつの意味は、関連記事「HTMLテンプレートの基本|コピペで使える雛形とheadの書き方を1行ずつ解説」で扱っています。
meta charset を書かないと文字化けした
Python の http.server は Content-type: text/html と、文字コードを付けずに返します。この状態で、<meta charset> の無い UTF-8 のページを開くと、Chromium は windows-1252 として読み、日本語が化けました。
$ curl -sI http://127.0.0.1:46868/p1.html | grep -i content-type
Content-type: text/html
p1(meta charset なし) document.characterSet = windows-1252
<ul><li>一</li><li>二</li></ul>
p2(meta charset あり) document.characterSet = UTF-8
<ul><li>一</li><li>二</li></ul>
サーバーの設定に頼らず、HTMLの中に <meta charset="utf-8"> を書いておくと、どこに置いても同じ文字コードで読まれます。 HTML Living Standard は、meta charset を文書の先頭1024バイト以内に置くことを求めています。
終了タグを省略しても、パーサーが補う
HTML5では、誤りのある HTML をブラウザがどう直すか(パーサーの誤り処理)まで仕様で決まりました。</li> や </p> の省略、入れ子の間違いを含むページを読み込み、Chromium が作った DOM を document.body.innerHTML で取り出しました。
<ul><li>一<li>二</ul>
<p>段落1<p>段落2
<b>太字<i>両方</b>斜体</i>
<table><tr><td>セル</td></tr>表の外に出る文字</table>
<ul><li>一</li><li>二</li></ul>
<p>段落1</p><p>段落2
<b>太字<i>両方</i></b><i>斜体</i>
</p>表の外に出る文字<table><tbody><tr><td>セル</td></tr></tbody></table>
li・pの終了タグは補われた。li・p・td・tr・optionなどは、仕様で終了タグを省略できる要素です。- 入れ子の間違い(
<b><i></b></i>)は、iを2つに分けて正しい入れ子に直された。 - 表の中に直接書いた文字は、表の前に追い出された。
tbodyも自動で足された。
ブラウザが直してくれるのは「表示が壊れない」ためで、書いたとおりの構造になるとは限りません。 表の外に出た文字のように、見た目の位置が変わることがあります。終了タグは省略せずに書き、検証ツールで確かめるのが確実です。
HTML5で追加されたセマンティック要素(header・nav・main・article)
この節では、HTML5で追加された「意味を表す要素」と、それがブラウザの中でどう扱われるかが分かります。
セマンティック要素は、見た目ではなく「その部分の役割」を表す要素です。 見た目はほとんど変わりませんが、スクリーンリーダー(画面の読み上げ)や検索エンジンに、ページの構造を伝えられます。
| 要素 | 役割 | Chromium の display | アクセシビリティツリーの役割 |
|---|---|---|---|
| header | ページや記事の先頭部分 | block | banner(body 直下のとき) |
| nav | 主なナビゲーション | block | navigation |
| main | ページの主な内容(1ページに1つ) | block | main |
| article | それだけで完結する内容(記事・投稿) | block | article |
| section | 見出しを持つまとまり | block | (名前が無いので役割なし) |
| aside | 本筋から外れた補足 | block | complementary |
| footer | ページや記事の末尾 | block | contentinfo(body 直下のとき) |
| figure・figcaption | 図とその説明 | block | figure(名前は figcaption) |
| mark・time | 強調の印・日時 | inline | mark・time |
試験用のページ(header・nav・main・article・section・figure・aside・footer を入れたもの)を、Playwright でアクセシビリティツリーとして取り出した結果です。
- banner:
- heading "サイト名" [level=1]
- navigation:
- link "ホーム":
- /url: /
- main:
- article:
- heading "記事" [level=2]
- heading "節" [level=3]
- paragraph:
- text: 本文
- mark: 強調
- time: 10月29日
- figure "図の説明":
- img "青い四角"
- text: 図の説明
- complementary: 補足
- contentinfo: フッター
汎用の箱(div)だけで同じ見た目を作っても、このツリーには banner・navigation・main などの目印が出ません。 スクリーンリーダーを使う人は、この目印(ランドマーク)を頼りに、ナビゲーションや本文へ移動します。要素ごとの使い分けは、関連記事「HTMLのheader・main・section・articleの違いと使い分け」で扱っています。
details・summary
クリックで開閉する部分。手元では summary をクリックすると open が false から true に変わった。
JavaScript なしで開閉
dialog
ダイアログ。showModal() の前は display:none、後は block・position:fixed になった。
HTML 5.2 で入った
template
表示されない雛形。子ノードは0個で、中身は content(1個)に入っていた。
JavaScript で複製して使う
progress・meter・output
進み具合・測った値・計算結果。アクセシビリティツリーでは progressbar・meter・status になった。
数値を意味つきで表す
すべての要素の一覧と表示例は、関連記事「HTMLタグ一覧表|基本タグから全要素まで表示例・コピペ用コード付き」で扱っています。
HTML5のフォーム部品(input typeと入力チェック)
この節では、HTML5で増えた入力欄の種類と、JavaScript を書かずにブラウザが入力をチェックする様子が分かります。
HTML5では、input の type に date・email・number・range・color などが加わり、required・pattern・min・max を書くだけで、ブラウザが送信前に入力をチェックするようになりました。
<form id="fm">
<input id="i-date" type="date" value="2026-10-29">
<input id="i-email" type="email" value="abc" required>
<input id="i-num" type="number" min="1" max="10" value="20">
<input id="i-range" type="range" min="0" max="100" value="30">
<input id="i-color" type="color" value="#ff8800">
<input id="i-req" type="text" required>
<input id="i-pat" type="text" pattern="[0-9]{3}" value="12a">
<input id="i-list" list="dl"><datalist id="dl"><option value="東京"><option value="大阪"></datalist>
<input id="i-weird" type="foo">
</form>
各欄の type・validity.valid・validationMessage・値・表示の大きさを取り出した結果です。
i-date => date | true | | 2026-10-29 | 125x21
i-email => email | false | Please include an '@' in the email address. 'abc' is missing an '@'. | abc | 185x21
i-num => number | false | Value must be less than or equal to 10. | 20 | 56x21
i-range => range | true | | 30 | 129x16
i-color => color | true | | #ff8800 | 50x27
i-req => text | false | Please fill out this field. | | 185x21
i-pat => text | false | Please match the requested format. | 12a | 185x21
i-list => text | true | | | 185x21
i-weird => text | true | | | 185x21
formValid => false
reportValidity false
- 知らない
type="foo"は、エラーにならずtextとして扱われました。 対応していないブラウザでも、ただのテキスト欄になるだけで壊れません。これが「HTML5のフォームは段階的に使える」と言われる理由です。 - date の値は、表示の形に関係なく
2026-10-29(年-月-日)の形で読めました。valueAsNumberは 1793232000000(UTC の0時のミリ秒)でした。 - 入力チェックの文言は、手元のヘッドレスの Chromium では英語で出ました。文言はブラウザと表示言語で変わるため、文言で判断せず
validityのプロパティ(valueMissing・typeMismatch・rangeOverflowなど)で判断します。 - ブラウザのチェックは送信前の手助けです。サーバー側のチェックは別に必ず書きます。 送信の内容は利用者がいくらでも変えられます。
全22種の type の値の形式と検証結果は、関連記事「HTML input type 一覧|全22種の用途・値の形式・検証結果の早見表」で扱っています。
video・audio・canvas(プラグインなしの動画と描画)
この節では、HTML5で入った video・audio・canvas がブラウザでどう動くかが、取り出した値で分かります。
HTML5より前は、動画・音声・動く絵を出すために、Flash などのプラグインを入れる必要がありました。 HTML5の video・audio はブラウザだけで再生でき、canvas は JavaScript で絵を描く板になります。
video:どの形式を再生できるかは canPlayType で聞く
const v = document.getElementById('v');
['video/mp4; codecs="avc1.42E01E"', 'video/webm; codecs="vp9"',
'video/webm; codecs="av01.0.05M.08"', 'audio/mpeg',
'audio/ogg; codecs="opus"', 'video/x-flv'].map(t => t + ' => "' + v.canPlayType(t) + '"');
video/mp4; codecs="avc1.42E01E" => "probably"
video/webm; codecs="vp9" => "probably"
video/webm; codecs="av01.0.05M.08" => "probably"
audio/mpeg => "probably"
audio/ogg; codecs="opus" => "probably"
video/x-flv => ""
canPlayType は「probably(たぶん再生できる)」「maybe(かもしれない)」「""(再生できない)」の3つで答えます。Flash の動画形式(FLV)は空文字で、再生できませんでした。src の無い video は、readyState が0、幅を160pxにすると高さは150pxで表示されました。
複数の形式を用意するときは、source を並べ、ブラウザが再生できる最初のものを選ばせます。
<video controls width="640" poster="poster.jpg">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
<p>お使いのブラウザは動画を再生できません。<a href="movie.mp4">ダウンロード</a></p>
</video>
自動再生されない原因と直し方は、関連記事「HTML video・audioタグの使い方|自動再生されない原因と対処」で扱っています。
canvas:描いた画素を読み出す
100×50 の canvas に、橙の四角と青い円を描き、3点の画素の色(R・G・B・透明度)を読み出しました。
const c = document.getElementById('cv').getContext('2d');
c.fillStyle = '#ff8800'; c.fillRect(10, 10, 30, 20);
c.fillStyle = '#0066cc'; c.beginPath(); c.arc(70, 25, 15, 0, Math.PI * 2); c.fill();
c.getImageData(20, 20, 1, 1).data; // 四角の中
c.getImageData(70, 25, 1, 1).data; // 円の中心
c.getImageData(2, 2, 1, 1).data; // 何も描いていない所
px1 => [255,136,0,255]
px2 => [0,102,204,255]
px0 => [0,0,0,0]
dataURL => "data:image/png;base64,iVBORw0KGgoAAAANSU… (1346文字)"
#ff8800 は R=255・G=136・B=0 で、描いた色がそのまま読めました。何も描いていない所は透明(0,0,0,0)です。toDataURL() で PNG 画像の文字列にもなります。canvas は描いた結果が画素になるだけで、中の図形は DOM に残りません。 図形をあとから個別に動かしたい、文字として読み上げさせたいときは、SVG のほうが向いています。
Web StorageなどHTML5のAPI(localStorageの実物)
この節では、広い意味のHTML5に含まれる JavaScript の API のうち、よく使う Web Storage の動きと、ほかの API の位置づけが分かります。
Web Storage(localStorage・sessionStorage)は、ブラウザの中に「キーと値」の文字列を保存する仕組みです。 localStorage はタブを閉じても残り、sessionStorage はタブを閉じると消えます。
localStorage.setItem('theme', 'dark');
localStorage.setItem('count', 3); // 数値を入れる
sessionStorage.setItem('tab', 'B');
[localStorage.getItem('theme'), localStorage.getItem('count'),
typeof localStorage.getItem('count'), localStorage.length, localStorage.getItem('nothing')];
localStorage.setItem('obj', {a: 1}); // オブジェクトをそのまま入れる
localStorage.setItem('obj2', JSON.stringify({a: 1}));
ls => ["dark","3","string",2,null]
lsObj => ["[object Object]",1]
quota => "QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'big' exceeded the quota."
quotaN => "9 個(各512K文字)まで: QuotaExceededError"
- 数値の3は文字列の
"3"になって戻りました。値はすべて文字列です。 - オブジェクトをそのまま入れると
"[object Object]"になり、中身が消えました。JSON.stringifyで入れ、JSON.parseで戻します。 - 600万文字を1つ入れると
QuotaExceededErrorになりました。512K文字ずつ入れると9個(約470万文字)までは入り、10個目で同じエラーでした。容量には上限があるので、setItemは try…catch で囲みます。 - Web Storage は、同じページの JavaScript から読めます。パスワードやログインの秘密の値は入れません。
Cookie との違いの実測は、関連記事「localStorage・sessionStorage・Cookieの違い|実測比較」で扱っています。
History API・ドラッグ&ドロップ・Web Workers は HTML Living Standard の中に、WebSocket・fetch は WHATWG の別の標準に、位置情報は W3C の仕様にあります。「HTML5の機能」として紹介される API には、HTML の仕様の外で決められているものも含まれます。調べるときは、MDN の各 API のページの「仕様書」の欄で、どの仕様に載っているかを確かめると迷いません。
HTML5で廃止されたタグは今どうなるか(font・center・marquee)
この節では、HTML4で使えた見た目のための要素が、今のブラウザと仕様でどう扱われるかが、実際に表示した結果で分かります。
HTML Living Standard は、font・center・big・tt・strike・acronym・marquee・applet・frame・frameset などを「entirely obsolete(完全に廃止)」とし、作る人は使ってはいけない(must not be used by authors)としています。 一方で、ブラウザには以前のページを表示するための決まりが残っています。廃止された要素を並べたページを Chromium 153 で開き、要素の種類と計算後のスタイルを取り出しました。
| 要素 | JavaScript での種類 | Chromium での見た目(計算後) | 代わりに使うもの |
|---|---|---|---|
| font color="red" size="5" | HTMLFontElement | 赤・24px(効いた) | CSS の color・font-size |
| center | HTMLElement | block・text-align: -webkit-center(中央) | CSS の text-align・margin |
| big | HTMLElement | 19.2px(大きくなった) | CSS の font-size |
| tt | HTMLElement | monospace・13px | code・kbd・samp か CSS |
| strike | HTMLElement | line-through(取り消し線) | del か s |
| acronym | HTMLElement | title つきで下線 | abbr |
| marquee | HTMLMarqueeElement | inline-block(文字が流れる) | CSS のアニメーション |
| blink | HTMLUnknownElement | ただの文字(点滅しない) | 使わない |
| applet | HTMLUnknownElement | 中の文字が出るだけ | embed・object(Java アプレットは動かない) |
- font・center・big・marquee は、今も見た目どおりに効きました。 仕様が「作る人は使ってはいけない」としつつ、ブラウザには
HTMLFontElement・HTMLMarqueeElementの実装を求めているためです。表示されるからといって、使ってよいわけではありません。 - blink と applet は、Chromium では「知らない要素」(HTMLUnknownElement)で、点滅も Java の実行もしませんでした。
- table の
bgcolor="#ffff00"・width="200"も効き、背景は黄色、幅は200pxでした。属性も、表示はされても検証ツールでは指摘されます(次の節)。
意味を変えて残った要素
b・i・u・s・small は、HTML4では見た目のための要素でしたが、HTML5で意味を決め直して残りました。手元の Chromium では、u は下線、s は取り消し線、small は13.33pxで表示され、vnu も html-validate も指摘しませんでした。
HTML Living Standard では、b は「重要ではないが目立たせたい語」、i は「声や調子が違う部分(専門用語・外国語)」、u は「言葉で表さない注記(つづりの誤りの印など)」、s は「もう正しくない内容」、small は「注意書きなどの小さな注記」と決められています。
強調したいときは strong(重要)と em(強調)を使い、ただ太くしたい・下線を引きたいだけなら CSS で書きます。
HTML5で書けているか検証する(vnu・html-validateの実行結果)
この節では、HTMLが今の仕様どおりに書けているかを確かめる方法と、HTML4の書き方を検証したときに出る文言が分かります。
HTMLの検証には、W3C の「Nu Html Checker」(コマンドでは vnu.jar)が使えます。 作業用の場所に npm の vnu-jar を入れ、Java で実行しました。Web 版の validator.w3.org/nu/ も同じ検証器です(機密を含むページは、手元で実行する方法を選びます)。
npm i vnu-jar html-validate # 作業用のフォルダーで
java -jar node_modules/vnu-jar/build/dist/vnu.jar --stdout h4.html
npx html-validate h4.html
検証したのは、HTML4の書き方で作った次のページです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML4 の書き方</title>
<script type="text/javascript" src="a.js"></script>
</head>
<body bgcolor="#ffffff">
<center><font color="red">お知らせ</font></center>
<table border="0" cellpadding="4" width="100%"><tr><td align="center">表</td></tr></table>
<a name="top">先頭</a>
<img src="px.png">
</body>
</html>
vnu 26.10.12 の出力です(ファイルの場所を省いています)。
1.1-1.102: error: Almost standards mode doctype. Expected “<!DOCTYPE html>”.
6.1-6.42: info warning: The “type” attribute is unnecessary for JavaScript resources.
8.1-8.24: info warning: The “bgcolor” attribute on the “body” element is obsolete. Use CSS instead.
9.1-9.8: error: The “center” element is obsolete. Use CSS instead.
9.9-9.26: error: The “font” element is obsolete. Use CSS instead.
10.1-10.47: info warning: The “cellpadding” attribute on the “table” element is obsolete. Use CSS instead.
10.1-10.47: info warning: The “width” attribute on the “table” element is obsolete. Use CSS instead.
10.52-10.70: info warning: The “align” attribute on the “td” element is obsolete. Use CSS instead.
11.1-11.14: error: Element “a” is missing required attribute “href”.
11.1-11.14: info warning: The “name” attribute on the “a” element is obsolete. Consider putting an “id” attribute on the nearest container instead.
12.1-12.18: error: An “img” element must have an “alt” attribute, except under certain conditions. …
1.103-2.6: info warning: Consider adding a “lang” attribute to the “html” start tag to declare the language of this document.
vnu は、DOCTYPE の種類まで見分けました。 HTML 4.01 Transitional(URLあり)は「Almost standards mode doctype」(準標準モードの DOCTYPE)、URLなしは「Quirky doctype」、DOCTYPE なしは「Start tag seen without seeing a doctype first.」でした。前の節の Chromium の実測と一致します。
html-validate 11.17.0(html-validate:recommended の設定)の出力です。
1:11 error doctype should be "html" doctype-html
2:2 error <html> is missing required "lang" attribute element-required-attributes
6:9 error "type" attribute is unnecessary for javascript resources script-type
8:7 error Attribute "bgcolor" is deprecated on <body> element no-deprecated-attr
9:2 error <center> is deprecated: use CSS instead deprecated
9:10 error <font> is deprecated: use CSS instead deprecated
11:4 error Attribute "name" is deprecated on <a> element no-deprecated-attr
12:2 error <img> is missing required "alt" attribute wcag/h37
コードの見た目をそろえる整形(Prettier など)は、正しさを確かめる検証とは別の作業です。新しいページを作ったら、次の順に確かめると漏れがありません。
- 11行目が <!DOCTYPE html> か前に文字が入っていないか
- 2lang と meta charset があるかmeta charset は先頭1024バイト以内
- 3検証ツールで error が0かvnu か html-validate
- 4compatMode が CSS1Compat かDevTools のコンソールで確かめる
- 5ランドマークが出ているかDevTools のアクセシビリティの表示で header・main・nav を見る
以前のHTMLをHTML5に書き換える手順
書き換えは、表示が変わる所から順に進めます。 DOCTYPE を変えると描画モードが変わり、レイアウトがずれることがあるためです。
今の描画モードを記録する
DevTools のコンソールで document.compatMode を見て、主なページの画面を保存しておく。BackCompat なら、DOCTYPE を変えると見た目が変わる可能性が高い。
DOCTYPE と meta charset を今の形にする
<!DOCTYPE html>・<html lang="ja">・<meta charset="utf-8"> に置き換え、ファイル自体も UTF-8 で保存されているかを確かめる。
見た目の要素・属性を CSS に移す
font・center・bgcolor・align・width などを、クラスと CSS に置き換える。検証ツールの obsolete の指摘が一覧になる。
構造をセマンティック要素にする
ヘッダー・ナビゲーション・本文・フッターに当たる箱を、header・nav・main・footer に置き換える。見た目は変わらない。
プラグインと JavaScript の入力チェックを置き換える
Flash の動画は video に、JavaScript だけの入力チェックは required・type・pattern に。サーバー側のチェックは残す。
DOCTYPEを変えたら表示がずれたとき
img { display: block; } か vertical-align: bottom;、高さ100%は親の html・body にも高さを付ける後方互換モードは以前のブラウザの動きをまねたもので、新しい CSS が仕様どおりに動かないことがある
よくあるエラー・つまずき(原文つき)
この節では、HTML5の書き方でつまずきやすい点と、そのとき出る文言・直し方が一覧で分かります。
| 起きたこと | 出た文言・値(原文) | 原因 | 直し方 |
|---|---|---|---|
| 高さ100%や表の文字の大きさがページで違う | document.compatMode が "BackCompat" |
DOCTYPE が無い・前に文字がある | 1行目に <!DOCTYPE html> |
| 検証で DOCTYPE を指摘された | Almost standards mode doctype. Expected “<!DOCTYPE html>”. | HTML 4.01・XHTML の DOCTYPE | <!DOCTYPE html> に置き換える |
| 日本語が化けた(一 など) | document.characterSet が windows-1252 |
meta charset が無く、サーバーも文字コードを返さない | <meta charset="utf-8"> を先頭近くに |
| font・center を指摘された | The “font” element is obsolete. Use CSS instead. | 廃止された要素 | CSS に移す |
| blink が点滅しない | HTMLUnknownElement(vnu は completely-unknown element) | 今のブラウザは知らない要素として扱う | 使わない(必要なら CSS のアニメーション) |
| 表の外に文字が出た | Misplaced non-space characters inside a table. | table の中に、td の外の文字を書いた | 文字を td・caption の中に入れる |
| 太字と斜体の範囲がずれた | End tag “b” violates nesting rules. | 入れ子の間違い | 開いた順と逆の順に閉じる |
| localStorage に保存できない | QuotaExceededError: … exceeded the quota. | 容量の上限を超えた | 保存する量を減らす・try…catch |
判断表:「HTML5対応」の意味と、どこまで書き換えるか
この節では、「HTML5対応」という表記の今の意味と、手元のページをどこまで直すかの判断の目安が分かります。
今の「HTML5対応」は、ほとんどの場合「Flash などのプラグインを使わず、今のブラウザで動く標準の HTML・CSS・JavaScript で作られている」という意味です。 2014年の W3C の仕様に合わせている、という意味で使われることは少なくなりました。
| 状況 | 判断 | 理由 |
|---|---|---|
| 新しくページを作る | 今のHTML(Living Standard)で書く。「HTML5で書く」と言っても同じ | HTML5という別の書き方は今は無い |
| DOCTYPE が無い・BackCompat | 直す(表示の確認とセットで) | 新しい CSS が仕様どおりに動かないことがある |
| HTML 4.01 Strict・XHTML Strict で、表示に問題が無い | DOCTYPE だけ変えるのは急がなくてよい。改修のときに直す | 描画は標準モードで、今のHTMLと同じ |
| Transitional(限定後方互換) | 改修のときに直す。表の中の画像のすき間を確かめる | 違いは画像の下のすき間など、ごく一部 |
| font・center・bgcolor が多い | 新しく直す所から CSS に移す | 表示はされるが、保守と検証の妨げになる |
| Flash・Java アプレットを使っている | すぐ置き換える | 今のブラウザでは動かない(applet は知らない要素になった) |
| 仕様を調べたい | HTML Living Standard と MDN を見る | W3C の HTML5(5.0〜5.2)は引退している |
よくある質問
Q. HTML5とは何ですか? A. HTMLの第5版で、2014年10月28日に W3C の勧告になりました。DOCTYPE の簡略化、header・nav・main などのセマンティック要素、video・audio・canvas、入力チェックつきのフォーム、Web Storage などが入りました。今は HTML Living Standard に引き継がれています。
Q. HTML5とHTMLの違いは何ですか? A. HTML は言葉全体の名前で、HTML5 はその版の1つです。一般に「違い」と言うときは、HTML4(1999年)との違いを指します。DOCTYPE・文字コードの指定が短くなり、意味を表す要素と、動画・描画・フォームの機能が増えました。
Q. HTML5は廃止されたのですか? A. W3C の仕様としての HTML5(5.0)は2018年3月27日に、HTML 5.2 は2021年1月28日に「Retired(引退)」になりました。HTML という言葉がなくなったのではなく、WHATWG の HTML Living Standard が唯一の標準になった、という意味です。HTML5の書き方は、そのまま今のHTMLとして使えます。
Q. HTML6は出ますか? A. 2026年10月29日時点で、HTML6 という版を作る予定は WHATWG・W3C の公式な資料にありません。HTML Living Standard は版の番号を付けずに更新を続ける方式で、新しい要素や属性はその中に少しずつ追加されます。
Q. DOCTYPEは書かないといけませんか?
A. 書きます。書かないとブラウザは後方互換モードになり、手元の実測では、単位の無い width:100 が効いたり、height:100% が画面の高さまで伸びたりと、CSS の仕様と違う動きになりました。
Q. font や center はもう表示されないのですか? A. 今の Chromium でも表示されました(font の赤・24px、center の中央寄せ)。仕様は「作る人は使ってはいけない」としていますが、以前のページのためにブラウザには対応が残っています。新しく書くときは CSS を使います。
Q. HTML5とCSS3は同じものですか? A. 別の仕様です。HTML は内容と構造、CSS は見た目を受け持ちます。CSS3 は CSS を機能ごとのモジュールに分けて作るようになった時期の呼び名で、広い意味の「HTML5」には CSS3 と JavaScript の API が含まれることがあります。
Q. HTML5は何から学べばよいですか? A. 雛形(DOCTYPE・head)→ 見出し・段落・リスト・リンク・画像 → セマンティック要素 → フォーム → 表 → CSS の基本、の順が分かりやすいです。書いたら検証ツールに通し、DevTools で DOM とアクセシビリティツリーを見る習慣を付けると、間違いに早く気づけます。
まとめ
- HTML5はHTMLの第5版で、2014年10月28日に W3C の勧告になった。2019年の合意で、今は WHATWG の HTML Living Standard が唯一の標準。「HTML5」は今のHTMLを指す呼び名として使われる。
- HTML4との主な違いは、短い DOCTYPE と meta charset、セマンティック要素、video・audio・canvas、入力チェックつきのフォーム、Web Storage などの API、パーサーの誤り処理の標準化。
- Chromium 153 の実測では、DOCTYPE なし・HTML 4.01 Transitional(URLなし)・DOCTYPE の前に文字があるページは後方互換モード(BackCompat)、Transitional(URLあり)・XHTML 1.0 Transitional は限定後方互換モードになり、画像の下のすき間・高さ100%・表の文字の大きさが変わった。
- font・center・big・marquee は今も表示されるが、仕様では「作る人は使ってはいけない」。blink・applet は知らない要素になった。vnu と html-validate で一覧にでき、CSS や abbr・del・s へ置き換える。
- 新しく作るときは
<!DOCTYPE html>・lang・meta charsetを書き、検証ツールとdocument.compatMode・アクセシビリティツリーで確かめる。
次に読むとよい記事です。要素の全体像は関連記事「HTMLタグ一覧表|基本タグから全要素まで表示例・コピペ用コード付き」、フォームは関連記事「HTML input type 一覧|全22種の用途・値の形式・検証結果の早見表」で扱っています。改行の書き方(br・p・pre)や、崩れたHTMLの整形の方法も、同じ技術ブログの記事「HTMLの改行」「HTMLを整形する方法」で扱っています。
参考・出典
確認日はいずれも 2026年10月29日です。
- WHATWG「HTML Living Standard」1 Introduction(1.2 Is this HTML5?・1.6 History):https://html.spec.whatwg.org/multipage/introduction.html
- WHATWG「HTML Living Standard」16 Obsolete features:https://html.spec.whatwg.org/multipage/obsolete.html
- WHATWG「FAQ」:https://whatwg.org/faq
- W3C「HTML5 A vocabulary and associated APIs for HTML and XHTML」W3C Recommendation 28 October 2014:https://www.w3.org/TR/2014/REC-html5-20141028/
- W3C「HTML5」仕様の履歴:https://www.w3.org/standards/history/html5
- W3C「HTML 5.2」仕様の履歴:https://www.w3.org/standards/history/html52
- W3C「HTML 5.2」Superseded Recommendation(2021年1月28日):https://www.w3.org/TR/2021/SPSD-html52-20210128/
- W3C ブログ「HTML5 is a W3C Recommendation」(2014年11月1日):https://www.w3.org/blog/2014/html5-is-a-recommendation/
- W3C ブログ「W3C and WHATWG to work together to advance the open Web platform」(2019年5月28日):https://www.w3.org/blog/2019/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/
- W3C「Memorandum of Understanding Between W3C and WHATWG」:https://www.w3.org/2019/04/WHATWG-W3C-MOU.html
- W3C ニュース「HTML Review Draft — Published 29 January 2020 is a W3C Recommendation」(2021年1月28日):https://www.w3.org/news/2021/html-review-draft-published-29-january-2020-is-a-w3c-recommendation/
- MDN「後方互換モードと標準準拠モード」:https://developer.mozilla.org/ja/docs/Web/HTML/Guides/Quirks_mode_and_standards_mode
- The Nu Html Checker(vnu):https://validator.github.io/validator/
- html-validate:https://html-validate.org/
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
(記載例)出典:株式会社RJC「HTML5とは|HTMLとの違い・今の標準と描画モードを実測」
株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。
WE ARE HIRING
RJCで一緒に開発しながら、
成長を楽しみませんか?
RJCは、Web・モバイル・AIを活用した開発プロジェクトで、テックリードやPM・PMOも活躍するシステム開発会社です。会社を知る、待遇を確かめる、話を聞いてみる。気になるところ見てみてください!
- 127日年間休日
- 12時間平均残業時間
- 毎日ガチャ遊びココロも大切にする福利厚生。アマギフなどの賞品ラインナップ!
ほかにも、チケットレストラン、書籍読み放題、2年ごとの慰労報奨(休暇 or 金一封)、11期連続の黒字決算。