2014年10月に勧告され、さまざまなWebサイトで使われているHTML5。国内でも無印良品などHTML5で自社のWebサイトを構築している有力企業も少なくありません。現在ではほぼすべてのブラウザがHTML5に対応済みで、問題なく表示させることができます。
日ごろ携わっているクライアントのWebサイトがHTML4以前で構築されたものだったり、WordPressを利用したものだったりして、直接HTML5のコーディングを行う機会は少ないかもしれませんが、やはりWeb制作のプロフェッショナルである以上、デザインのトレンドやソリューション事例とともに最新のコードについても理解しておきたいもの。HTML5の具体的な4つの特徴をご紹介します。
・文章構造がよりシンプルに
HTML5では、記事であることを示す<article>やナビゲーションを示す<nav>や、1つのセクションとして規定する<section>といった新しい要素が追加されています。HTML4までのように、<div id=”content”>といったタグを記述する必要がないので文章構造がよりシンプルになり、必然的にソースのボリュームを抑えることができます。
・動画や音楽を簡単に埋め込める
HTML4以前のバージョンでは、Webサイトに動画や動的なコンテンツを埋め込むための方法はFlashが主流で、利用にはそれなりの知識が必要でした。それに対して、HTML5では<video>や<audio>といった動画・音声を埋め込むための専用タグが追加され、HTMLの知識だけで動画コンテンツなどをカタチにすることが可能です。
・CSS3との併用で手軽にアニメーションを作成
これまでアニメーションやフラットボタンを作成するためにはJavaScriptを用いる必要がありましたが、HTML5ではCSS3とあわせて利用することで、JavaScriptに頼らずに作成することが可能です。
・API追加によってウェブアプリケーションの構築が容易に
HTML4までは実現が難しかったさまざまなAPIが新たに追加されたのもHTML5の特徴です。これによって簡潔なスクリプトの記述だけでWebサイトにドラッグ&ドロップ機能や位置情報の取得機能を取り入れられるようになりました。同様にスマートフォンの加速度センサーの利用や、ローカルのファイル操作、マルチスレッドでのJavaScript実装もできるようになっています。