HTML5の概要
HTML
HTML5はHTMLの最新の改訂版であり、2014年10月に万維網協会（W3C）によって標準が制定されました。
HTML5の設計目的は、モバイルデバイス上でマルチメディアをサポートすることです。
HTML5は簡単で学びやすいです。
HTML5とは何ですか？
HTML5は次世代のHTML標準です。
HTML4.01の前のバージョンは1999年に誕生しました。それ以来、Webの世界は大きな変化を遂げました。
HTML5はまだ完全には完成していませんが、ほとんどのモダンブラウザはすでにいくつかのHTML5機能をサポートしています。
HTML5の始まりは？
HTML5はW3CとWHATWGの協力の結果です。WHATWGはWeb Hypertext Application Technology Working Groupの略です。
WHATWGはWebフォームとアプリケーションに取り組んでおり、W3CはXHTML 2.0に焦点を当てていました。2006年に両者は協力してHTMLの新しいバージョンを作成することを決定しました。
HTML5の新しい特徴
HTML5には以下のようないくつかの興味深い新機能があります：
- 描画のための
<canvas>要素 - メディア再生のための
<video>および<audio>要素 - ローカルオフラインストレージのより良いサポート
- 新しいコンテンツ特定要素（例：
<article>,<footer>,<header>,<nav>,<section>） - 新しいフォームコントロール（例：
calendar,date,time,email,url,search）
HTML5 <!DOCTYPE>
<!DOCTYPE>宣言はHTML5文書の最初の行に必ず配置し、非常にシンプルに使用します：
最小のHTML5文書
以下はシンプルなHTML5文書の例です：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文書のタイトル</title>
</head>
<body>
文書の内容......
</body>
</html>注意：日本語のウェブページでは<meta charset="utf-8">を使用してエンコーディングを宣言する必要があります。さもないと文字化けが発生します。
HTML5の改善点
- 新しい要素
- 新しい属性
- 完全なCSS3サポート
- VideoとAudio
- 2D/3Dグラフィック
- ローカルストレージ
- ローカルSQLデータ
- Webアプリケーション
HTML5マルチメディア
HTML5を使用すると、簡単にウェブページに動画（<video>）や音声（<audio>）を再生できます。
- HTML5
<video> - HTML5
<audio>
HTML5アプリケーション
HTML5を使用すると、簡単にアプリケーションを開発できます。
- ローカルデータストレージ
- ローカルファイルアクセス
- ローカルSQLデータ
- キャッシュマニフェスト
- JavaScript Worker
- XMLHttpRequest 2
HTML5グラフィック
HTML5を使用すると、簡単にグラフィックを描画できます：
<canvas>要素の使用- インラインSVGの使用
- CSS3 2D変換およびCSS3 3D変換の使用
HTML5の使用とCSS3
- 新しいセレクタ
- 新しい属性
- アニメーション
- 2D/3D変換
- 角丸
- 影効果
- ダウンロード可能なフォント
CSS3の詳細については、当サイトのCSS3チュートリアルを参照してください。
セマンティック要素
HTML5には多くのセマンティック要素が追加されました。以下はその一部です：
| タグ | 説明 |
|---|---|
<article> |
ページの独立したコンテンツ領域を定義します。 |
<aside> |
ページのサイドバーコンテンツを定義します。 |
<bdi> |
テキストの方向設定を親要素から分離して設定できるようにします。 |
<command> |
コマンドボタン（ラジオボタン、チェックボックス、ボタンなど）を定義します。 |
<details> |
ドキュメントの詳細情報を記述します。 |
<dialog> |
ダイアログボックス（例えば、プロンプト）を定義します。 |
<summary> |
<details>要素のタイトルを含みます。 |
<figure> |
独立したフローコンテンツ（画像、図表、写真、コードなど）を規定します。 |
<figcaption> |
<figure>要素のキャプションを定義します。 |
<footer> |
セクションまたはドキュメントのフッターを定義します。 |
<header> |
ドキュメントのヘッダー領域を定義します。 |
<mark> |
ハイライトされたテキストを定義します。 |
<meter> |
測定値を定義します（最大値と最小値が既知の測定にのみ使用されます）。 |
<nav> |
ナビゲーションリンクの部分を定義します。 |
<progress> |
タスクの進行状況を定義します。 |
<ruby> |
ルビ注釈（日本語のふりがなや文字）を定義します。 |
<rt> |
文字の解釈や発音を定義します。 |
<rp> |
ルビ注釈をサポートしていないブラウザで表示される内容を定義します。 |
<section> |
ドキュメントのセクション（区画）を定義します。 |
<time> |
日付や時間を定義します。 |
<wbr> |
テキストの適切な改行位置を指定します。 |
HTML5フォーム
新しいフォーム要素、新しい属性、新しい入力タイプ、自動検証機能があります。
削除された要素
以下のHTML4.01要素はHTML5では削除されました：
<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike>
各章の例
私たちのHTMLエディターを使用すると、HTMLを編集して結果を確認するためのボタンをクリックできます。
例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>japanitguide.com</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="/movie.mp4" type="video/mp4">
あなたのブラウザはvideoタグをサポートしていません。
</video>
</body>
</html>試してみてください。ボタンをクリックして結果を確認できます。
HTML5のブラウザサポート
最新バージョンのSafari、Chrome、Firefox、およびOperaは、いくつかのHTML5機能をサポートしています。Internet Explorer 9もいくつかのHTML5機能をサポートしています。
Internet Explorer 9以下のバージョンのブラウザでHTML5を互換性を持たせるためには、静的リソースのhtml5shivパッケージを使用します：
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<![endif]-->読み込み後、新しいタグのCSSを初期化します：
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}関連するQ&A
Q1: HTML5の主な新機能は何ですか？
A1: HTML5には新しいタグ（<article>, <footer>, <header>など）、マルチメディアサポート（<video>, <audio>）、ローカルストレージ、セマンティックタグ、新しいフォーム要素などが含まれます。
Q2: HTML5はどのブラウザでサポートされていますか？
A2: 最新バージョンのSafari、Chrome、Firefox、Opera、そしてInternet Explorer 9がHTML5の機能をサポートしています。
Q3: HTML4.01からHTML5に移行する際に削除された要素は何ですか？
A3: HTML5では、<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <strike>などの要素が削除されました。