Webフロントエンド - 基礎

HTML5 えいちてぃーえむえるふぁいぶ

マークアップ言語セマンティクスCanvasWeb APIレスポンシブデザインW3C

HTML5について教えて

簡単に言うとこんな感じ！

Webページを作るための「設計図の書き方ルール」の最新版だよ！「ここが見出し」「ここがナビメニュー」って意味まで書けるようになったし、動画や音声もプラグインなしで再生できるようになったんだ！

HTML5とは

HTML（HyperText Markup Language） はWebページの構造を記述するための言語で、HTML5 はその第5世代の仕様です。2014年にW3C（World Wide Web Consortium）が正式勧告し、それまでのHTML4.01やXHTMLから大きく進化しました。「文書の構造を書く言語」から「Webアプリケーションのプラットフォーム」へと役割が拡張されたことが最大の特徴です。

HTML5以前は、動画再生・アニメーション・位置情報取得といった高度な機能を実現するためにFlashやJavaアプレットなどのプラグインが必要でした。HTML5はこれらの機能をブラウザ標準機能として取り込み、プラグインなしで動作する豊かなWebアプリを実現できるようにしました。スマートフォンの普及とともに「プラグインが使えないモバイルブラウザでも高機能なWebを」という要求を満たす形で急速に普及しています。

実務の観点では、HTML5はWebシステムの発注・選定において「動作環境の前提条件」となります。モダンブラウザ（Chrome・Edge・Firefox・Safari）はほぼすべてHTML5に対応しており、今日開発されるWebアプリの事実上の標準基盤です。

HTML5の主要な新機能と構造

HTML5の進化は大きく「意味的な構造（セマンティクス）」「マルチメディア対応」「Web API群」の3軸で整理できます。

カテゴリ	主な機能・要素	説明
セマンティクス	`<header>` `<nav>` `<main>` `<article>` `<footer>`	ページの「意味」を明示するタグ
マルチメディア	`<video>` `<audio>` `<canvas>`	プラグイン不要で動画・音声・描画
フォーム強化	`<input type="date">` `<input type="email">` `<datalist>`	入力補助・バリデーション内蔵
グラフィクス	SVG（ベクター）/ Canvas（ビットマップ）	図形・グラフ・ゲームの描画
Web API	Geolocation / Web Storage / WebSocket / History API	ブラウザで使える高度な機能群
オフライン対応	Service Worker / Cache API	ネット接続なしでも動作

セマンティクスの覚え方

「セマンティクス（semantics）＝意味論」と覚えましょう。以前は <div id="header"> のように「見た目の区切り」しか書けませんでしたが、HTML5では <header> と書くことで「ここはヘッダーである」という意味をコンピュータ（検索エンジン・スクリーンリーダー）に伝えられます。SEO（検索順位）やアクセシビリティ（障害者対応）に直結するポイントです。

HTML4とHTML5の主な違い

比較項目	HTML4 / XHTML	HTML5
動画再生	Flash等プラグイン必須	`<video>`タグで標準対応
ページ構造	`<div>`で代用	`<header>` `<nav>` 等専用タグ
フォーム入力	テキストボックス中心	日付・メール・スライダー等
ローカル保存	Cookie（4KB制限）	localStorage（5MB程度）
スマホ対応	想定外	モバイルファーストで設計
文書型宣言	長い記述が必要	`<!DOCTYPE html>` のみ

歴史と背景

1991年 — Tim Berners-LeeがHTMLを発明。最初は研究者向けの文書共有ツール
1997年 — HTML4.0がW3C勧告。Webの商業化とともに普及
1999年 — HTML4.01が勧告。以降、W3CはXHTMLへ移行を推進
2004年 — Mozilla・Apple・Opera がWHATWG（Web Hypertext Application Technology Working Group）を結成。「Web開発者の実態に即した仕様策定」を開始
2007年 — W3CがWHATWGの作業を取り込みHTML5の策定を開始
2010年頃 — Apple社のSteve JobsがiPhoneでFlashを拒否→「HTML5で代替できる」として注目が爆発的に高まる
2014年 — W3CがHTML5を正式勧告
2016年 — HTML5.1勧告
2017年 — HTML5.2勧告
2019年以降 — W3CとWHATWGが協力し、「HTML Living Standard」として継続的に更新される形式へ移行。バージョン番号より仕様の継続更新が主流に

HTML・CSS・JavaScriptの関係

WebフロントエンドはHTML5単体ではなく、3つの技術の組み合わせで成立しています。よく「家を建てる」に例えられます。

HTML5はあくまで「構造の記述」を担当し、デザインはCSS、インタラクティブな動作はJavaScriptが受け持ちます。発注時に「HTML5で作って」と言うと、通常はこの3点セットを指すことがほとんどです。

フレームワークとの関係

現代のWeb開発ではHTML5を直接書くだけでなく、React・Vue・AngularなどのJavaScriptフレームワークが生成するHTMLとしてHTML5が使われます。発注仕様書に「React使用」と書かれていても、最終的にブラウザが解釈するのはHTML5です。

規格・RFC番号	内容
HTML Living Standard	WHATWGによる現行のHTML仕様（継続更新）
W3C HTML5勧告	W3CによるHTML5の正式勧告（2014年）
RFC 2854	text/htmlメディアタイプの定義
RFC 9110	HTTP Semantics（HTMLを配信するHTTPの基盤仕様）