HTML5とは？
HTML5とは？
HTMLの正式名称は「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」ですね。
HTMLは当然の事ながらWEBページの内容を書くための言語です。WEBの世界では基本中の基本の言語になっています。
現在はバージョン5が最新
HTML5とはHTMLのバージョン5で改訂第5版である事を指しています。初期のHTML1が開発されたのが1993年です。それからバージョンアップを繰り返して1999年12月にHTML4がロールアウトされました。
このHTML4がWEBサイトを作る言語として長期間にわたりWEB業界を支えてきました。私もこの業界に入った時はこのHTML4から覚えました。そして2014年10月28日に満を持してHTML5が発表されたのですね。
ロールアウト当初は各ブラウザにあまり浸透していませんでしたが、スマホ市場の拡大（レスポンシブルデザインの台頭）とともに2019年3月現在ではほとんどのブラウザで対応するようになっています。
あわせて読みたい関連記事
前回バージョンからの変更点
端的に言えば、今まで複雑だった処理が簡単になりHTMLをより構造的にスッキリ書けるようになったことが、まずは視覚的変化として挙げられると思います。
ではここでその主な変更点を見ていきましょう。
動画や音声の埋め込みが簡単になった
Flashなどの動画コンテンツからの脱却
HTML5では、<video>や<audio>というタグが登場し、動画や音声を操作できる様になりました。しかもPCだけでなくスマホでも実行再生が可能なので、WEBサイトの制作時に対応する端末機種の影響を受けずに済みました。
これまでのHTML4では、動画を使うには「Flash」というものを使っていました。ただこのFlashコンテンツの作成・組込は、初心者にとっては難易度が高いものがありましたね。
そのFlashも2020年末までに全面的にサポートが終了します。ほぼ全てのブラウザで見えなくなっていきます。
文章構造がより明確になった
今までのHTML4でWEBサイトを構築すると、文章以上にタグの量の方が多くを占めていました。
ですがHTML5では文書構造を表す新しい要素が追加された事で、視覚的に見やすくなりブラウザや検索エンジンに対してもより明確にその文書構造を伝えられるようになりました。
今までは特にヘッダー部分やフッター部分が<div></div>で何重にも取り囲んであり、他人が作ったHTMLコードを見た場合、どこからがヘッダーでどこからがフッターなのかが一見わかりずらかったりしていましたね。
新しく登場したタグ
ヘッダーを表す部分 <header></header>
ナビゲーション部分 <nav></nav>
本文セクション部分 <section></section>
記事部分 <artcle></artcle>
フッター部分 <footer></footer>
以上のような各要素タグが追加されており、それぞれの役割に応じて適切な箇所に設置する事がができるようになっています。
これによりどこがどの部分なのか、その区切り部分がすぐに理解しやすくなっています。
あわせて読みたい関連記事
CSS3を使えばアニメーションも使える
HTML5は連携するCSSはバージョンが「CSS3」になった事もあり、インターネット上でアニメーションを動かせるようになりました。
HTML5になるとユーザーがWEBページ上で何らかのアクションを起こすと、それに反応して何らかのリアクションを返す行動ができるようになりました。
よく目にするのが、例えばギャラリーサイトなどですね。
お目当ての商品画像の上にマウスを乗せると寸法や値段を載せたキャプションが表示され、さらにマウスを離すと自動的に元の画像に戻るといったギミックです。
アニメーション例
あわせて読みたい関連記事
HTML5によるハイブリッドアプリ開発
アプリが作れる
HTML5ではアプリケーションの開発もできるようになりました。
このHTML5で作られるアプリは「ハイブリッドアプリ」と呼ばれています。「ウェブアプリ」と「ネイティブアプリ」の2つの技術を組み合わせたものですね。
ここで少し話がずれますがハイブリッドアプリについて少し触れたいと思います。
ウェブアプリとは
ウェブアプリケーションとは文字通りインターネットを経由してアプリケーションを使用するものです。例えば銀行のオンラインバンキングやWEBサイトのショピングカートがこれに当たります。
ウェブアプリのメリット・デメリット
メリットとして、使う側はアプリを端末にインストールしなくてもよく、サーバー側にしかデータがないので運営側は構成ファイルの更新が容易な事です。
デメリットとしては何かしらの端末（PCやタブレット・スマホなど）WEBサーバーとの通信をしないと使えない事です。
ネイティブアプリとは
一方、ネイティブアプリとはスマートフォンやタブレット端末自体で直接実行するものです。
例えばAppStoreの「iTunes」や、Androidの「Google Play」等からスマートフォンにアプリをダウンロードして、画面のアイコンをタップして起動するアプリを指します。
ネイティブアプリのメリット・デメリット
メリットとしてはダウンロードをした後はインターネットに繋がっていない状態でも使用ができる点です。今は完全にネットにつながらずに完結できるアプリの方が少ないかも知れませんが。
デメリットはスマホ端末に直接アプリをダウンロードするので、端末自体の容量をある程度食う事と、アップデートの際は自動ではなくユーザー自身で実行しなければならない事ですね。
良いトコ取りのハイブリッドアプリ
この両者をいいとこ取りしたのがハイブリッドアプリです。二つの技術を融合させることにより、iPhoneやAndroidなどの二つのプラットフォームの違いを特に意識することなくアプリ開発が可能です。
それぞれのプラットフォームでの開発に使われる固有の言語は基本的に違うのですが、HTML5を使う事でそれに影響されずに開発をする事ができます。いわゆるHTML5が共通言語になるという感じですね。
デメリットとしてはネイティブアプリよりも処理速度が遅くなってしまいます。この事からハイブリッドアプリは高速処理が必要なスマホゲームなどには向かないでしょう。
ですのでその用途に合わせて、ウェブアプリ・ネイティブアプリ・ハイブリッドアプリのそれぞれを使い分けることが大切ですね。
その他の変更点
新規要素の追加
markタグ、figureタグ、figcaptionタグ、dataタグ、timeタグ、progressタグ等のような多くの新しい要素が追加されています。
フォーム機能の改善
フォーム機能が改善され、input要素の新しいtype値や、outputなどの新しい要素も追加されています。
以下のサンプルはユーザーの操作でレンジ入力された結果をoutputタグを使って表示しています。
HTMLフォームソース
<form>
<fieldset>
満足度（5段階です）：
<input type="range" name="satisfuction" min="0" max="5">
<output name="result" onforminput="
value=satisfuction.value"></output>
</fieldset>
</form>
マウスで満足度の欄のバーを横に伸ばせるようになっています。
iframeタグのセキュリティレベル向上
iframeタグに改善がされ、セキュリティレベルが明確にされたiframeタグの描画が可能となりました。
<iframe src="example.html" sandbox="項目名"></iframe>
iframe要素にsandbox要素を追加すると、インラインフレーム内のコンテンツにセキュリティ上の制限をかけることができます。
sandboxセキュリティレベル
セキュリティの緩和設定
例：
<iframe src="example.html" sandbox="allow-same-origin"></iframe>
| allow-same-origin | 親文書と同じドメインを持つものとする |
| allow-top-navigation | 最上位のウィンドウの操作を許可する |
| allow-forms | フォームの送信を許可する |
| allow-scripts | スクリプトの実行を許可する |
| allow-pointer-lock | Pointer Lock APIを許可する |
| allow-popups | ポップアップを許可する |
HTMLへの数式埋込「mathML」
HTML文書に数式を直接埋め込むこともできるようになっています。
下の二次方程式の解の公式は画像でも特殊技術でもなくWEBページ上に直接表示しています。
二次方程式の解の公式
このようにWeb標準に沿った複雑な数式をWEBページに表示することができるようになります。
上記の数式が見えない方
MathMLに対応しているブラウザは Firefox・Safari・iOS Safariのみとなっています。
Google Chrome・Internet Explorer・Microsoft Edgeといった主要ブラウザはMathMLで記述された数式を表示できません（2019年11月時点）。
上記は画像ですが実際にこのように表示されます。
ファイル情報の操作
HTML5から登場した「File API」を用いると、JavaScriptでユーザーの選択したファイル情報を取得することができます。
これにより今までファイル選択のフォームは単に送信するだけだったのですが、複数のファイルを選択した時点で対象のファイル名やファイルチェックができるようになります。
さらにドラッグ&ドロップでファイルを引っ張ってくるなどよりユーザーに優しいファイル操作が実現できるようになります。
File APIサンプル
下記がFile APIのサンプルです。ファイル選択で「UTF-8で保存されたテキストファイル」を指定すると、そのファイルの中身を表示します。
<div><input type="file" id="file1"></div>
<div><output id="output1"></output></div>
続けて下のjavascriptコードをそのまま記述
javascriptコード
<script>
window.addEventListener("load", function() {
document.getElementById("file1").addEventListener("change", function() {
var files = document.getElementById('file1').files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
console.log("Name: " + file.name);
console.log("Size: " + file.size);
console.log("Type: " + file.type);
console.log("Date: " + file.lastModified);
console.log("Date: " + file.lastModifiedDate);
var reader = new FileReader();
reader.onprogress = function(evt) {
console.log("State: " + target.readyState);
console.log("Loaded: " + evt.loaded);
console.log("Total: " + evt.total);
};;
reader.onload = function(evt) {
console.log("State: " + evt.target.readyState);
console.log("Result: " + evt.target.result);
document.getElementById("output1").innerHTML = evt.target.result;
};
reader.onerror = function(evt) {
console.log(evt.target.error.name);
};
reader.readAsText(file, "utf-8");
}
});
});
</script>
