コードカキタイ
コーディング
HTML
初心者向けにHTML5の特徴を解説！Living Standardとの違いとは？

HTML

最終更新日: 2024.01.26 (公開: 2023.01.26)

初心者向けにHTML5の特徴を解説！Living Standardとの違いとは？

初心者

本記事はHTML5がよくわからない方のために、HTML5の特徴やHTML4とは何が違うのかについてわかりやすく解説します。

「HTML5がこれまでのHTML4と何が違うのか、よくわからない」「HTML5は2021年1月に廃止されたのでは？」といった疑問を持っている方もいるのではないでしょうか。
本記事では、「HTML」の基本知識や「HTML5」の特徴、これまでの「HTML4」との違いなどについて、詳しく解説します。

HTMLとはそもそも何？

HTML5について勉強をする前に「そもそもHTMLとは何なのか」を知っておく必要があります。ここからはWebサイトの開発では必須となるHTMLの基礎知識について解説します。

Webサイトの内容を書く言語

私たちは、スマートフォンやパソコン、タブレットなどを使い、インターネットを介することで、整ったWebサイトを閲覧できます。このWebサイト上に表示する内容を記述しているマークアップ言語が、HTML（ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language））です。

マークアップ言語とは、文章の構成や文章の役割を、コンピュータが理解できる形で表現したものです。

このHTMLはWebサイトの基礎的な部分を担っています。Webサイトを作る際にはまずHTMLを使って文章構成の指示をコンピュータに出すことで、Webサイトの画面に表示したい基本的な情報を作れるのです。

タグを使って文字を修飾する

HTMLのみのWebサイトだと、画像やテキストがただ並んだだけのシンプルな状態になってしまいます。しかし、私たちが普段見慣れているWebサイトは、HTMLで記述された基本部分に、CSSという言語で装飾がされているのです。

CSSの記述で装飾することにより、ただの文字の羅列だったWebサイトの見た目を、自由にデザインできます。

HTMLは、通常CSSと組み合わせて使われることが多く、現在Web上に存在するほとんどのWebサイトがHTMLとCSSを組み合わせて作られています。

HTML5とはHTMLのバージョン名のこと

HTML5とは、HTMLのバージョン名のことで「バージョン5」であることを意味します。ここではHTML5をより深く理解するために、HTMLの歴史をたどってみましょう。

HTMLは、1989年にスイスのジュネーブにある欧州原子核研究機構で開発されました。当時、膨大な数の研究資料の中から必要な書類を探すのが大変だったため、サーバーに情報を蓄積し必要なときにブラウザで取り出せる仕組みが必要でした。このような経緯のもと、HTMLは誕生しました。

元々のHTMLは情報の管理や整理の目的で作られたため、装飾などはできませんでした。しかしその後、バージョンが更新されるとともに進化していきます。

そして2014年に現在の主流であるHTML5が作られ、多くのWebサイトで使用されるようになりました。

HTML5の特徴は？

では具体的にHTML5には、どのような特徴があるのでしょうか。ここでは、HTMLの特徴を大きく6つにわけて紹介します。

文書構造がシンプル

HTML5が、以前のバージョンである「HTML4」と大きく異なる点のひとつに、文書構造がシンプルであることが挙げられます。

たとえばHTML4でdoctype宣言をする場合、長々とURLなどの情報を書かなければなりませんでした。一方で、HTML5では

<!DOCTYPE html>

と、短い文字数で宣言が完了します。

このように、HTML4では冗長だった記述がHTML5ではシンプルになり、見やすく書きやすい構造となりました。

動画、音声、アニメーションを組み込める

HTML5では、動画や音声、アニメーションなどを組み込むための専用の要素が用意されています。それを用いることで、これまでPHPやJavaScriptなどを介して行っていた組み込み処理を、HTMLだけで簡単に行えるのです。

パソコンだけでなくスマートフォンにも対応しているため、デバイスごとに対策をする必要がなく、効率の良い開発を行えるようになりました。

ブラウザの互換性が高い

HTML5は、HTML4に比べてブラウザの互換性が向上しました。

これまではあるブラウザで正常に動作していたWebプログラムが、他のブラウザではうまく動かない事例が頻繁に起きており、これはブラウザの標準化がされていないことが原因でした。

しかし、HTML5は仕様がはっきりと文書化されており、Google　Chrome、Safari、Microsoft Edge、Mozillaなど、主流となっているほとんどのブラウザに対応しています。

Webアプリケーションと連携がしやすい

さまざまなWebアプリケーションと連携しやすい仕組みが多く用意されていることも、HTML5の大きな特徴のひとつです。

サーバーサイドとのデータのやり取りがしやすいため、より効率的なシステム開発が可能となりました。さまざまなWebアプリケーションと連携したい場合は、JavaScriptなどのプログラミング言語の活用がおすすめです。

フォーム機能が強化された

これまでテキストフィールドやラジオボタン、チェックボタンなどのフォーム周りの機能には、シンプルなものしか搭載されていませんでした。しかしHTML5では、さまざまなフォーム機能の強化が行われ、簡単に効率のよい開発が可能になりました。

たとえば、日付入力の際にカレンダーを表示して選択できる機能や、入力するテキストフィールドにデフォルトで薄い文字を表示させられる機能などが、HTML5から標準搭載されています。

JavaScriptを併用して高機能を実装できる

HTML4では、PHPなどを使ったサーバーサイドのプログラムを書かないと使用できなかった機能も、HTML5ではJavaScriptを併用して効率的に実装できるようになりました。

たとえば、ドラッグアンドドロップによるデータのコピーや移動なども、HTMLのタグとJavaScriptの記述だけで簡単に行えます。さらに、データをサーバーサイドに送信して処理を行うことも、JavaScriptの併用のみでできるようになりました。

HTML5で追加されたタグ

これまでのHTML4と比べて、HTML5ではさらに細かいアップデートが多くされています。

ここでは、HTML5から使用できる新しいタグについて紹介します。

headerタグ

headerタグは、その名の通りWebサイトのヘッダー部分を表すタグです。

これまでは、文書の構造に関する記述もdivタグの中に書いていたため、ひと目見ただけではサイトの構造を判断しにくい点がありました。しかしheaderタグや後で紹介するfooterタグなどがHTML5で導入されたことより、サイトの構造が明確化されました。

headerタグの中では、ロゴ画像やナビゲーションメニューなどを記述します。

navタグ

navタグはリンクナビゲーションを表すタグであり、リンクナビゲーションとは、そのサイト内へのリンクや外部サイトへのリンクなどを示すことです。

navタグは、サイト内の別ページや関連するコンテンツに移動するためのリンクを配置する役割で使用されます。ナビゲーションセクション内に記述する主な具体例は、メニューや目次、索引などがあげられるでしょう。

footerタグ

footerタグは、フッター部分を表すタグで、文章やセクションの締めくくりのコンテンツとして使用されます。先ほどのheaderタグと同様に、サイトの構造をより明確にする役割を担うタグです。

footerタグの主な記述例は、会社概要やコピーライト、先頭へ戻るリンクなどがあります。また、headerタグやfooterタグ以外のbodyタグで指定した内容の表示も可能です。

articleタグ

articleタグは、記事などの独立したコンテンツを表すのに使われるタグです。

たとえば、ブログやニュースなどの個別の記事や記事に対するコメントで、articleタグが使われます。

1ページに複数のarticleタグを使用でき、入れ子構造も可能です。ただし、入れ子構造にする場合は、親のarticleタグに関連した内容を子のarticleタグに記述するのが一般的となります。

canvasタグ

canvasタグは、アニメーションを描画するのに使用されます。このcanvasタグのように、プラグインなしで動作できる点は、HTML5の大きな特徴のひとつです。

ただし、canvasタグのみでインタラクティブ（双方向、対話式）な動作をさせるのは難しいため、実際に図を描画する際には「JavaScript」の記述と組み合わせて作られるのが一般的でしょう。

そのため、canvasタグを使いたい方は、あわせて「JavaScript」などのスクリプト言語を学習することがおすすめです。

audioタグ

audioタグは、音声ファイルを文書内に埋め込むことができるタグです。再生したい音声ファイルは、src属性で指定します。

audioタグを使えば、再生や停止などの音声コントロールだけでなく、音声の自動再生やループ再生などもプラグインなしで設定が可能です。

HTML5とHTML Living Standardってどういう関係性？

「HTML」という言葉で検索をかけると、多くの場合「HTML5」と「HTML Living Standard」という2種類の用語が出てきます。ここからは「HTML5」と「HTML Living Standard」の違いを解説します。

HTML Living StandardはHTMLの標準仕様

「HTML Living Standard」は、WHATWG（ワットダブルジー）という組織によって策定された「HTML」の標準仕様です。

これまでは、「HTML5」がHTMLの標準仕様とされていましたが、2021年1月からは「HTML Living Standard」が標準となりました。

かつて「HTML Living Standard」の開発を進めるWHATWGと、「HTML5」を勧告するW3Cという二つの組織が対立していました。しかし、2018〜2019年にかけて主要ブラウザがWHATWGの開発する「HTML Living Standard」を採用する動きを見せたことをきっかけに、「HTML」の標準化はWHATWGに任されることになったのです。