「HTML5という言葉はよく聞くようになったけど、今までのHTMLとどう違うのかよくわからない」
このように思われている方は少なくないのではないでしょうか。PC、スマホ、タブレットと、ホームページを閲覧するデバイスが多様化した今、ホームページ制作にはHTML5を使うのが合理的です。

今回は、HTML5の基礎とHTML4との違いをご紹介します。

HTML5とは

HTML5とはHTMLのバージョン5、つまり改訂版第5版の事を指しています。

最初のHTMLが開発されたのは1993年。そこからバージョンアップを重ね、現在メインとして使われているHTML4が開発されたのは1999年12月でした。

今回ご紹介するHTML5が勧告されたのが2014年10月28日です。
2016年8月現在では、ほとんどのブラウザで対応しておりますので問題なく利用できるでしょう。

HTML5で作られているホームページの事例

例えば下記のサイトはHTML5で作られています。

無印良品
LINE
Andrew Hoyer
ROXIK

HTMLのバージョンは、ソースコード内の「DOCTYPE宣言」で確認できます。
例えばHTML4では、W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> と書かれています。

これがHTML5の場合はと書かれています。

HTML4との違いとは

では、HTML4と具体的にどのような違いがあるのでしょうか。
改善されている部分を見てみましょう。

動画や音声の埋め込みが簡単になった

HTML4まで、サイト内で動画を再生させるためには「Flash」という技術を使って作成する必要がありました。
しかし、Flashを作成するにはHTMLと別の知識が必要になり、初心者の人には難しいものがあります。

ですがHTML5からは

先ほどご紹介した「Andrew Hoyer」や「ROXIK」もこの技術を利用しています。
また、パソコンでもスマホでも同じタグを使うことが出来ますので、機種を気にする必要がなくなりました。

HTMLの文章構造がシンプルになった

HTML4でホームページを作成すると、

や
などのように記載するタグが多くコードに書かれている文章量が多くなっていました。

しかしHTML5では文章構造を表現する新しい要素が加わったことによって、シンプルに見やすくなりました。

例えば、1つのセクションであることを示す

、記事であることを示す
、ナビゲーションであることを示す

ウェブアプリケーションを作りやすくなった

HTNL5では、HTML4までは実現が難しかったウェブアプリケーションが作りやすくなりました。

例えばユーザーの位置情報を取得したり、ドラッグ&ドロップ機能を追加したりということが簡単にできます。
HTML5になってから高度な機能を実現する為の様々なAPIが追加されたためです。

CSS3を同時に使用すれば、表現の幅が広がる。

HTML5とセットで使われることの多い「CSS3」という技術を使えば、Javascriptを使わずにアニメーションやフラットボタンの作成ができます。

これまでJavascriptでなければ作れなかった表現をCSSとHTMLで作れるようになれば、デザイナーで対応できる範囲が広がります。