解説
「HTML5」は、HTML(HyperText Markup Language)の改訂第5版です。2014年10月28日に勧告されました。多くの面で改訂されており、時代の要請に合わせて、さまざまな機能が追加されています。
HTML5では、古いHTMLを整理して、人間からもコンピューターからも、読みやすく、理解しやすいように構造を記述できるようになっています。また、この変化に伴い、見た目を記述するタグの多くが廃止予定になりました。見た目はCSSを利用して記述します。
文書構造を示すタグの追加
- <header>
- <nav>
- <section>
- <article>
- <footer>、など
見た目を表すタグを中心に廃止予定に
- <center>
- <font>
- <strike>
- <big>、など
また、HTML5では、Webアプリケーションを作るのに有用な各種機能が導入されています。
- マルチメディア対応
- 動画や音声データの利用
- グラフやゲームに使える2Dや3Dの描画処理
- さまざまなAPIの追加
- ドラッグ&ドロップ機能
- ローカルファイルの読み込み
- 大きなデータを保持するウェブストレージ
- 各種通信
- マイクやカメラ、位置情報などデバイスへのアクセス
- 別プロセスで処理を行うWeb Workers
- フォーム機能の強化、など
HTML5のファイルは、古いHTMLとは違い、「<!DOCTYPE html>」で始まります。
サンプル
HTML5のサンプルを掲載します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5サンプル</title>
</head>
<body>
<header>
<h1>HTML5サンプル</h1>
</header>
<nav>
<ul>
<li><a href="#article1">記事1</a></li>
<li><a href="#article2">記事2</a></li>
<li><a href="#article3">記事3</a></li>
</ul>
</nav>
<article id="article1">
<section>
<h2>記事1</h2>
<p>ここは記事1です。</p>
</section>
<section>
<h3>記事1-1</h3>
<p>ここは記事1-1です。</p>
</section>
<section>
<h3>記事1-2</h3>
<p>ここは記事1-2です。</p>
</section>
</article>
<article id="article2">
<section>
<h2>記事2</h2>
<p>ここは記事2です。</p>
</section>
</article>
<article id="article3">
<section>
<h2>記事3</h2>
<p>ここは記事3です。</p>
</section>
</article>
<footer>
(c) 2018 hoge hoge
</footer>
</body>
</html>
