徹底的にHTML5宣言 - 徹底的にHTML5宣言

男なら実装してみせようHTML5！30代でも女子というのなら30代でも男子って言っていいよね？でおなじみの理系メガネが、皆さんが思っているHTML5への疑問に徹底的にお答えするタグ辞典です。特にWEBデザイナーという肩書の方にはHTML5には大注目していただきたい。デザインだけではこの業界に生き残れないので（自分もそうだから）、これを機会にHTML5マスターになって自サイトを最先端の技術で彩ろう！

※このサイト自体はHTML5で実装されておりません！（スマホサイト向けに実装したほうがいいからね。PCサイトへの実装はブラウザの関係でもうちょっと待ったほうがいいよ！）

デザイナーはこれを読め

なぜデザイナーが HTML5 に関心を持つべきなのか

私たちみんなの関心は薄かったものの、しばらくしてから、HTML5 は最終的に関心を引くものにふさわしいものとなった。開発コミュニティ（代表的なものとしてSuperFriendsがあげられる）は、仕様の実践的な要素を議論したり、賛否両論の要素を含めるかどうかを議論したり、私たちが HTML5 を解き放つことができるタイムフレームを決めたりするようになってきた。

しかし、Post-It、sketch、.psd といった世界に慣れてしまった私たち、そう、デザイナーは、あまり主張することはなかった。おそらく、私たちは、CSS3の華やかさや、それらの表面的なスリルに惑わされていたのだろう。（やれ、丸い角だ！、グラデーションだ！、透明だ！と。）そうでなければ、私たちは@font-faceの奴隷状態になっていたということだ。適度なウェブ・タイポグラフィの時代になることを待ち望んでいたのだろう。

無理もなかろう。しかし、デザイナーも HTML5 でエキサイトする時がきたのだ。

ある程度は、それも実践で使えるようになってきた。あなたのデザインの雰囲気、つまり、ビジュアル、ウェブ・インタラクション、ユーザ・エクスペリエンスが何であれ、ネイティブなテクノロジーを知っていれば、もっといい仕事ができるようになるのだ。指揮者がオーケストラの楽器の素質を理解していなければいけないのと同じように、デザイナーはウェブの言語を理解しておく必要があるのだ。

しかし、HTML5 は、単に私たちのスキルを研ぎ澄ますだけではない。私たちがウェブをデザインする方法に大きな違いが出てくるのだ。

セマンティックな要素

インフォメーション・アーキテクト（広義に捕らえれば、ユーザー・エクスペリエンス・デザイナーも）は、HTML5 の新要素によって血が騒ぐに違いない。 <nav>,<header>,<aside>などだ。それらはすぐに今日のウェブに変革をもたらすものではないが、将来のための投資なのだ。情報を伴ったものを使いやすくするということは、IA の中心的なテーマだ。そして、それゆえに、その実践者は、マシン可読なセマンティクスが提供するだろう新しいエクスペリエンスの先端にいるに違いない。HTML5 は、私たちに、<div>だらけの世界よりはもっと意味がある方法でテキストをマークアップできるようにしてくれる。つまり、私たちは、まもなく、サブページレベルで現れるアプリケーションを見ることを意味するのだ。私たちは上っ面だけを見始めたに過ぎない。Operator toolbarや、iGoogleのカスタマイズ可能な UI を考えてみてほしい。しかし、私たちは、セマンティクスをリッチにすることで、どのような形でエンド・ユーザーにベネフィットをもたらすことができるのかを考えて、デザインを掘り下げる必要があるだろう。

API と、その他の拡張

現時点では、HTML5 の API には、完成には程遠いものもがあるのは確かだが、それらに磨きがかかれば、新たな魅力的な機会とチャレンジを私たちに与えることになるだろう。

位置情報サービスのデザイナーなら、当然、geolocation APIが計り知れない価値を持っていることがわかるだろう。contentEditable 属性は、JavaScript や独自のインタフェースに頼らずに、ウェブを本当の意味で読み書き可能とするパワーを私たちに与えてくれる。新たに規定された input のタイプ（type=”search”など）は、入力機能において、これまでになかった視覚的な刺激を提供することができる。もちろん、これは、ブラウザーメーカーがどのようにそれを実装するかに依存する。

今までは、私たちの分野を、表示域とウェブサーバに限定されたものとして簡単に考えることができた。しかし、HTML5 は、シームレス、つまり、デスクトップとオフラインとオンラインのエクスペリエンスの違いをなくす方向に向かっている：たとえば、ドラッグ・アンド・ドロップ APIは、オンラインとデスクトップの違いが曖昧になるのがわかるだろう。ローカル・ストレージは、ネット接続が貧弱な場合でも、ウェブと同じようなエクスペリエンスを実現することができるだろう。このひとつにまとめられるということは、明らかに良いことだ。しかし、私たちは、ユーザーのリクエストで、それらの隠されてしまった継ぎ目をどうやって見えるようにするのかについても、考案しなければいけない。ユーザーは、彼らの位置がどうやって投稿されるのか、そして、どんなデータが彼らのマシンと同期されるのか、を把握するべきなのだ。

<video>, <audio>, <canvas>

標準の世界と Flash の世界の間には、よく言われるような溝があることは確かだ。これらの新たに導入されたメディア要素（特に<canvas>）の到来を、Adobe の申し子の死の前触れと見る人もいる。

私は、これは有望とも魅力があるあるとも思わない。どちらのテクノロジーもパーフェクトではない。もちろん、Flash はプロプライエタリであるがゆえに、ブラウザーとユーザーの間に立つサード・パーティの気まぐれに支配されることになる。<canvas>は、アクセシビリティに問題があることが分かっている。しかし、それら 2 つは、もし私たちがそれぞれの強みを引き出せるなら、どちらも共存できるのだ。現在の Flash アプリケーションには、<canvas>のほうが適しているものもある。特に、グラフ、アニメーション、インフォグラフィックのようなダイナミックなビジュアライゼーションだ。アプリケーションの中には、Flash のパワフルな能力の恩恵を受けるものもあるだろう。ゲームや重いインタラクティブ・ウィジットだ。

話はそれるが、リッチなメディア要素を実行するために、外部プラグインに依存する必要がないという点においては、確かに、ユーザー・エクスペリエンスのベネフィットはある。そして、<video>と<audio>要素を持ち上げるられるのを見るのは、おもしろいだろう。当初は、そのインタフェース要素を取り込んで定義することは、ブラウザー・メーカーの肩にかかることになるだろうが、私たちは、毎日のウェブ・エクスペリエンスにそれらを統合する方法を理解する必要があるだろう。幸いなことに、それらは他の HTML 要素と同じようにスタイルできるのだ。もし、あなたの映像美学がボックス・シャドーを伴う傾斜イメージに頼っているなら、同じことをビデオにも簡単に適用できるのだ。

とはいうものの、私たちは不都合な真実を無視することはできない。イバラのコーデック問題だ。きっと、誰もが、それを早く解決してほしいと思っていることだろう。

デザイナーに何ができるのか？

かなり忍耐強く細部にこだわるデザイナーでない限り、仕様のすべてを読んで、WHATWG メーリングリストでさらに細かい点を議論したいと思わないだろう。それは、まったくデザイナーの役割ではない。

しかし、コミュニティとして、私たちが HTML5 について語り始めることは大事だ。もし、あなたが初めて HTML を触るのであれば、それを学ぶにはもってこいのタイミングだ。このサイトの記事とHTML5 のプレビューは、HTML5 とそれ以前との違いに関する有益なガイダンスとなる。前述のとおり、デザイナーは、ディベロッパの友人と語り合うべきだ：このテクノロジーに関してもう何もいうことがないなんていう革新派は、ほとんどいないはずだ。彼らは、実践における変革をどう見ているのだろうか？私たちは、HTML5 の到来に向けて、私たちのサイトを準備するために、何ができるのだろうか？私たちはウェブをもっと良い場所にするために、どうやって、その長所を生かした構築できるのだろうか？

私たちはまだ、HTML5 を使って何を成し遂げられるのか分からない。しかし、ウェブのボキャブラリーがこれを強烈に変革するということは、めったにないことだ。私たちは、今から準備すれば、ユーザーのオンライン・ライフにイノベーションを持ち込む大きなチャンスとなるだろう。

ここで紹介するタグ

<article>: 記事であることを示す
<aside>: 余談であることを示す
<audio>: 音声を再生する
<canvas>: 図形を描く
<command>: 操作メニューの各コマンドを指定する
<datalist>: 入力候補となるデータリストを定義する
<details>: 備考や操作手段などの詳細情報を示す
<embed>: プラグインデータを埋め込む
<figcaption>: 図表のキャプションを示す
<figure>: 図表であることを示す
<footer>: フッタであることを示す
<header>: ヘッダであることを示す
<hgroup>: セクションの見出しを表す、見出しをまとめる
<keygen>: フォーム送信時にキーを発行する
<mark>: 文書内の該当テキストを目立たせる
<menu>: 操作メニューを作成する
<meter>: 規定範囲内の測定値を表す
<nav>: ナビゲーションであることを示す
<output>: 計算結果を示す
<progress>: タスク完了までの進行状況を示す
<section>: 一つのセクションであることを示す
<source>: 動画や音声などのURLや種類を指定する
<summary>: <details>の内容の要約を示す
<time>: 日付や時刻を正確に示す
<video>: 動画を再生する
<rp>: ルビを囲む記号を指定する
<rt>: ルビのテキストを指定する
<ruby>: ルビをふる

新しい属性

HTML5 は HTML4 で定義されていた要素に、新しい属性を導入しました。

a要素とarea要素にmedia属性が追加されました。これはlink要素との一貫性のためです。
area要素にhreflang属性、type属性、rel属性が追加されました。これはa要素とlink要素との一貫性のためです。
base要素にtarget属性が追加されました。これはa要素との一貫性のためです。また、すでに広くサポートされてもいます。
meta要素にcharset属性が追加されました。これはすでに広くサポートされており、また文書の文字エンコーディングを指定するための、より素敵な方法です。
input,select,textarea,button要素に、新しくautofocus属性が追加されました (ただし、type属性にhiddenが指定されたinput要素には指定できません)。この属性は、ページのロード時にフォームコントロールにフォーカスを与えるものです。ユーザーが自動フォーカス機能をオフにできることも含めて、この属性はユーザーエクスペリエンスを向上させるでしょう。
input要素とtextarea要素にplaceholder属性が追加されました。この属性はユーザーに対し、フォームに入力する情報についてヒントを与えるためのものです。<input type=email placeholder=”a@b.com”>
input,output,select,textarea,button,label,object,fieldset要素にform属性が追加されました。この属性はコントロールが属するフォームを指定するためのものです。これにより、これらの要素は目的のform要素の中に書かなくてもそのform要素に属すことができます。<label>Email: <input type=email form=foo name=email> </label> <form id=foo></form>
input要素とtextarea要素にrequired属性が追加されました (ただし、type属性にhidden,image,submitなど、何らかのボタンタイプが指定されたinput要素には指定できません)。この属性は、フォームを送信するためにユーザーが値を入力しなければならないコントロールを指定します。selectに指定する場合、最初のoption要素は値が空のプレースホルダでなれけばなりません。<label>Color: <select name=color required> <option value=””>Choose one <option>Red <option>Green <option>Blue </select></label>
fieldset要素はdisabled属性を指定できるようになりました。この属性を指定することで、すべての子孫コントロールを無効化することができます。また、スクリプトからのアクセスに利用する目的でname属性も導入されました。
input要素は次に挙げる新しい属性により、さまざまな制約を加えることができるようになりました。autocomplete,min,max,multiple,pattern,stepがその属性です。また、先に述べたように、datalist要素と併用するlist属性も存在します。
input要素とtextarea要素にdirname属性が導入されました。ユーザーが送信する内容の書字方向に影響します。
textarea要素にmaxlength属性とwrap属性が追加されました。前者は入力可能な文字数を、後者は送信される内容の行送りの挙動を制御するものです。
form要素に、新しくnovalidate属性が追加されました。この属性により、フォーム検証を無効にすることができます (つまり、フォームをいつでも送信可能にすることができます)。
input要素とbutton要素に新しくformaction,formenctype,formmethod,formnovalidate,formtarget属性が加わりました。これらの属性が記述されている場合、form要素のaction,enctype,method,novalidate,target属性は上書きされます。
menu要素は2つの新しい属性type,labelを導入しました。これらの属性により、要素を典型的なユーザーインターフェースで見られるようなメニューに変形させることができます。またグローバル属性contextmenuと併用することで、コンテキストメニューの提供も行うことができるようになりました。
style要素に新しくscoped属性が加わりました。これによりスコープを絞ったスタイルシートの指定が可能となります。このようなstyle要素によるスタイル指定は、ローカルツリーにのみ適用されます。
script要素に新しくasync属性が加わりました。この属性はスクリプトのローディングおよび実行に影響を与えます。
html要素はmanifestと呼ばれる新しい属性を持つことができるようになりました。この属性は、オフライン Web アプリケーションのための API と強調し、アプリケーションキャッシュのマニフェストを指定します。
link要素はsizes属性を持つようになりました。この属性はrel属性の値icon(favicon の指定などに利用) と組み合わせ、参照するアイコンの大きさを指定するために利用されます。つまり、異なる大きさのアイコンを指定できるようになります。
ol要素はreversedと呼ばれる新しい属性を持つことができるようになりました。この属性を指定することで、リストが降順であることを示すことができます。
iframe要素は2つの新しい属性seamlessとsandboxを持つようになりました。これらはたとえばブログのコメントなど、内容をサンドボックス化したい時に利用します。

HTML4 で定義されていたいくつかの属性がすべての要素に適用可能となりました。accesskey,class,dir,id,lang,style,tabindex,title属性がその属性で、これらはグローバル属性と呼ばれます。また、XHTML 1.0 においてxml:space属性はいくつかの要素にしか適用できませんでしたが、HTML5 の XHTML 構文ではすべての要素に適用可能となりました。

さらに、新しいグローバル属性も導入されました。

contenteditable属性は、指定された要素が編集可能領域であることを示します。編集可能である場合は、ユーザーがその内容を変更し、マークアップを操作することができます。
contextmenu属性は、製作者によって提供されるコンテキストメニューを指定します。
data-*属性は、ページ作成者が好きに定義することのできる属性です。将来の HTML との衝突を避けるため、属性にdata-という接頭辞をつける必要がありますが、それ以外は好きな属性を定義できます。しかしながらこの属性は、ユーザーエージェントの拡張として利用することはできません。
draggable属性とdropzone属性は、新しく定義されたドラッグ & ドロップ API と組み合わせて利用します。
hidden属性は、現在またはこの先において、意味を成さない要素を表します。
role属性とaria-*属性群は、支援技術を指示するために利用されます。
spellcheck属性は、内容のスペルチェックを行うかどうかを指定します。

注意！

HTML5はまだ正式に仕様が固まっていない状態であること
- 今後、仕様が変わる可能性がある
HTML5はブラウザごとに実装状況が異なる
- IE6・IE7ではHTML5がほぼ対応していない
- 同じブラウザでも、バージョンごとに対応の有無がある

最近では各主要ブラウザがHTML5を積極的に取り入れているので、今後この問題は解決されると思われる。

だが、HTML5に対応していないブラウザでサイトを閲覧されることは十二分に予想されるため、パソコン向けのHPでは実装はまだ早い。

なので、HTML5をサポートしているスマートフォンに搭載されているブラウザ向けに実装するのが良いだろう。