HTML5 入門

各章のHTML5の例

例

<!DOCTYPE html>
<html>
<body>
<video width="420" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
 あなたのブラウザはvideoタグをサポートしていません。
</video>
</body>
</html>

実際に試してみる

「実際に試してみる」をクリックして、この例がどのように動作するかを確認してください。

HTML5とは何ですか？

HTML5は最新のHTML標準です。

HTML5は豊かなWebコンテンツをホストするために特別に設計されており、追加のプラグインは必要ありません。

HTML5には新しい意味、グラフィックス、およびマルチメディア要素があります。

HTML5は新しい要素と新しいAPIを提供し、Webアプリケーションの構築を簡素化します。

HTML5はプラットフォームに依存せず、PC、タブレット、スマートフォン、テレビなど、さまざまな種類のハードウェア上で動作するように設計されています。

注記：以下の章では、古いバージョンのブラウザがHTML5を処理する方法を「助ける」方法を学びます。

HTML5の中の新しいコンテンツは何ですか？

HTML5の新しいドキュメントタイプ（DOCTYPE）の宣言も非常にシンプルです：

<!DOCTYPE html>
新しい文字エンコーディング（charset）の宣言も非常にシンプルです：
<meta charset="UTF-8">

HTML5 インスタンス：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ドキュメントのタイトル</title>
</head>
<body>
ドキュメントの内容......
</body>
</html>

注記：HTML5ではデフォルトの文字エンコーディングはUTF-8です。

HTML5 - 新しい属性文法

HTML5 スタンダードは4種類の異なる属性文法を許可しています。

この例では、<input> タグで使用される異なる文法を示しています：

タイプ 例
空 <input type="text" value="Bill Gates" disabled>
クォートなし <input type="text" value=Bill Gates>
ダブルクォート <input type="text" value="Bill Gates">
シングルクォート <input type="text" value='Bill Gates'>

HTML5 标準では、属性の必要に応じて、4 種の文法を使用する可能性があります。

HTML5 - 新しい機能

HTML5 がもたらす最も面白い新しい機能：

  • 新しい意味の要素、例えば <header>、<footer>、<article>、<section> など。
  • 新しいフォームコントロール、例えば数値、日付、時間、カレンダー、スライダーなど。
  • 強力な画像サポート（<canvas> と <svg> を通じて）
  • 強力なマルチメディアサポート（<video> と <audio> を通じて）
  • 強力な新しい API、例えばローカルストレージを使用してクッキーを置き換える。

HTML5 - 削除された要素

以下の HTML 4.01 要素は HTML5 から削除されました：

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>