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

HTML5とは

img_html5_01

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文書をブラウザで表示したりすることができます。

HTMLとは?できることや初心者向けのタグの例、CSSについても紹介
HTML入門:基本から学ぶHTMLの構造と構成要素を解説!

HTML5の特徴

HTMLは登場以来文書(コンテンツ)の構造と見栄えを指定できました。その後、煩雑な言語仕様を整理するために文書構造をHTMLが担当し、見栄えをCSSが担当することで役割を分離しました。

それからHTML4では文書構造を表すために利用されていたものの、ウェブサイトの高機能化によりリッチウェブアプリケーションのプラットフォームとしてのニーズが強まりました。

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

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

【初心者必見】HTMLとCSSの違いは?基本知識と学習方法も解説!

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 use」や「HTML5test」等でHTML5の実装状況やお使いのブラウザの機能適合が確認できます。さらに、YouTubeでも対応ブラウザかどうかを表示してくれます。

【参考】:Can I use 【参考】:HTML5test - How well does your browser support HTML5? 【参考】:YouTube サポートブラウザ

HTML5の開発環境について

img_html5_02

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

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

【参考】:Microsoft Visual Studio 【参考】:Apache NetBeans 【参考】:Netbeans 日本語化 【参考】:ECLIPSE 【参考】:Pleiades All in One Eclipse日本語化

IDEとは?詳細やメリット、おすすめのIDEを紹介します!
Visual Studio 2022の新機能がIDEで歴代最高な理由
Eclipseとは?統合開発環境を日本語プラグインで快適に構築する方法を解説!

インストール方法

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

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

HTML4からHTML5への変更点

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

文字エンコーディング 従来の指定に加えて、以下のシンプルな指定が可能となり使いやすくなりました。 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 Standardが、HTMLの標準規格として存続することになりました。

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

HTML5はなぜ廃止された?いつからなのか、仕様変遷も紹介!

HTML5プロフェッショナル認定試験とは

img_html5_03

HTML5が「HTML Living Standard」に変更されたことで、HTML5の認定資格であった「HTML5プロフェッショナル認定試験」についてはどうなるのでしょうか。

公式サイトによると、「HTML5プロフェッショナル認定は今後も、HTML Standardとしてバージョンアップを行い、Webエンジニアの認定としての価値を維持していく」としており、これまで資格を取得した方やこれから受験を検討している方に対する影響はないようです。

【参考】:HTML5はHTML Standardへ呼称変更 ~ HTML5プロフェッショナル認定試験は今後も有効 ~ |「HTML5プロフェッショナル認定試験」公式サイト

これを踏まえ、ここでは「HTML5プロフェッショナル認定試験」について、試験概要や難易度について紹介します。

試験概要

HTML5プロフェッショナル認定試験とは、HTML5・CSS3・JavaScriptなどのWebコンテンツ制作やWebアプリケーション、動的なWebコンテンツの開発・設計の技術や知識を測る試験のことです。

【参考】:試験概要|Web資格なら「HTML5プロフェッショナル認定試験」公式サイト

試験は、Webコンテンツ制作の基礎の実力を測るレベル1と、JavaScriptを中心とした動的Webコンテンツの開発・設計の能力を認定するレベル2に分けられます。

【レベル1】 ・試験名:HTML5プロフェッショナル認定試験 レベル1 ・試験時間:90分(試験後の簡単なアンケートの時間を含む) ・問題数:約60問 ・受験料:16,500円(税込) ・有効期限:5年間

【レベル2】 ・試験名:HTML5プロフェッショナル認定試験 レベル2 ・試験時間:90分(試験後の簡単なアンケートの時間を含む) ・問題数:40~45問 ・受験料:16,500円(税込) ・有効期限:5年間

両試験はどちらもCBT(コンピュータベーストテスト)で実施され、全国各地の試験センターでの受験、または自宅や職場からのオンライン受験が可能です。試験日程においては空いている日時に予約できるため、受験スケジュールを立てやすいでしょう。

合否については、テストセンターで受験した場合は、テスト終了後すぐにその場で結果が表示され、オンライン試験の場合はピアソンVUEにログインした後に確認できます。

難易度

HTML5プロフェッショナル認定試験は合格率などを公表していないため、具体的な難易度を測るのは難しいですが、レベル2に合格するにはレベル1に合格する必要があります。

そもそもの認定条件として、レベル2はレベル1に合格することを前提とされた試験であるため、難易度はレベル2の方が高いことがわかります。

また、学習期間の目安としてレベル1は3か月〜半年程度、レベル2は半年〜1年程度と公表しています。さらに公式サイトの資格体系の紹介において、レベル1とレベル2の難易度の差を表したグラフが掲載されているので、気になる場合は参考程度にチェックしておきましょう。

【参考】:HTML5プロフェッショナル認定試験 レベル1について(Ver2.5)|試験概要

HTML5プロフェッショナル認定試験が難しい?試験内容や取得方法
HTMLからJavaを動かせる?JavaScriptを動かす方法も解説

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

img_html5_04

HTML5は文書構文がシンプル化され、リッチコンテンツや動画配信等広範囲に活用されています。特にスマホの動画再生やすきま時間のゲームや学習コンテンツは市場拡大が続いています。

このためHTML5を理解したら多様なウェブアプリケーションに活用し、スキルアップを図ることをおすすめします。

HTML・CSSは独学で習得できる?初心者におすすめな最短の勉強方法
初学者必見!HTMLを勉強するのにおすすめの本を5つ厳選
初心者におすすめのHTMLエディタ5選!便利な機能で開発効率もアップ
気になる人のXをフォローしよう!
公式LINE
公式YouTube
マイナビITエージェント

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

Sponsored
【年収±診断】6つの質問に答えて、真の市場価値をチェック!
マイナビITエージェント
Sponsored

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

お問い合わせ・情報提供
はじめて転職される方へ
SE・システムエンジニア(IT/通信/インターネット) 求人一覧

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

Sponsored
【年収±診断】6つの質問に答えて、真の市場価値をチェック!
マイナビITエージェント
Sponsored

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

Powered by マイナビ AGENT