HTML5とは

カテゴリ：HTML5編

HTML5とは

HTML5は大まかにいえば、HTMLの論理構造に着目し、各コンテンツの種類を論理的に表す専用の要素を追加した第5世代のHTMLです。
HTML5より前は、コンテンツの種類を表す要素は無かったためdiv要素+idもしくはclassで表すしかありませんでした。
HTML5でコンテンツの種類を表す要素が追加されたことで、主に以下の2つのメリットが得られます。

可読性および制作効率の向上

1つ目は可読性および制作効率の向上です。
個人のWebサイトあれば自分一人で作成するため、各コンテンツのidやclassの名前分けには自分のルールを適用できます。
しかし複数人で制作する大きなWebサイトでは個人の命名規則で命名すれば混沌としてしまうため、通常はそのプロジェクトで命名規則は統一します。
しかしWeb制作者が他のプロジェクトに変わったら、あるいは他の会社に変わったとしたら、個々のプロジェクトや会社が独自の命名規則を使用していればやはり混沌としてしまい、構造の把握に時間がかかったり、自分たちの命名規則への修正に追われる可能性もあります。
もちろんHTML5においても、idやclassは使用するためそれらの名前は統一されるわけではありませんが、Webページの基本レイアウトを構成する要素については、論理的にコンテンツの種類を表す統一的な要素を作ることで、Webページ制作の効率向上を図ることができます。

例えばメインコンテンツであれば、

<div id="main">

<main>

スクリーンリーダーとの親和性向上

2つ目はスクリーンリーダーがWebページの構造をより理解しやすくなることです。
視覚障害者はスクリーンリーダー（Webページの画面を音声化して文章を読んだり、リンクを辿るなどの操作を行うソフト）を用いてWebサイトを閲覧するため、Webサイトの利用は機械に依存します。
そのためには、機械がそのWebページの構造を素早く正確に理解し、利用者の求めている文章やページリンクを見つける必要があります。
コンテンツの種類をより厳密に表す要素を使用することで、例えばサイトメニューであれあばnav要素、メインコンテンツであればmain要素、記事であればarticle要素というように、機械がWebページ内の目的のコンテンツを探し出すのを助ける事ができます。

構造化要素以外の拡張

HTML5は上記以外にも、Webアプリ作成用の機能（代表的な利用例としてReact Nativeによるスマホアプリなど）やマルチメディア対応の機能（canvas要素、video要素、audio要素など）も組み込まれています。
例えば、HTML5よりも前であれば動的コンテンツ（グラフィックスやアニメーション、動画、音声などのコンテンツ）を作成するためにはAdobe Flashなどを使用していましたが、HTML5ではJavaScriptに対する拡張も含まれているため、HTML5+JavaScriptのみを使用して動的コンテンツを作成できるようになりました。
具体的にはcanvas要素にHTMLネイティブのJavaScript描画APIを用いてコンテンツを作成します。

HTML5はWebページ構造の複雑化、多用途化に対応する、時代に即したHTML拡張と言えるでしょう。

公開日時：2018年12月23日 10:05:50
最終更新日時：2022年03月12日 07:33:38