HTML5とは?特徴や変更点・関連用語・対応ブラウザを解説!
HTML5
HTML5とは?特徴や変更点・関連用語・対応ブラウザを解説!
アンドエンジニア編集部
2021.09.26
この記事でわかること
HTML5とはHTMLの5回目の改訂版を指し、マルチメディアやリッチコンテンツに対応します
HTML5は、現在HTML Living Standardにおいて仕様化と機能拡張を行っています
HTML5では構文の簡略化がされており、多用途に活用が期待されています

HTML5とは?

HTML5

HTML5とは、ハイパーテキスト記述言語(HyperText Markup Language)の5回目の改訂版を指します。HTMLの仕様はWeb Hypertext Application Technology Working Group(WHATWG)が策定し、World Wide Web Consortium(W3C)で勧告されています。 参考:WHATWG HTML Living Standard

HTML 5.1以降はHTML Living Standardに基づいており、現在最新の仕様はHTML 5.2を勧告後、HTML Living Standardに統合され仕様統一されています。 参考:HTML 5.2 W3C Recommendation

そもそもHTMLとは

HTML5のベースとなっているHTMLは、ハイパーテキスト記述言語です。ハイパーテキストとは、複数の文書を相互参照するためのリンク(ハイパーリンク)機能を有する仕組みを指します。

ハイパーテキストはWeb(World Wide Web)を始めとするウェブ系システムで標準利用されています。ウェブ系システムで使用するウェブコンテンツはHTMLで記述されており、コンテンツの通信や表示をしたり、直接PCに格納されたHTML文書をブラウザで表示したりすることができます。

HTML5の特徴は?

HTMLは登場以来文書(コンテンツ)の構造と見栄えを指定できました。その後、煩雑な言語仕様を整理するために文書構造をHTMLが担当し、見栄えをCSSが担当することで役割を分離しました。それからHTML4では文書構造を表すために利用されていたものの、ウェブサイトの高機能化によりリッチウェブアプリケーションのプラットフォームとしてのニーズが強まりました。

リッチウェブアプリケーションでは、視覚的なリッチコンテンツやマルチメディア機能が必要とされます。HTML4では十分とは言えないために各ベンダーが独自拡張を進めました。このバラバラの実装を整理したものがHTML5です。HTML5は検索エンジン向けのタグが用意され、利便性が向上しました。

さらに、ビデオやオーディオの再生オフライン表示のAPI等が追加されており、アプリケーションプラットフォームとしての機能追加が特徴です。

Flashとの関係は?2020年末Flash終了の影響は?

Adobe Flashは、長らくMacromedia Flashとしてリッチコンテンツのプラグインとして活用されていました。FlashはHTMLで用いるプラグインで動画やゲームで利用されていました。しかしながら脆弱性が多数発見され、ブラウザがクラッシュすることが多かったのが実態です。

上記理由から、Apple社の当時のCEOスティーブ・ジョブズ氏はFlashを使用せずにHTML5を強力に推進しました。このためAdobe社はFlash継続をあきらめ、2020年末にFlash Playerの開発と配布を終了しました。ブラウザ提供各社は2015年から2016年にFlashのブロックを開始しており、2020年末のFlash終了への影響ほとんどありませんでした。

HTML5 プレイヤーとは?

HTML5 プレイヤーとは、Flash Playerで提供していた動画再生機能HTML5に置き換えたものです。HTML5ではプラグインなしで動画やアニメーションを再生できます。そのため、HTML5 プレイヤーとは<video>要素を用いて動画再生機能を実装したものを指します。

HTML5 プレイヤーの実装例は、YouTubeが有名です。YouTubeでは2015年からHTML5 プレイヤーをデフォルトの動画プレイヤーとしています。その他にも、JavaScriptのライブラリーとして提供するVideo.jsも数多く利用されています。 参考:Video.js

HTML5 ゲームとは?

HTML5 ゲームとは、主にモバイル向けゲームで用いる用語です。従来のスマホアプリはApp StoreやGoogle Playにアプリを登録し、Apple社やGoogle社のコントロールの下、アプリ配信を行っていました。主にアプリはゲームエンジンやライブラリ等を用いて開発するネイティブアプリとなります。理由は当時のスマホの性能が追いつかなかったためです。

近年スマホの性能向上が著しいために、ネイティブアプリではなくHTML5を用いてゲームを提供することが増えています。理由は性能向上の他にも、Apple社やGoogle社のコントロールを受けないで配信や課金をしたいことが背景にあります。そのためHTML5 ゲーム市場今後の成長が見込まれる領域となります。

HTML5の対応ブラウザは?

HTML5の最初の企画となるHTML 5.0は2008年にドラフトが公開され、2014年に勧告されました。2014年から2015年にかけてHTML5対応ブラウザが整備されています。そのため代表的なブラウザであるEdge・Firefox・Chrome・Operaは問題なく動作しますし、そのほかのブラウザも順次対応機能が実装されています。

ブラウザの対応状況を確認するには、Can I useHTML5TEST等でHTML5の実装状況やお使いのブラウザの機能適合が確認できます。さらに、YouTubeでも対応ブラウザかどうかを表示してくれます。 参考:Can I use 参考:HTML5TEST 参考:YouTube サポートブラウザ

HTML5の開発環境は?

HTML5

HTML5の開発はマークアップ言語に沿ったコンテンツをテキスト形式として作成します。したがって、テキスト文書を作成する環境があればすぐにでも開始できます。具体的には、テキスト編集するためのエディタ、およびHTML5を表示するブラウザの準備ができれば問題ありません。

なおHTML5に対応する統合開発環境(IDE)があるとさらに簡単に開発を行うことができます。具体的にはMicrosoft社のVisual Studio、オープンソースソフトウェアのNetbeansやEclipseの利用者が多いです。いずれも日本語に対応しています。 参考:Microsoft Visual Studio 参考:Apache NetBeans 参考:Netbeans 日本語化 参考:ECLIPSE 参考:Pleiades All in One Eclipse日本語化

HTML5のインストールは?

HTML5はブラウザ機能とテキストエディタを用いるため特に追加インストールは必要ありません。もし統合開発環境(IDE)を使用する場合はそれぞれダウンロード・インストールを行い利用していきます。

動画編集ソフトによっては、ブラウザの拡張機能を使用するためにインストールが求められる場合がありますが、通常は必要としません。

HTML4からHTML5への変更点は?

HTML5HTML4と後方互換性を維持しながら機能改善が図られています。以下に代表的な変更点を記載しておきます。

文字エンコーディング 従来の指定に加えて、以下のシンプルな指定が可能となり使いやすくなりました。 HTML4:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  HTML5:<meta charset="UTF-8"> ・DOCTYPE こちらも従来の記述をシンプル化し、<!DOCTYPE html>と簡略化されました。 ・言語要素 section、article、aside、hgroup、header、footer、nav、figure、の要素が追加されました。従来div要素で行っていた文書構造がより分かりやすく整理されました。 ・マルチメディアコンテンツ用言語要素 audio、videoの要素が追加されました。ともにAPIが提供されており独自のインターフェイスを開発可能です。その他グラフィックス用canvas要素や、ダウンロード管理用progress要素等が追加されました。

上記のほかにも追加された要素や変更された要素があります。詳細はW3Cのドキュメントで定義されています。 参考:W3C HTML5 Differences from HTML4 参考:W3C HTML5 における HTML4 からの変更点

HTML5廃止とは?

冒頭で記述した通り、HTMLの仕様Web Hypertext Application Technology Working Group(WHATWG)が策定し、World Wide Web Consortium(W3C)で勧告されています。HTML 5.1以降はHTML Living Standardに基づいており、現在最新の仕様は、HTML 5.2まで勧告されています。

この標準化の過程の中で、HTML5をW3Cがしっかり仕様策定する流れと、機能拡張を順次実施したいWHATWG仕様の差異が生じてしまいました。そのため、ウェブブラウザ開発ベンダにより立ち上げられたWHATWGのHTML Living StandardHTMLの標準規格として存続することになりました。

現在、2021年1月にWHATWGのHTML Living StandardがW3Cによって勧告されており、ダブルスタンダードが廃止されたことで統一化がなされました。HTML Living Standardの仕様ドキュメントを見るとHTML Living Standardは一言で言うとHTML5である、と説明しています。

HTML5を理解して多様なウェブアプリケーションに活用しましょう

experience

HTML5文書構文がシンプル化され、リッチコンテンツや動画配信等広範囲に活用されています。特にスマホの動画再生やすきま時間のゲームや学習コンテンツは市場拡大が続いています。このためHTML5を理解したら多様なウェブアプリケーションに活用し、スキルアップを図ることをおすすめします。

Twitterをフォローしよう!
この記事をシェア
Twitter
Facebook
LINE
Hatena
アンドエンジニアの公式LINEができました! ピッタリの記事や役立つ情報が届きます!

編集部オススメコンテンツ

eyecatch_visual_coder
Adobe製品を使わない"デザイナー"?「ビジュアルコーダー」が考える、自己満足で終わらないWebデザインとは
三角
2020.06.16

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
この記事をシェア
Twitter
Facebook
LINE
Hatena
アンドエンジニアの公式LINEができました! ピッタリの記事や役立つ情報が届きます!

編集部おすすめコンテンツ

アンドエンジニアへの取材依頼、情報提供などはこちらから