HTML5とは？HTML5でできること､追加･変更･廃止された要素など

HTMLの歴史は意外と長く、1989年にスイスで誕生して以来、これまでに何度かのバージョンアップを繰り返してきました。

しばらくはHTML4が標準的に使用されてきましたが、Web環境の変化に合わせて改良された「HTML5」が、現在の最新仕様となっています。

ここではHTML5でできるようになったことや、これまでのHTMLとの違いについて解説します。

HTML5とは？

HTML5とは、W3Cが策定してきたHTMLの5回目の仕様改定で、2014年に勧告（正式に仕様が承認され、誰が使っても問題ない状態であること）されました。

従来のHTMLは構造化文書の作成が目的のため、あらかじめ用意された情報を表示するだけのWebサイトであれば、何も問題はありませんでした。

しかし最近では、ユーザーの操作に反応して画面が動的に変化する「Webアプリケーション」と呼ばれる仕組みが主流になっており、このWebアプリケーションを作成するには、やや機能が不足しているところがありました。

そこで登場したのがHTML5です。

これまでHTML以外の技術を組み合わせないと実現できなかったことが、HTML/CSS/JavaScriptというWebの標準技術で対応できるよう、さまざまな改良や機能の追加が行われました。

※HTMLの最新仕様は正確には「HTML Living Standard」ですが、基本的な概念や構造はHTML5とほぼ同じですので、今回はHTML5という呼び方で表現します。

HTML5でできること

HTML4以前ではできなかったことが、HTML5ではいくつかの新機能として盛り込まれています。

今回は代表的なものをご紹介します。

音声や動画の埋め込みができる

従来のHTML4では音声や動画を埋め込むには、Flashなどのプラグイン（拡張機能）を使う必要があり、やや複雑で初心者には難易度が高いものでした。

HTML5では、新しく追加されたvideo要素やaudio要素を使用することで、音声や動画をHTMLからシンプルに扱うことができます。

HTMLだけでフォームの入力チェックができる

フォームとは、ユーザーがブラウザからデータを入力する仕組みです。会員登録や検索条件の入力など、さまざまな用途で使われています。

入力したデータはサーバーへ送信して処理されるため、意図しないデータが送られないよう、文字の長さや種類などの入力規則が定められています。

例えば生年月日の入力欄に存在しない日付を入力した場合、サーバー側では正しく処理ができません。どこかでチェックして、不正な入力値はエラーとしてユーザーに知らせる必要があります。

ブラウザ上でフォームのチェックをする場合、これまではJavaScriptを使うのが主流でしたが、HTML5ではフォーム関連の要素の属性として、さまざまなチェック仕様を指定できるようになっています。

文書構造の明確化

従来のHTMLでも文書構造の指定は可能でしたが、適した要素が見つからないときには、汎用的に使えるdiv要素やspan要素で済ませてしまうケースも多くありました。

HTML5では文書構造を表す要素がいくつか追加され、より明確に文書構造を表現できるようになっています。

具体的には、ホームページ画面のヘッダーを意味するheader要素、文書内の独立した記事コンテンツを示すarticle要素などがあります。

Webアプリケーションの構築に必要な機能が追加された

ドラッグ&ドロップや位置情報の取得など、これまでは高度な技術が必要だった機能が、HTML5ではAPIと呼ばれる形で提供されており、誰でも簡単に作れるようになりました。

※APIとは「Application Programming Interface」の略で、あらかじめ用意されたプログラムを呼び出したり操作するためのプログラミングの決まりごとです。

HTML5のAPIは、HTMLの要素とJavaScriptのプログラムを組み合わせて使用します。

HTML5とHTMLの違い

ここまでHTML5の新機能について見てきましたが、HTML5と従来のHTMLとは具体的に何が違うのか紹介します。

HTMLの記述量が少ない

HTMLとHTML5の同じ要素に対して、HTML5の方が記述量が少なくなっているものがあります。DOCTYPE宣言では、下記のように大幅に記述量が減っています。

HTML5の場合：

HTML4の場合（Strict）：

HTML要素の記述が減ることで、作業量が減ってサイト構築のスピードが速くなる他、SEO対策としても有効な部分があります。

これはGoogleなどの検索エンジンがページの読み込み時間も評価項目としているためで、HTMLに不要な記述がないほど評価が上がり、サイトが検索結果の上位に表示されやすくなります。

コンテンツモデルの導入

HTML5から「コンテンツモデル」という概念が導入されました。

これは従来のHTMLのブロック要素・インライン要素と呼ばれる分類に置き換わるもので「どの要素にはどのカテゴリーに属した要素を入れることができるか」というマークアップのルールを定義したものです。

カテゴリーは全部で7種類存在します。下記の表からも分かるように、ひとつの要素は複数のカテゴリーに属することがあります。

次に、このコンテンツモデルを意識したマークアップの例をご紹介します。

正しくないマークアップ例：

p要素の内容には、記述コンテンツのみ含めることが許されています。しかし、入れ子になっているh1要素は見出しコンテンツに属するため、p要素の子要素にはできません。

正しいマークアップ例：

この例で使われているspan要素は記述コンテンツに属するため、p要素の子要素にすることができます。

このコンテンツモデルによるマークアップのルールは、厳密に守らなくてもおおよそのHTML文書は問題なく表示されます。しかしSEO対策やソースの読みやすさの観点で見ると、ルールに正しく従っていることが重要になってくるので、基本的に意識するよう心がけてください。

コンテンツモデルの詳しい情報はW3Cのドキュメントを見るのが確実ですが、パッと調べたいときには、次のように視覚的にまとめられているサイトで確認するのもおすすめです。

https://webgoto.net/html5/

要素の追加・変更・廃止

HTML5では、いくつかの要素や属性が追加・変更・廃止されています。特に変更や廃止となったものについては、HTML4からHTML5に置き換えるときに修正が必要になるため要注意です。

次に代表的な要素や属性をご紹介します。

W3Cから公式発表されたHTML5におけるHTML4からの変更点は、次のURL（英語版）に記載されています。日本語で確認したい場合は、ブラウザの翻訳機能を活用しましょう。

https://www.w3.org/TR/html5-diff/

まとめ

HTML5は現在のHTMLの最新仕様であり、動的なサイトが主流となってきたWeb環境の変化に合わせて、従来のHTMLから多くの機能が追加されています。

これから新しくサイトを構築するときはHTML5が前提となりますが、既存サイトでHTML4以前のバージョンを使用している場合、なるべく早いうちにHTML5への移行を検討してください。