約17年ぶりの規格更新。HTML5で出来るようになった事とは？

こんにちは。

 

スターティアラボ　ブログ編集部です。

 

少し前のお話になりますが、先日10月28日、Webの標準化を目的とした団体であるW3Cが、ウェブ上のマークアップ言語、HTMLの第5版にあたる「HTML5」をついに正式に勧告したとして公開されましたね。

 

※ご存知でない方はこちら

 

【IT-pro　W3CがHTML5を正式勧告　】

http://itpro.nikkeibp.co.jp/atcl/news/14/102901678/

 

1997年の第4版にあたるHTML4の勧告から17年、HTML5の勧告によってどんなことが出来るようになったのか、少しではありますが紹介していきたいと思います。

 

 

 

 

 

 

1.W3Cとは？

World Wide Web Consortium(ワールドワイドウェブコンソーシアム)

Web技術に関わりの深い企業、研究所、個人の方もおり、そういった複数の機関が集まり、Web技術の標準化を進める国際的な非営利団体のことです。

 

このW3Cは1994年、Tim Berners-Lee(ティム・バーナーズ=リー)氏によって設立されました。ご存知の方は多いと思いますが、HTMLを開発した人物でもあり、world wide Webの仕組みを考案、今日のインターネットの基礎を築いた人物でもありますね。

 

「W3C勧告」とは、W3Cが提唱する標準のことを言います。HTMLの他にも、CSSやXMLなどを馴染みのあるWeb技術の勧告もしているんです。また、W3Cによって勧告されたWeb関連技術を「Web標準」とも言います。

 

勧告までの道のりですが、主に以下のような工程になっています。

 

①作業草稿

②最終草案

③勧告候補

④勧告案

⑤W3C勧告

 

 

参照：

 

▼World Wide Web Consortium Process Document

http://www.w3.org/2014/Process-20140801/

 

▼The Web KANZAKI

http://www.kanzaki.com/w3c/process.html

 

このように5段階の工程を踏んで、ようやくWeb標準とされるんですね。

 

では、なぜ今回HTML5が勧告となったのでしょうか？ご説明していきます。

 

 

 

2.HTML5誕生の経緯

HTML5誕生の背景には、ウェブの進化があげられます。

 

1999年にHTML4.01が勧告となりまして、こちらは完成度が高いことで当初では問題がなかったのですが、ウェブアプリケーションへの需要、特に、より高度かつ複雑な機能や性能を持ったウェブアプリケーションへの需要が徐々に高まっていきました。そのため、ウェブの現状にマッチしなくなってきました。そこで、W3CがHTML4に代わる"次のHTML"として策定を進めてきたわけです。

 

HTML5は、HTML文書、XHTML文書のマークアップ言語だけでなく、新しい要素が、HTML構造を改善するために追加され、DOM等のWebアプリケーションも使えるなど、広範囲な仕様になったといえます。

 

では、実際どんなことができるようになったのか、いくつか参考サイトをみてみましょう。

 

 

 

3.HTML4からの変更点

HTML4からの変更点は以下の通りになります。

 

①新しい要素や属性の追加

 

②HTML4以前では使えた要素や属性が一部廃止

 

③より明確に文書構造を示すことができる

 

④フォームの入力補助やチェック機能などが充実

 

⑤動画や音声データをHTMLからシンプルに扱える

 

⑥様々なAPIが追加される

 

 

 

4.実例サイトでみるHTML5

それではHTML5について、実際のWebサイトからどのようなものかいくつかご紹介します。

 

 

①山崎マーク

 

 

 

②美容室 ラムネ

 

 

こちらの二つは、新しく追加されたvideo要素（映像コンテンツを用いるときに使用）を使ったサイトになっています。video要素は、HTML5から新しく追加された要素です。

 

ファーストビューで、インパクトあるイメージをユーザーに届ける事が出来るので、その会社の魅力がWebサイトからすごく伝わりやすい作りですね。

 

 

③CINEMATIC

 

 

 

④Beatbox Academy

 

こちらの二つは、audio要素（オーディオファイルを読み込むときに使用）を使ったサイトです。audio要素も、HTML5から新しく追加された要素です。

 

audio要素のメリットは、Flashなど、通常であれば動画・音声の再生時に必要となるプラグインを使わずに再生できることです。

 

よりユーザビリティ高く、動画コンテンツを届けられるわけですね。

 

 

⑤株式会社RINN

 

 

⑥A STRUCTURE DESIGN

 

HTML5から追加されたcanvas要素（ブラウザ上に絵を描くときの使用）を使ったサイトです。

 

javascriptを使って描画していくための要素であり、元々はMac OSで搭載されていた仕様でしたが、その有用性からその他のブラウザにも搭載され、今やほとんどのメジャーブラウザで利用可能です。

 

 

 

5.まとめ

このようにHTMLそのものが大きく変更されたことにより、今までのWebとは違った表現方法で閲覧者を楽しませることができるのではないのでしょうか？

 

また、CSS3やjavascriptを使うことでHTML5の表現力もより一層広がるのではないだろうかと思います。

 

有効なのは知っているけど、「HTML5がそもそもどういったものなのか？」について把握していない方はご参考にしていただければ嬉しいですね。表面ではない、本当の意味でHTMLを理解する事で、サイト全体の構造理解に繋がります。