HTML5とは? HTMLとの違いや初心者向けの学習法まで解説
2021年1月22日

 

パソコンやスマートフォンでネットサーフィンをしていれば、HTMLという存在について耳にしたことやその成り立ちについて理解することは多いと思われます。

最近では、最新版であるHTML5が登場しており、その関係でFlashがなくなるというトピックスを目にしたことがある人もいるかもしれません。

本記事では、そのHTML5についてどのような存在なのか、今までのHTMLとは何が違うのかといったことを紹介していこうと思います。

 

前提として:HTMLの概要

以前“【初心者向け】HTMLとは?基礎や書き方を解説!”の記事でも説明しましたが、HTMLは“HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)”の略で、WEBページを作成するための基本的なマークアップ言語です。

マークアップ言語はコンピューターによって処理される人工言語の種類の1つで、テキストデータの一部を特別な文字列(タグといいます)で囲うことにより、文章構造や修飾情報を文章中に記述します。

 

WEBページは基本的にHTMLから成り立っており、ページ内の文章やリンク、文字の色・サイズもHTMLによって機能しています。

HTMLは大きく分けて“HTML4.01”、“XHTML1.0”、“HTML5”の3つのバージョンが存在しています。

 

HTML5の概要

HTML5(エイチティーエムエル・ファイブ)は、HTMLの5回目に当たる改定版で、使用可能なタグが増えて書き方もシンプルになった最新バージョンです。

 

HTML5は、HTMLと関連技術の開発をするためのコミュニティ“WHATWG(Web Hypertext Application Technology Working Group/ワットワーキンググループ)”が2004年に開発を開始しました。

その後は、World Wide Webで使用される技術の標準化を推進するために設立された“W3C(World Wide Web Consortium/ワールド・ワイド・ウェブ・コンソーシアム)”との共同開発や、別個での作業体制への変更を挟み、W3Cより2008年1月22日に草案が発表され、2014年10月28日に勧告されました。

以降は、2016年11月1日にHTML 5.1が、2017年12月14日にHTML 5.2が勧告されています。

 

人間もコンピューターやデバイスも矛盾せず読解でき、最新のマルチメディアをサポートする言語に向上することが改訂の主要目的の1つとなっています。

WEBアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されており、スマートフォン向けではFlashからHTML5への転換が進み、Adobe Flashなどがサービスを終了することとなるなど、大きな影響を与えています。

 

HTML5の特徴

HTML5のもっとも大きな特徴はプラグインを必要とせずに映像や音声を再生可能であるという点です。

動画や音声を組み込むための専用の要素があるため、これを活用することでjavascriptやphpなどを介していた処理を簡単に行えます。

また、アニメーションを作成するための機能である“HTML5 Canvas”も用意されており、これによりFlashをインストールせずにアニメーションを制作できます。

その他、WEBアプリケーションとのデータ連携を行いやすいシステムが多く用意されており、サーバーサイドとのデータのやり取りが容易となっているため、システム開発を効率的に進められます。

 

HTML5とHTMLの違い

HTML5は、HTML5仕様書の中で定義されるHTML構文とHTML5仕様書からXMLおよびその関連仕様を参照して定めるXHTML構文の2つの構文を採用しています。

対して、従来のHTML仕様はSGMLをその構文に採用しているため、お互いの間には基本的な文法の差異が多く存在しています。

例として、従来のHTML仕様では、タグやマーク宣言の終了区切り子となる“>”が文字列“<”や“</”の直前に存在する場合は“>”の省略が仕様上は許されていましたが、HTML5では不可能となっています。

 

HTML5の記述方法

 

DOCTYPE宣言(文書型宣言)

文書がHTML5で作成されたものであることを宣言するために、<html>タグよりも上の文書の先頭に記述する宣言です。

HTML5以前のバージョンよりも記述がシンプルになっています。

 

例として、HTML 4.01 Transitionalの場合は“<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">”と記述していましたが、HTML5の場合は“<!DOCTYPE html>”の形で記述できます。

 

文字コードの指定

HTML5文書の文字コードはUTF-8が推奨されており、meta要素におけるcharset属性で指定を行います。

こちらも以前のバージョンよりも記述がシンプルになっており、“<meta charset="UTF-8">”の形で記述できます。

 

その他の記述

HTML5文書の記述方法は、DOCTYPE宣言と文字コードの指定以外はHTML 4.01での記述形式と同じとなっているため、HTML 4.01でのソースコードにおいてDOCTYPE宣言や文字コードの部分をHTML5文書のものに変更するだけでも作成できます。

 

====================サンプル====================

 

<!DOCTYPE html>

<html lang="ja">

<head>

<meta charset="UTF-8">

<title>(タイトル名)</title>

</head>

<body>

<p>(テキスト)</p>

</body>

</html>

 

====================サンプル====================

 

HTML5で追加されたタグ

 

sectionタグ(<section>、</section>)

文書の中でコンテンツの1つのまとまりとなるセクションを示すタグです。

articleタグ、asideタグ、navタグもセクションの要素を持っていますが、それらはより具体的な意味を持っており、一般的なセクションを表す場合はこちらを使うこととなります。

 

headerタグ(<header>、</header>)

ヘッダーとは、WEBページにおいて通常の本文コンテンツより上にある領域のことです。

headerタグは、ページのヘッダーコンテンツ(ヘッダー画像など)を指定します。

本タグを使わなくてもヘッダーコンテンツは作れますが、ヘッダーであることを明示的に記述できるというメリットがあります。

なお、headタグと似ていますが、あちらは文書のヘッダー(文書の説明、タイトルなどの情報)部分を指定するタグで、htmlファイルの情報を宣言するものです。

まったく異なるタグなので混同しないよう注意しましょう。

 

footerタグ(<footer>、</footer>)

フッターは、ヘッダーの逆でWEBページにおいて通常の本文コンテンツより下にある領域のことです。

footerタグは、フッターコンテンツ(作成者の情報やコピーライトなど)を指定します。

 

navタグ(<nav>、</nav>)

他のWEBページへのリンクやページ内リンクなどのnav要素を示すタグです。

なお、WEBページの下部にリンクを配置する場合はfooterタグのみでも問題ありません。

 

articleタグ(<article>、</article>)

文書の内容が独立したセクションであることを示すタグで、ブログやサイトにおける個別記事などがマークアップされます。

articleタグは1ページに複数使用可能で、入れ子構造することもできます。

そのため、記事一覧のようなページでは複数のarticleタグが使われます。

 

canvasタグ(<canvas>、</canvas>)

canvasタグは、図形を描く際に使用するタグで、グラフの描画、写真の合成、アニメーションなどに使えます。

なお、実際の描写はJavaScriptによって行われるため、JavaScriptが無効となっている環境では当然使用できません。

また、ページの見出しなどのより適切な要素がある場合は、canvasタグの使用は推奨されません。

 

HTML5を初心者から学習するには?

HTML5はHTMLの5回目に当たる改定版なので、基本的なHTMLの学習を行うことで知識ベースを蓄えていくことができます。

“【初心者向け】HTMLとは?基礎や書き方を解説!”の記事で紹介したProgate、ドットインストール、CODEPREPなどの学習サイトなどを活用して学習を進めていきましょう。

 

まとめ

HTML5自体はあくまでHTMLの改定版ですが、より高度な機能を持つWEBページを作成可能で、特定のOSやブラウザに依存しないという非常に便利な存在です。

同時に、Flashのサービス終了が発表されるなどの大きな影響も与えています。

これから勉強を始める人はもちろん、すでにHTMLについて勉強しているという人も、HTML5によって変更が起きた部分などは必ず確認しておきましょう。

< 前へ

次へ >