結論

HTML5は、HTML4(1999年)の次に作られたHTMLの版で、2014年にW3Cの勧告になりました。今は版の番号を付けない「HTML Living Standard」(WHATWGが更新し続ける1つの仕様)が唯一の標準で、「HTML5」は今のHTMLを指す呼び名として使われています。

この記事でわかること

  • HTML4との違いと、W3C・WHATWGの経緯(2004〜2021年)
  • DOCTYPEの書き方9通りで描画モードが変わる実物(Chromium)
  • 新しい要素・フォーム・canvas・Web Storageと、廃止された要素の今の扱い

2026年10月29日更新|Chromium 153・vnu 26.10.12・html-validate 11.17.0で実行確認

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」と同じ意味です。

1行今の DOCTYPE<!DOCTYPE html> だけ
3種類ブラウザの描画モードDOCTYPE で決まる(MDN)
9通り試した DOCTYPEChromium 153 で実測

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の仕様を調べるとき

避ける「HTML5の仕様」として、W3C の2014年の勧告(REC-html5-20141028)を読んで、今の動きを判断する
→
代わりにhtml.spec.whatwg.org の HTML Living Standard と、MDN の各要素のページ(ブラウザの対応表つき)を見る

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の違いと使い分け」で扱っています。

1

details・summary

クリックで開閉する部分。手元では summary をクリックすると open が false から true に変わった。

JavaScript なしで開閉

2

dialog

ダイアログ。showModal() の前は display:none、後は block・position:fixed になった。

HTML 5.2 で入った

3

template

表示されない雛形。子ノードは0個で、中身は content(1個)に入っていた。

JavaScript で複製して使う

4

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 など)は、正しさを確かめる検証とは別の作業です。新しいページを作ったら、次の順に確かめると漏れがありません。

  1. 11行目が <!DOCTYPE html> か前に文字が入っていないか
  2. 2lang と meta charset があるかmeta charset は先頭1024バイト以内
  3. 3検証ツールで error が0かvnu か html-validate
  4. 4compatMode が CSS1Compat かDevTools のコンソールで確かめる
  5. 5ランドマークが出ているかDevTools のアクセシビリティの表示で header・main・nav を見る

以前のHTMLをHTML5に書き換える手順

書き換えは、表示が変わる所から順に進めます。 DOCTYPE を変えると描画モードが変わり、レイアウトがずれることがあるためです。

1

今の描画モードを記録する

DevTools のコンソールで document.compatMode を見て、主なページの画面を保存しておく。BackCompat なら、DOCTYPE を変えると見た目が変わる可能性が高い。

2

DOCTYPE と meta charset を今の形にする

<!DOCTYPE html>・<html lang="ja">・<meta charset="utf-8"> に置き換え、ファイル自体も UTF-8 で保存されているかを確かめる。

3

見た目の要素・属性を CSS に移す

font・center・bgcolor・align・width などを、クラスと CSS に置き換える。検証ツールの obsolete の指摘が一覧になる。

4

構造をセマンティック要素にする

ヘッダー・ナビゲーション・本文・フッターに当たる箱を、header・nav・main・footer に置き換える。見た目は変わらない。

5

プラグインと JavaScript の入力チェックを置き換える

Flash の動画は video に、JavaScript だけの入力チェックは required・type・pattern に。サーバー側のチェックは残す。

DOCTYPEを変えたら表示がずれたとき

避ける表示を戻すために、DOCTYPE を消して後方互換モードのまま使い続ける
→
代わりにずれた所の CSS を直す。画像の下のすき間は 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期連続の黒字決算。

ABOUT RJC RJCがどんな会社か知る 考え方、研修、働き方、福利厚生、社員の前職まで。RJCのことが丸わかり! RJC丸わかりページへ JOB DESCRIPTION 仕事内容・待遇を見てみる 仕事内容、給与・待遇、選考の流れ。経験者も未経験も!応募前に知りたいこと、まとめました! 募集要項を見る ENTRY エントリーする エントリーは1〜2分・履歴書不要です。まずは話を聞いてみたい、という方でも歓迎です! エントリーフォームへ
参加受付中

AI駆動開発、 無料セミナー