【HTML５とは】絶対理解できるHTML5の基礎超入門

「リッチな表現はHTMLだけではできない」「音声や映像の処理は、HTMLではできない」というイメージを持つ人も多いのではないでしょうか。

いまやHTMLは音声や映像の処理、アプリ開発までもが守備範囲。今回は「HTML5」でできることについて詳しく解説します。

この記事は現役エンジニアによって監修済みです。

HTML5入門初心者のための押さえておきたい３つのポイント

HTML5とは

まずは自社のHPなどが表示される仕組みを知りましょう。

インターネット上で公開されているHPのベースは、HTMLです。

インターネットの住所であるURLを入力するとHPなどのWebページの情報を閲覧するためのブラウザに表示されます。そこでWebサイトからデータのやり取りが行われます。

この時に送り返されてくるのがHTMLです。

HTMLとはHyper Text Markup Language（ハイパーテキストマークアップランゲージ）と言います。Webページの内容を書くための言語のようなものです。

Hyper Textは文字や表や絵の一つ一つを対象物として扱いそれぞれ複数に関連性を持たせた文章のことです。リンクによって複数の文書が関連づけられます。

このようにHTMLは文章が主体のTextであるためそっけないので、CSS（Cascating Style Sheets　カスケーティングスタイルシート）でHTMLと合わせて見た目の色使い、各項目の配置であるレイアウトそして強調や太字などの文字の大きさを指定します。

Hyper Text Markup Languageの「Markup」とは目印のことです。表示されているそれぞれの文章がどんな見出しでどんな段落なのかを表しています。

これに言語である、Languageを組み合わせて「HTML」と言います。

HTMLの歴史

HTMLは今からさかのぼること２０年以上も前の1989年にスイスのジュネーブの欧州原子核研究機構で開発されました。

当時は研究の進捗や成果それに資料を探すのが大変でした。そこでサーバーにデータである情報を蓄積して必要な時にブラウザで取り出せるようにしました。そこでHTMLは誕生しました。

本来は情報の管理や整理が目的だったので、今のようにHPを装飾したり画像を取り込むなどはありませんでした。

1994年には非営利団体であるWorld Wide Web Consortiumが設立されました。その後、紆余曲折が色々とあり、ようやく2008年にHTML5の前身である草案が発表されました。

現在はバージョンアップされて現在の主流であるHTML5が2014年に勧告されました。当初の目的とはかけ離れた使われ方がされているのが面白いところですね。時代を感じさせます。

HTML5の特徴

HTMLはもともと要素と呼ばれる異なった役割を持った集合体です。

ヘッダー、見出し、段落やフッターなどの要素を組み合わせてWebページを構成しています。

先頭の一行目は「これからHTMLを使いますよ」という宣言が必要です。HTML4まではその宣言がやや複雑で長いものでしたが、HTML5からはたった一行のDOCTYPE宣言になっています。

次の二行目からはよくご存知のタグという要素で組み立てていきます。よく例えられるのがHTML要素を一番大きな箱と考えてその中身を入れ子構造で各要素を組み立てていきます。この入れ子構造を親要素・子要素と言います。

HTML要素の大きな箱の一番最初にくるのが、head要素と呼ばれるものです。

これはタイトルや設定などその文章に関する情報です。専門的な用語でデータに関するデータなのでメタデータということもあります。

この情報はGoogleなどの検索エンジンやブラウザなどに伝える項目を知らせるものです。なので直接Webページの内容としては表示されません。

次の要素であるbody要素がブラウザ上に直接表示される人に伝えるための情報になります。

HTML5は何ができるようになったのか

CSS3を使えばアニメーションも使える

CSSとは（Cascading Style Sheets　カスケーティング・スタイル・シート）の略でTextや文章のスタイルを指定する技術でHTMLと一緒に使用する言語です。

ウェブページが表示される時にどんな色なのかや書かれている文字の大きさや太さなどの飾り付けの役割をします。

CSSを使わずにHTMLだけでウェブページを表現することもできなくもありません。

しかし、HTMLは文章の構造自体を扱うので検索結果に理解されずにそのままどこかは飛ばされてしまう可能性もあります。自社のホームページがもし飛ばされてしまったらと考えただけで恐ろしい話です。ブラウザの閲覧環境によってはレイアウトが崩れてしまう可能性もあります。

CSSはバージョンが「CSS3」になり、HTML5ではアニメーションもウェブ上で動かせるようになりましたHTML5になるとユーザーがウェブページで何らかのアクションを起こすとそれに反応してリアクションを見せてくれるものになりました。
例えばよくあるのがギャラリーサイトなどでお目当の商品があってそれをマウスオーバーすると寸法や値段を載せたキャプションが表示されマウスを話すと自動的に元の画像に戻るといったものです。

動画や音声のデータを使える

ウェブで動画といえば、従来はFlashというみなさんよくご存知のアドビフラッシュを埋め込んで利用するのが主流でした。

埋込コード自体も難しいものでした。場合によっては、ユーザーがFlashのプラグインをインストールしていないこともありました。
アップデートも多く、その度にせっかく訪れてくれたお客様に手間をかけていました。

HTML5では新たに「video要素」というものができました。

これによりシンプルに動画を扱えるようになりました。Flashのプラグインは必要とせずにブラウザの基本的な機能や環境のみで動画の再生ができるのです。文書内に動画ファイルを埋め込む形にはなりますが、訪れてくれたくれたユーザーを振り分けることもできるように認証情報を求めることも可能です。

自動再生や動画ファイルの大きさなども指定することができるので幅広く活用ができそうですね。

video要素と同じように音を再生できる「audio要素」と呼ばれるものもHTML5より追加されました。
もちろん、Flashなどのプラグインは必要ないのでユーザーの負担はありません。お客様が会社のHPを開いて、いわばお店に来店して店の中へ入ると心地よいBGMが流れているようなそんな粋な演出もできます。ずっと音楽をループして流すこともできますので心地よさは倍増でしょう。

アプリも作れる

HTML5はアプリケーションの開発もできるようになりました。

インターネットに繋がっていないオフラインと言われる状態でも使用することが可能なのです。

このHTML5で作られるアプリはハイブリッドアプリと呼ばれています。自動車では電気とガソリン両方の車軸駆動の組み合わせでと有名になった「ハイブリッド」という言葉。

HTML5ではウェブアプリとネイティブアプリ技術の２つを組み合わせたものとして「ハイブリッド」の単語が使用されています。

ウェブアプリケーションとは文字どおりウェブのインターネットを経由してアプリケーションを使うものです。銀行のオンラインバンキングやネットでの販売のショピングカートがこれに当たります。

メリットは使う側はアプリをインストールしなくてもよく、運営側のファイルの更新も容易なことです。デメリットとしてはウェブサーバとの通信手段がなくては使えないことです。

一方、ネイティブアプリとはスマートフォンやタブレット端末内の演算装置を使って直接実行するものです。例えば、AppStoreのiTunesやAndroidのGooglePlayなどからスマートフォンにアプリをダウンロードしてアイコンから起動するというもの。インターネットに繋がっていないオフラインでも使用できます。

デメリットはユーザ端末に直接アプリをダウンロードするので端末容量がかかることと、アップデートの際は自動ではなくユーザ自身で実行しなければならないことです。

この二つのアプリのいいとこ取りをしたのが、ハイブリッドアプリです。二つの技術を一つに合わせることで、iphoneやAndroidなどの二つのプラットフォームの違いを意識することなくアプリ開発が可能です。それぞれのプラットフォーム固有の言語を押さえる必要もないのです。

ネイティブアプリよりも処理速度が遅くなってしまうのがデメリットです。このことから高速の処理を行っているゲームなどはハイブリッドアプリには向かないでしょう。

用途に合わせて、ウェブなのかネイティブなのかハイブリッドなのか使い分けることが大事です。

HTML5はタグで文章が埋め尽くされない

HTML4からHTML5の移行では新たに追加されるタグや逆に廃止されるタグがあります。タグとは荷札や会社でよく使う付箋をイメージするとわかりやすいです。コンピュータファイルに目印をつける記述のようなものです。そのタグですがHTML5では大きく簡素化されました。

代表的なものが、div要素です。HTML5からは例えばヘッダはヘッダ、フッタはフッタや記事は記事など要素の割り当てが明確になっています。

（例）
<div id=”header”> → <header>

要素が増えた分記述する容量も少なくなったので見た目がすっきりし、修正もやりやすくなりました。

HTML5で簡単にレスポンシブ対応

スマホ閲覧がテレビよりも長い？

1日スマートフォンを見ない日はありますか？

この記事をスマホで見ている人も多いはずです。NHKの「日本人とテレビ　2015」によると、5年前に比べてテレビを全く見ないという時間が20代から50代にかけて倍増しているのが読み取れます。これからはウェブをメディアとして捉えるとフレキシブルにPCとスマホに対応する必要がありそうです。

そもそもレスポンシブとは

ここ最近、レスポンシブウェブデザインと言う言葉をよく聞くようになりました。
そこで超基本的なことを、復習の意味でおさらいしておきましょう。

スマホ、タブレットやパソコンなどはそれぞれ当たり前ですが画面の大きさがが違います。４インチから２０インチぐらいまで様々な大きさがあります。ですが大きさに関係なく最適化されたウェブのページをたった一つのHTMLファイルで処理できるようになりました。
デメリットもあります。各画面サイズを一つのHTMLで処理することになります。見栄えからするとシンプルになりがちです。そしてHTMLを装飾するCSSファイルで各種デバイスの処理を行うので、やはりサイトが重くなる傾向があります。

とは言えGoogleはレスポンシブ・ウェブデザインを推奨しているのでSEO対策的にはベストな選択になるでしょう。

Flashとの関係

GoogleはChromeブラウザでのアドビ Flashの再生を自動で停止するようにないました。理由はFlash Playerの深刻なセキュリティホール。脆弱性が致命的であるとさえ報告されています。ウェブの不正改ざんの多数はFlashの脆弱性をついたものであることもあります。

これまでFlashで作られていたコンテンツの、HTML5への置き換えは着実に進んでいます。

HTML5の勧告

World Wide Web Consortium（以下、W3C）という国際的なウェブ技術の標準規格を広めていく非営利団体があります。

簡単に言うと、いろんな環境や場所でウェブを使えるようにと活動している機関です。

新しい技術や手法は最初のうちはなかなか広まりません。プロのウェブ制作者でも最初のうちは様子を見ます。そうすると広まるのに予想もつかない時間がかかったりします。
そこでW3Cがお墨付きを与えて「国際的に認められているから導入を推奨する」とアナウンスしているわけです。

2016年11月1日には、HTML5.1がW3Cにより勧告されました。W3Cの勧告を機に、HTML5の普及スピードは大きく上がりました。

まとめ

1.HTML5はユーザーフレンドリーになった

・HTMLは当初、情報の整理の為に開発されましたが、今はユーザにとって見やすくきっちりと整理されています。

2.HTML5で表現が豊かになった

・音声も動画も埋め込むことができるよになりHPの表現が豊かになりました。

・ウェブアプリケーションを作ることも可能になりました。

・作成する時にタブで文章が埋め尽くされないようになり、記事などの要素が明確に表現されるようになりました。

ぜひ、今回の記事をきっかけにHTML5の奥深さを体感してみてください！

↑目次へ戻る