初心者にも使いやすくなった！HTML5と従来バージョンの違い5つ

※本ページにはプロモーション(広告)が含まれています

HTML5を利用するメリット

では、HTML5を利用するメリットには、どんなものがあるのでしょうか？

1.より簡単な表示方法である

かつてHTMLといえば、タグを延々打つのも苦痛なくらい、複雑なタグの羅列でした。

文章だけではなく、画像や音声、動画を埋め込むには、タグを覚えてそれを記述しなければなりませんでした。しかもそのタグも、はじめと終わりを＜＞で閉じる必要があり、一文字でも違うと表示されないということも多々あり、制作者にとっては、大変な労力となっていました。

しかしHTML5は簡単なタグだけで、カッコを閉じる必要もありません。

また、div要素の簡素化が顕著で、ヘッダーやフッター、記事などの要素の割当が一目瞭然となっています。これなら複雑なHTMLを解読して、どこにどの要素を入れるか悩まなくてもよくなりました。

2.対応の機種を気にしないでいい

かつてのHTMLは、そのページを表示される対応機種も気にする必要がありました。ブラウザによって表示が違って見えることがあり、HTML内にブラウザの違いによって、見え方を記述する必要も一部ありました。

しかしHTML5からは、ブラウザの違いを気にする必要がないばかりか、むしろ スマートフォンで見るほうが快適なほど です。

このようにブラウザやデバイス（機種）の違いを気にする必要がないというのは大変なストレス軽減となります。

3.アプリも制作可能

アプリを作るとなると、なにか特別で難しいソフトが必要なのではないか、PCなども高性能なものが要るのではないか、などと思いがちですよね。

でもHTML5なら普通のPCで、しかもオフラインで作ることが可能なのです。これはネイティブアプリとウェブアプリという2つのアプリ技術を使ったものなので、「ハイブリッドアプリ」と呼ばれています。

さらにiPhone、Androidなどの違いを気にせずに、言語の違いも関係ありません。これがHTML5だけで出来てしまうのですから、すごいことです。

ただ、ちょっとインターネットにつなていない状態であるネイティブアプリに比べて速度がちょっと遅いことがあります。

HTML5を利用するデメリット

こんなにすごいHTML5ですが、実は利用する際にはデメリットもあります。それは一体何でしょうか？

1.正式版ではない

実はこのHTML5は、実装されると言われて久しいのですが、まだ草案の状態なのです。完全にWebページがHTML5に入れ替わるのはまだずいぶん先だと言われています。

そのため、まだ仕様が固まっていないので、変更がでる可能性があります。

2.ブラウザの対応状況

HTML5では、ウェブページを閲覧するブラウザを気にする必要がないと言いましたが、肝心のHTML5に対応するブラウザの実装状況が遅く、まだそれほど HTML5対応ブラウザが出回っていない ことが挙げられます。

ただ、各ベンダーはHTML5対応ブラウザに対しては積極的な姿勢を見せているため、実装される時期もFlashが使われなくなる2020年過ぎあたりではないかと言われています。

3.なかなか広まらない

HTML5が発表されてからずいぶんと年月が経っているのですが、いまだに従来のHTMLを使っているよ、と言った方も多いのではないでしょうか？

これはHTMLに限ったことではありませんが、新しい技術というのは、なかなか広まらないものです。「なにか不具合があってからでは遅い」とプロの技術者でさえ、様子を見てあまり最初のうちは使わない、忙しすぎて新しい技術を習得する余裕がないということも考えられます。

HTML5から使えるようになったタグ

HTML5には、新しく追加されたタグが沢山あります。HTML5に移行することで使えなくなったものなどもいくつかありますが、その多くは新しく追加されたタグに内容されるものばかりです。

本項目では HTML5から使えるようになったタグ をご紹介します。いずれもウェブサイト制作を手助けしてくれるものばかりです。把握しておけばいざという時に役立つこと間違いありません！

<article>

articleは 単体で独立しているコンテンツである事を示すタグ です。まとめサイトの記事やブログのエントリー、コメントなどが該当します。

文章に限らずコンテンツであれば<article>で括って大丈夫です。

<section>

sectionは 一つのセクションである事を示すタグ です。具体的な使用例を挙げると、記事の見出しなどに使用することが多くなります。またsectionタグの中には子要素としてh1～h6タグの見出しが必要となる特徴があります。

<audio>

audioは 音声を再生するために使うタグ です。再生に対応しているファイル形式は様々となっており、再生させるファイル形式は、src属性で指定します。

audioタグを使っても対応していない環境のユーザーは音声を再生することができません。このようなケースで対応していない旨を伝えるメッセージを表示させるには、audioタグの中に記述しましょう。

<video>

videoは 動画を再生するために使うタグ です。HTML5以前だとFlashなどのプラグインをインストールする必要がありましたが、HTML5から新しく追加されたvideoタグを使うことで簡単にブラウザ上で動画を扱うことができるようになりました。

videoタグ内に記述した文章は、videoタグに対応していない環境限定でメッセージとして表示されるようになります。この点はaudioタグと似通っていますね。

<source>

sourceは 動画や音声ファイルのURLや種類を指定する際に子要素として使用するタグ です。使える属性は「src」「type」「media」の三つがあります。

src属性

srcはファイルのパスを指定します。パスを指定しなければ、audioやvideoタグは正しく機能しませんので必須属性となります。

type属性

typeはファイル形式を指定します。ファイル形式を明確にしておくことで再生可能かどうかを事前に知らせることができます。

media属性

mediaは表示させるメディアを指定します。初期値はallとなっており、全てのデバイスで表示されるようになっています。

<keygen>

keygenは フォーム送信時に発行されるキーを暗号化する時に使うタグ です。keygenタグを使ってより確実なクライアント認証を行うことで、セキュリティ面が大きく向上することになります。

このようなセキュリティ対策をHTMLタグだけでも簡単にできるようになったのは非常に大きい点と言えます。

<ruby>

rubyは 漢字にルビをふる時に使うタグ です。以前よりIEでは独自採用されていましたが、HTML5で正式採用となりました。

rubyはルビを振るテキスト範囲を示し、子要素にrtタグやrpタグを使用することでルビを振ることができます。

<rb>

rbはルビを振る文字列を明示的に示すタグです。以前はrbの使用が必須とされていましたが、HTML5に追加されてからはrbタグを使用しなくてもよくなりました。rbタグを省略した記述も可能に。

<rt>

rtはルビとして表示させるふりがなの文字列を示すタグです。表示させるふりがなの指定は必須なのでrubyタグを使う上で必ず使うタグとなります。

まとめ

ここでは、HTML5についてご紹介しましたが、いかがだったでしょうか？
発表されてから久しいHTML5ですが、本格的に実装されるのはまだちょっと先のようです。その間にHTML5の概要をたっぷりと勉強しておくのにもいい機会だと言えるでしょう。

1 2