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は豊かなウェブコンテンツをキャリアするために特別に設計され、追加のプラグイン無しで動作します。

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

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

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>