解説
「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>