HTML/HTML5
< HTML
ナビゲーションに移動
検索に移動
HTML5（エイチティーエムエルファイブ）とは、HTML 4.01の後継として2014年に勧告された規格である。
目次
HTML4.01からの変更点[編集]
構造の改善[編集]
人が見てもコンピュータが見ても解読しやすい構造とするため、デザインに関係する部分はスタイルシートに記述し、要素や属性でデザインを指定することはしないという姿勢がより徹底された。そのためfont要素やcenter要素などいくつかの要素が廃止され、table要素におけるwidth属性やalign属性なども廃止された。HTML4.01で非推奨であったb要素やu要素などは存続しているが、要素の意味づけが変更されている。header, footer, section, navなどセクショニング要素が新たに追加され、文書構造をより簡潔に記述できるようになった。
マルチメディアへの対応[編集]
マルチメディアへの対応も目的の一つであり、audio, video, embedなどの要素が追加された。
HTML5ソースのサンプル[編集]
<!DOCTYPE html>
<html lang="ja">
<head>
<title>簡単なページ</title>
</head>
<body>
<header>
<h1>簡単なページ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">このサイトについて</a></li>
<li><a href="#">実績</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>はじめに</h2>
<p>このサイトは簡単なページのサンプルです。</p>
</section>
</main>
</body>
</html>
audio要素とvideo要素[編集]
audio要素はオーディオを再生、video要素は動画を再生する。embed要素やobject要素による埋め込みと異なり、この方法ではプラグインを介さずブラウザの機能で直接マルチメディアの再生を行うことが出来る。ただし、ブラウザにより対応フォーマットは異なる。
<!-- audio要素の場合 -->
<audio autobuffer="true" autoplay="true" controls="true">
<source src="example.ogg" type="audio/ogg">
<source src="example.mp3" type="audio/mp3">
（ここに未対応環境への代替コンテンツ）
</audio>
<!-- video要素の場合 -->
<video width="320" height="240" autobuffer="true" autoplay="true" controls="true">
<source src="file.ogv" type="video/ogg">
<source src="file.mp4" type="video/mp4">
（ここに未対応環境への代替コンテンツ）
</audio>
対応フォーマット[編集]
| 動画ファイル | 動画ファイル | |||||
|---|---|---|---|---|---|---|
| Ogg | MP3 | WAVE | AAC | Ogg | H.264 | |
| Mozilla Firefox 3.6 | ○ | - | ○ | - | ○ | - |
| Google Chrome 4 | ○ | ○ | - | ○ | ○ | ○ |
| Safari 4 | - | ○ | ○ | ○ | - | ○ |
| Opera 10.50 | ○ | - | ○ | - | ○ | - |
canvas要素[編集]
canvas要素はダイナミックなビットマップ（ベクター）画像を描画する。2次元コンピュータグラフィックスはSVG、3次元コンピュータグラフィックスはWebGLを用いて実現される。
<canvas id="canvas" width="320" height="240">
（ここに未対応環境への代替コンテンツ）
</canvas>
JavaScriptを使用するとcanvasに画像を描くことができる。
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect(100, 100, 200, 200);
header要素[編集]
header要素はヘッダを書くために利用する。
[編集]
footer要素はフッタを書くために利用する。
[編集]
nav要素はパンくずリストを作るために用いる。
