HTML5で追加された基本的なタグ
新しいタグの追加によって文章構造がより明確化できるようになりました。 HTMLの論理構造化はサイト構造の見通しを良くするのに加え、SEOの効果を見込めます。 ただし、現在HTML5で書かれているからといってSEOに有利ということは確認できていません。 しかしながら現在HTML5でマークアップすることが主流となりつつあります。 将来的なSEO効果は否定できないので、なるべくHTML5に沿ったマークアップがベターでしょう。- header
- ヘッダーであることを示す。
- fotter
- フッターであることを示す。
- article
- 単独で完結した記事であることを示す。
- section
- セクションを示すが特別な意味は持たない。 ※今まで使われていたdivがすべてsectionに置き換わるわけではない。
- aside
- コンテンツの補足情報であることを示す。
- nav
- ナビゲーションであることを示す。
- hgroup
- セクションの見出しの副題を示す。 ※この要素の中にはh1~h6要素しかいれることができない。
- figure
- 画像やビデオ、プログラムコードなどのコンテンツを示す。 ※figcaptionと一緒に使う事が多い。
- figcaption
- figure要素のコンテンツタイトルや説明文を示す。
フォーム機能で追加された代表的な属性
HTML5ではフォーム機能が強化されたので、これまでjavascriptで実装していたプレースホルダ・オートコンプリート・バリデーションなどの機能をネイティブで扱えるようになっており大変便利です。 まだブラウザ毎での実装に差がありますのでどのサイトでも使用できるものではありませんが、スマートフォンサイトでは実装できるものばかりですので、使わない手はありませんね。- [input placeholder="〇〇"]
- 入力欄に入力されたら消えるテキストを表示します。 ※Internet Explorer 8／9は実装されていません。
- [input autocomplete="on" list="hogehoge"]
- list=""で入力候補値のdatalist要素のIDを指定して入力候補を提示します。 ※ダブルクリックするとリストが表示されます。 ※type属性の値がpasswordの時は、list属性は指定できません。 ※Internet Explore 8／9とSafari 5.1では実装されていません。
- [datelist id="hogehoge"]
- [html] [/html] 入力候補を登録します。 ※Internet Explore 8／9とSafari 5.1では実装されていません。 ※対応していないブラウザでは正しくプレビューされません。
- [input type="tel"]
- 電話番号入力用。入力モードが数字・記号になります。 ※Internet Explore 8／9とSafari 5.1では実装されていません。
動画や音楽を扱うタグ
audio、videoタグをサポートしているブラウザであれば再生に関して色々な表示ができるようになります。 これまでのようにembetタグ+プラグインで表示する必要はありません。 まだ古いブラウザでサポートしていないものもありますので声を大にして使っていこうとは言えない状況でしょうか。 またブラウザ毎に再生できるファイルの拡張子が異なるため複数再生ファイルを用意する手間があるせいか、PCサイトでは今でもFLASHを使ったものが多いです。 しかしスマートフォンはFLASHが再生できないものが主流ですので、スマートフォン向けのサイトであればどんどん使っていけますね。 ※IE8を責めちゃいけないと思います。- [Video poster="hogehoge.jpg"]
- サムネイルの画像を表示します ※動画を再生できない場合でもサムネイルは表示されます。
- [Video controls]
- 再生・停止などのインターフェイスを表示します。
- [Video autoplay]
- 動画を自動再生します。
- [Video loop]
- 動画をループ再生します。
- [Video preload="auto"]
- 動画の自動読み込みを管理します。 設定はauto、none、metadate、とあります。 デフォルトの設定はautoとなっています。 ※metadateはメタデータ（サイズや長さなどの情報）だけを先読みするものです。
- [video src="hogehoge"]
- 再生する動画を指定します。
- [source src="hogegoe.拡張子" type="video/拡張子"]
- ブラウザごとに再生できる動画の形式が異なるため複数の動画を登録できます。 [html] [/html]
ブラウザごとの動画形式対応表
- 動画形式編
- Internet Explorer 9：H.264（mp4） Safari 5.1：H.264（mp4） Firefox 7：WebM、Ogg Theora Google Chrome 14：WebM、Ogg Theora Opera 11.5：WebM、Ogg Theora
- 音声形式編
- Internet Explorer 9：MP3 Safari 5.1：MP3、 AAC Firefox 7：Ogg Chrome 14：MP3、Ogg、 AAC Opera 11.5：Ogg
API関係
APIを使うことによって今まで複雑だった処理が便利に実装できるようになりました。 まだまだブラウザごとのサポートが異なるため今すぐ使えるというもので無いのが残念でなりませんが、HTML5でもっとも注目を集めているのがこのAPIなので放置しておいて良いものではないですね。 話題の多いAPIを調べてみました。- Canvas
- JavaScriptを使って図形や画像を取り込んで加工することができます。
高速な描画ですのでスマートフォン向けのゲームなどで注目されています。
- 対応ブラウザ
- IE9、Firefox 15、Chome22、Safari5.1、iOS3.2、Android2.1以上のバージョンで対応しています。
- SVG
- こちらもCanvas同様図形を描画するものですが、以下のような違いがあります。
- ・ベクター形式なので拡大しても綺麗な描画ができます。 ・図形毎にDOMの一部になります。 ・図形を書くためのHTMLタグがあります。 ・SVG用に用意されたタグに対してCSSで設定することもできます。 ※GoogleMapなどのサイトで利用されています。
- 対応ブラウザ
- IE9、Firefox 15、Chome22、Safari5.1、iOS3.2、Android3.0以上のバージョンで対応しています。
- ドラッグ＆ドロップAPI
- これまでもドラッグ＆ドロップはJavaScriptで実現できていたものですが、HTML5でドラッグ＆ドロップのイベントに関する属性が追加されて使いやすくなりました。
注目されている点はブラウザ内だけではなく、デスクトップからもドラッグ＆ドロップできるという点です。
inputタグでアップロードしていたものがドラッグ＆ドロップできると考えると便利なシーンがいくつもありますね。
- 対応ブラウザ
- IE7（7~9は部分的にサポートしています）、Firefox 15、Chome22、Safari5.1のバージョンで対応しています。
- File Api
- ローカル環境にあるファイルの情報を取得できるAPIです。
取得できるファイル情報は以下のようなものがあります。
- ・ファイルの名前 ・ファイルのデータサイズ ・ファイルのMIMEタイプ ・テキストファイルの内容 ・データのURLスキーム ・データのバイナリ
- 対応ブラウザ
- IE10（部分的にサポートしています）、Firefox 15、Chome22、Safari5.1（部分的にサポートしています）、iOS6、Android3.0（部分的にサポートしています）以上のバージョンで対応しています。
- Web Storage API
- データを保存するAPIです。
Cookieと似た動作をするものですが、下記のような違いがあります。
- ・保存できるデータ量がCookieに比べて多い ・有効期限がないこと ・いちいちサーバーに送信しない
- 対応ブラウザ
- IE10（部分的にサポートしています）、Firefox 15、Chome22、Safari5.1（部分的にサポートしています）、iOS6、Android3.0（部分的にサポートしています）以上のバージョンで対応しています。
- Application cache API
- ブラウザがオフライン状態のときにでもWEBサイトやWEBアプリを使用出来るようにするAPIです。
サイトにアクセスした際にCacheとしてローカル環境に保存します。
ただし、オフラインで表示されると言ってもサーバーへのリクエストが必要な場合は表示できませんので注意が必要です。
こちらもWeb Storage API同様、WEBアプリで注目されています。
※サーバーにリクエストしないようなサイトに限る。
- 対応ブラウザ
- IE10、Firefox 15、Chome22、Safari5.1、iOS3.2、Android2.1以上のバージョンで対応しています。
- Indexed Database API
- データベースをローカル環境に保存するAPIです。
JavaScriptで操作できるの特徴です。
Application cache APIと連携してデータベースも操作できるWEBアプリも作れる点に注目を集められています。
※スマートフォンの標準ブラウザでの実装が遅れています。
- 対応ブラウザ
- IE10、Firefox 15、Chome22（部分的にサポート）以上のバージョンで対応しています。
- Web Workers API
- 並列処理をするAPIです。
何かプログラムが処理されている間ブラウザが固まってしまうことがありますが、そういった場合でも処理ができるAPIです。
APIを複数利用したり、スペックに差がある端末などがありますので、HTML5が普及していけば行くほど注目されていくでしょう。
- 対応ブラウザ
- IE10、Firefox 15、Chome22、Safari5.1、iOS5.0以上のバージョンで対応しています。
- Geolocation API
- ユーザーの位置情報を取得するAPIです。
ユーザーに許可を求めて位置情報を取得できます。
地域密着の広告や地図情報と連動するようなWEBアプリで注目されています。
取得できる情報は下記のようになります。
- 緯度、経度、高度、緯度・経度・高度の誤差、方角、速度
- 対応ブラウザ
- IE9、Firefox 15、Chome22、Safari5.1、iOS3.2、Android2.1以上のバージョンで対応しています。