Web サイトを作るときに必ず目にする「HTML」。でも、「HTML」と「HTML5」って何が違うんだろう？って思ったことはありませんか？実は、HTML5 は HTML の進化版なんです。この二つの違いを知ることで、Web サイトがどうやって作られてきたのか、そしてこれからどうなっていくのかが、もっとよくわかるようになりますよ！今回は、そんな「html と html5 の 違い」を、わかりやすく、そして詳しく解説していきます。
HTML5 がもたらした大きな変化
HTML5 は、単に新しいバージョンというだけでなく、Web の可能性を大きく広げた画期的な進化を遂げました。以前の HTML では難しかった表現や、外部のツールに頼らなければできなかったことが、HTML5 では標準機能としてできるようになりました。これは、Web サイトがもっとリッチでインタラクティブになるための、大きな一歩だったと言えます。
具体的に、HTML5 でできるようになったことをいくつか見てみましょう。
- 動画や音声の再生が簡単になった！
- ゲームやアニメーションもブラウザ上で動かせるようになった！
- オフラインでも使える Web アプリが作れるようになった！
これらの変化は、Web サイトをより豊かに、そしてユーザーにとって使いやすいものにする上で、非常に重要です。 以前は Flash などを使わないとできなかったことが、HTML5 の登場によって、特別なプラグインなしで実現できるようになったのです。
新しい「セマンティック」タグの登場
HTML5 の一番大きな特徴の一つに、新しい「セマンティック」タグの追加が挙げられます。セマンティックタグとは、そのタグがどのような内容を表しているのかを、コンピューターにわかりやすく伝えるためのタグのことです。
以前の HTML では、見た目を整えるために
HTML5 では、以下のような新しいタグが追加されました。
| タグ名 | 意味 |
|---|---|
| <header> | ヘッダー部分 |
| <nav> | ナビゲーション（メニュー）部分 |
| <article> | 記事などの独立したコンテンツ |
| <aside> | 補足情報（サイドバーなど） |
| <footer> | フッター部分 |
これらのタグを使うことで、Web サイトの構造がより明確になり、検索エンジンが内容を理解しやすくなるだけでなく、スクリーンリーダー（視覚障がいのある方が Web サイトの内容を音声で聞くためのツール）などにも、より正確な情報を提供できるようになります。 Web サイトのアクセシビリティ（誰でも利用しやすくすること）を高める上で、セマンティックタグの役割は非常に大きいのです。
マルチメディア機能の強化
HTML5 は、動画や音声といったマルチメディアコンテンツを、より簡単に、そして柔軟に扱えるようになりました。以前は、動画を Web サイトに埋め込むために、特別なプラグイン（Flash Player など）が必要だったり、複雑なコードを書く必要がありました。
しかし、HTML5 では、標準で
<video>
タグと
<audio>
タグが用意されています。
- <video> タグ： Web サイトに動画を埋め込むことができます。再生ボタンや音量調整などのコントロールも、標準で用意されており、簡単にカスタマイズできます。
- <audio> タグ： Web サイトに音声ファイルを埋め込むことができます。音楽プレイヤーのようなものも、比較的簡単に作ることができます。
これらのタグのおかげで、特別なソフトをインストールしていなくても、ほとんどのブラウザで動画や音声を楽しむことができるようになりました。 これは、Web サイトの表現力を格段に高め、ユーザー体験を向上させるための大きな進歩と言えます。
Canvas API によるグラフィック描画
HTML5 には、
<canvas>
という新しいタグが追加されました。これは、JavaScript を使って、ブラウザ上に直接図形やイラストを描画するための機能です。
以前は、複雑なグラフィックを描画するために、Flash などの外部技術が必要でした。しかし、
<canvas>
を使うことで、特別なプラグインなしで、以下のようなことが可能になりました。
- ゲームのキャラクターや背景を描く
- グラフやチャートを動的に表示する
- 写真にフィルターをかけたり、編集したりする
この Canvas API の登場は、Web ブラウザ上でリッチなグラフィック体験を提供するための扉を開きました。 これにより、Web アプリケーションの可能性が大きく広がり、よりインタラクティブで魅力的な Web サイトが作れるようになったのです。
アプリケーションキャッシュ
HTML5 には、アプリケーションキャッシュという機能があります。これは、Web サイトの一部をユーザーのブラウザに保存しておくことで、インターネットに接続していないオフラインの状態でも Web サイトを表示したり、一部の機能を使えたりするようにする仕組みです。
例えば、以下のような Web アプリケーションが考えられます。
| 機能 | HTML5 で可能になったこと |
|---|---|
| メモ帳アプリ | インターネットがなくてもメモを作成・閲覧できる。 |
| 簡易的なゲーム | オフラインでもプレイできる。 |
このアプリケーションキャッシュ機能は、Web アプリケーションをより身近で、どこでも使えるものにするための重要な一歩でした。 ユーザーは、常にインターネットに接続していなくても、お気に入りの Web アプリケーションを利用できるようになり、利便性が向上しました。
WebSocket によるリアルタイム通信
HTML5 では、WebSocket という技術が標準でサポートされるようになりました。これは、 Web サーバーと Web ブラウザが、常に双方向で通信できる仕組みです。
以前は、リアルタイムで情報をやり取りするためには、サーバーに何度も問い合わせる（ポーリング）必要があり、効率が悪く、サーバーにも負担がかかっていました。
WebSocket を使うと、以下のようなことがリアルタイムで実現できます。
- チャットアプリケーション
- オンラインゲームでのプレイヤー間の通信
- 株価などのリアルタイム更新情報
WebSocket の登場により、Web サイトはよりダイナミックで、ユーザー同士のインタラクションが活発なものになりました。 リアルタイム性が求められる様々な Web サービスで、この技術が活用されています。
まとめ：HTML5 は Web をもっと便利で楽しくした！
ここまで、HTML と HTML5 の違いについて、様々な側面から見てきました。HTML5 は、単に見た目を整えるだけでなく、Web サイトに動きや対話性、そしてオフラインでの利用といった、新しい可能性をもたらしました。新しいタグや API の登場は、Web 開発者にとって表現の幅を広げ、私たちユーザーにとっても、より豊かで便利な Web 体験を提供してくれるようになったのです。