「HTMLという言葉は知っているけれど、5が付くと何が違うの？」「今さら聞けない基本を知りたい」と感じている方も多いのではないでしょうか。
HTML5は、インターネット上のWebページを形作る「骨組み」の世界標準規格であり、私たちが日常的にスマートフォンやパソコンで動画を見たり、Webアプリを快適に利用したりできる基盤を作った立役者です。
この記事では、HTML5とは何かという基本から、従来のHTMLと比べた進化ポイント、代表的な新タグや基本構造までを分かりやすく整理して解説します。
HTML5とは？Webページの骨組みを作る世界標準言語
HTML5（エイチ・ティー・エム・エル・ファイブ）とは、Webページを作成するためのマークアップ言語「HTML（HyperText Markup Language）」の第5世代バージョンです。
Webサイトは基本的に、文章の骨組みを作る「HTML」、見た目やデザインを整える「CSS」、動きや機能をつける「JavaScript」の3つが組み合わさって動いています。その中でもHTMLは、見出しや段落、リンク、画像などの「文書構造」をコンピュータやブラウザに伝える最も根幹となる役割を担っています。
Webを構成する3大言語の役割分担
- HTML（HTML5）：骨組みを作る（どこが見出しで、どこが本文かを定義）
- CSS：見た目を飾る（文字色、レイアウト、余白、装飾）
- JavaScript：動きをつける（ポップアップ、アニメーション、通信処理）
HTML5は2014年10月に標準化団体W3Cによって正式勧告されました。それまでの「HTML 4.01」や「XHTML 1.0」と比べて、現代の多様なデバイス（スマートフォン、タブレット）や高速なインターネット環境に最適化されたのが大きな転換点です。
なお、現在ではW3C勧告としてのバージョン番号運用は一段落し、WHATWGというブラウザ開発者団体が主導する「HTML Living Standard」へと引き継がれています。ただし、HTML5で確立された基本設計や新タグ、API思想は、現在のWeb開発でも標準中の標準としてそのまま活きています。
HTML5で進化した3つの重要ポイント
従来のHTMLと比べて、HTML5は何が画期的だったのでしょうか。大きな進化は主に3つの側面に集約されます。
HTML5で向上したセマンティック構造・メディア再生・アプリ対応の全体像
意味を持つ構造タグの導入（セマンティックWeb）
HTML5の最も分かりやすい特徴のひとつが、「意味を持つタグ（セマンティックタグ）」の拡充です。
従来のHTML 4.01時代は、ページのパーツを分けるために <div class="header"> や <div class="footer"> のように、意味を持たない汎用グループタグである <div> を大量に使い分けるしかありませんでした。
HTML5では、文書構造そのものを表す専用タグが標準で用意されました。
HTML5で追加された主要セマンティックタグ
<header>：ページのヘッダー部分や導入エリア<nav>：主要なナビゲーションメニュー<main>：ページ固有の主要コンテンツ（1ページに1つ）<article>：それ単体で完結した記事コンテンツ（ブログ記事など）<section>：意味のまとまりを持つ章・節・セクション<aside>：サイドバーや関連補足情報<footer>：フッター部分（著作権表示や会社情報など）
これらのタグを使うことで、ブラウザだけでなくGoogleなどの検索エンジンや音声読み上げスクリーンリーダーが、「どこが記事本文で、どこが補助メニューなのか」を正確に把握できるようになり、SEOやアクセシビリティの向上に直結します。
プラグイン不要の動画・音声・グラフィック再生
HTML5以前のWebでは、ブラウザ上で動画を再生したりゲームを動かしたりするために「Adobe Flash Player」などの外部プラグインを別途インストールする必要がありました。
しかしプラグイン方式には、「セキュリティの脆弱性が頻発する」「動作が重くバッテリーを消耗する」「スマートフォンのブラウザ（特にiPhoneのSafari）で動作しない」といった深刻な課題がありました。
HTML5では、ブラウザ自体が標準でメディアを再生できる仕組みが導入されました。
<video>タグ：外部プラグインなしで動画を直接再生<audio>タグ：ブラウザ上で直接音声を再生<canvas>タグ：JavaScriptを使ってブラウザ上で動的なグラフィックやゲーム画面を描画
これにより、YouTubeをはじめとする動画サイトがプラグイン不要でどの端末でも快適に視聴できるようになり、Flashのサポート終了とともに現代の高速で安全なWeb環境が完成しました。
スマートフォン・Webアプリへの対応強化
HTML5は「文書を表示する」だけでなく、「Web上で動くアプリケーションを作る」ことを強く意識して設計されました。
Webアプリを支えるHTML5の主な機能
- 高機能な入力フォーム：
type="email"やtype="tel"、type="date"を指定するだけで、スマホ操作時に最適なキーボード（数字キーや@付きキー）が自動で開き、入力必須チェック（required）もHTMLだけで手軽に実装可能 - ローカルストレージ（Web Storage）：従来のCookieよりも大容量のデータを安全にブラウザ内に保存でき、ログイン状態の維持や下書き自動保存などに活躍
- 各種Web API連携：GPS位置情報を取得するGeolocation API、ドラッグ＆ドロップ機能、オフラインキャッシュ機能など、ネイティブアプリに近い高度な操作を実現
HTML5の基本コードと書き方
HTML5では、これまでのHTMLに比べてコードの書き方自体も大幅にシンプルになりました。
特に顕著なのが文書型宣言（DOCTYPE宣言）です。HTML 4.01時代は「どの定義に従うか」を複雑なURL付きで長く記述する必要がありましたが、HTML5ではたった1行、<!DOCTYPE html> と書くだけで完了します。
以下は、HTML5で記述されたもっとも標準的なWebページの基本テンプレートです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルのWebページ</title>
</head>
<body>
<header>
<h1>サイトのタイトル</h1>
<nav>
<ul>
<li><a href="#about">サイト概要</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>記事の見出し</h2>
<p>ここに本文の文章を記述します。HTML5では意味のある構造タグで整理します。</p>
</article>
</main>
<footer>
<p>© 2026 eguchi.net</p>
</footer>
</body>
</html>各行の重要なポイント
<!DOCTYPE html>：この文書がHTML5であることをブラウザに宣言<meta charset="UTF-8">：日本語などの文字化けを防ぐ文字エンコーディング指定<meta name="viewport" content="...">：スマートフォンなどの画面幅に応じて適切に表示するための必須指定
押さえておきたいHTML5の代表的なタグまとめ
Webサイト制作で頻出するHTML5タグをカテゴリ別に一覧で整理しました。
| タグ名 | 役割・意味 | 利用シーン |
|---|---|---|
<header> |
ヘッダー領域 | ロゴやサイト名、導入部分を囲む |
<nav> |
主要ナビゲーション | グローバルメニューや目次リンク |
<main> |
主要コンテンツ | ページ独自のメイン本文領域（1ページ1回） |
<article> |
自己完結した記事 | ブログ記事やニュース記事の1単位 |
<section> |
章・節・セクション | 見出しを含む意味のひとまとまり |
<aside> |
サイドバー・補足情報 | サイドバーや関連リンクの配置 |
<footer> |
フッター領域 | 著作権表記、会社概要リンクなど |
<video> / <audio> |
動画・音声の再生 | 動画ファイルや音声ファイルの埋め込み |
<figure> / <figcaption> |
図表とキャプション | 画像やグラフと説明文のグループ化 |
まとめ：HTML5はすべてのWebサイトの土台
HTML5は、単にバージョンが上がっただけではなく、Webを「文章の静的な閲覧」から「マルチメディアでインタラクティブなアプリケーション」へと進化させた大きな節目でした。
意味を持ったセマンティックタグを意識してマークアップすることで、検索エンジンにも読者にも親切で分かりやすいWebサイトを作ることができます。
これからWeb制作やブログのカスタマイズ、プログラミングを学ぶ方は、まずは基本となる骨組みの役割を理解し、実際にコードに触れてみることからスタートしてみましょう。
