HTML5, きちんと。

HTML5, きちんと。 masataka yakura

こんばんは。矢倉といいます。

http://www.mitsue.co.jp/

Web 標準 Blog http://standards.mitsue.co.jp/

Opera Web標準カリキュラム http://dev.opera.com/articles/view/801

Web Designing 2009年11月号 (10月17日発売)

「HTML5 & CSS3 で Web は変わるのか？」

監修しました → (11月21日発売)

「プロクリエイターの作例に学ぶ XHTML+CSS 達人テクニック」

本日のテーマ：HTML5

まだまだ情報が少ない。

背景や目的についてもある程度は知ってて欲しい。

HTML5とは？ HTML5のセクション XHTMLはどうなる？勧告はいつごろ？もうひとつの目的どう使っていくか HTML5の新機能

HTML5 とは？

「Web プラットフォーム」その中核をなす仕様。

HTML4 や XHTML1 は「文書」の作成が目的だった。

HTML5 では新たに「アプリケーション」が加わる。

これまでのあゆみ

1998 年 2 月 XML 1.0 が勧告。

W3C は XML への移行を計画。

HTML は段階を経て XML に移行するプランに。

XHTML 1.0 ― HTML4 を XML 化 XHTML 1.1 ― 機能を細分化 XHTML 2.0 ― 新しく作り直し

2002 年～ブログが普及しだす。

「XHTML+CSS」が広まる。

ほとんどが text/html XMLとして使われなかった。

Web アプリが台頭し今の HTML では機能不足に。

新しい機能の実現に XML の普及を待つ必要がある？

2004 年 6 月 W3C のワークショップにて

ベンダー「HTML の拡張を！」

W3C「うちではやりませんがお好きにどうぞ。」

Apple, Mozilla, Opera WHATWG を立ち上げる。

ベンダーによって HTML の拡張が始められた。

ベンダーが関わった仕様は開発者から評価を得ていく。

2006 年 10 月 Tim Berners-Lee のブログにて

It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML […] all at once didn’t work. ― Tim Berners‐Lee: “Reinventing HTML”

「XML への移行はいっせいには進まなかった。」

2007 年 3 月新 HTML WG 設立。

WHATWG と協力して HTML5 の策定をスタート。

2009 年 5 月 Google I/O で大プッシュ。

少しずつ実装も進んでいる。

XHTML はどうなる？

XHTML2 WG が 2009 年末で活動終了と発表。

XHTML 2.0 は終了。でも、XHTML はなくならない。

HTML5 は XML として扱うことも可能（XHTML5）

HTML5 の HTML 構文でも「XMLっぽく」書けるように。

<img> ← 今までの HTML <img /> ← こっちも OK に！ ※ 混在もできます。

というわけで、ご心配なく。

Misunderstanding Markup http://standards.mitsue.co.jp/resources/mm_comic/

もうひとつの目的

「機能の拡張」もあるけれど「互換性」も重要なテーマ。

1. ブラウザーの互換性

Web アプリの開発には JavaScript や DOM が不可欠。

クロスブラウザー対応は厄介。互換性に問題がある。

非互換を生む 2 つの「ない」

実装がない。 → 対応状況が異なる

仕様がない。 → 実装に違いが生まれる

実装はベンダー依存だが仕様は定義して対応できる。

HTML5 では詳細な処理規則を定義。

2. 既存の実装との互換性

今のブラウザーやサイトとも互換性をある程度は保つ。

大きな変更はできないが今の環境を捨てずに済む。

互換性を持つことで Webを段階的に進化させられる。

HTML5 の新機能

APIの追加やマークアップの拡張など。

スクリプトから画像を扱う。応用はさまざま。

Bespin https://bespin.mozilla.com/

<canvas> で作られたエディタ。

Chrome Experiments http://www.chromeexperiments.com/

最新技術のショーケース。

<img> みたく、簡単に動画・音声を扱えるように。

<video src=“intro_html5.vid”> <a …> ダウンロード </a> </video>

プラグインじゃないので CSS や SVG と組み合わせが可能。

マークアップ

マークアップにも数多くの拡張や変更が。

<canvas> <audio> <video> <header> <footer> <section> <article> <nav> <aside> <hgroup> <figure> <details> <datalist> <meter> <progress> <time> <mark> <ruby> etc...

よく使われる class/id を要素として採用する。

定型句はよりシンプルに。

<!DOCTYPE html>

古いブラウザーでも機能する。

フォームの拡張も。

<input type=email ...> <input type=range ...> <input type=color ...> <input type=datetime ...> ...

名前 (必須)：メール (必須)：

サイト内検索：キーワードを入力

HTML5 のセクション

文書構造をより明示的に表せる。

<section> 章や節などの、ひとまとまり

<section> <h3> section 要素 </h3> <p> 章や節などを表す。</p> ... </section> <section> <h3> nav 要素 </h3> <p> 主要なナビゲーションを表す。</p> ... </section>

<section> <h3> article 要素 </h3> <p> 自己完結するセクションを表す。</p> <section> <h4> サンプル </h4> ... </section> </section>

<nav> 主要なナビゲーション

<nav class=“global”> <ul> <li> <a ...> ホーム </a> <li> <a ...> お知らせ </a> <li> <a ...> HTML5 Niteって？ </a> <li> <a ...> これまでのNite </a> <li> <a ...> お問い合わせ </a> </ul> </nav>

UA が <nav> を利用することでアクセシビリティも高まる？

<article> 記事など、自己完結するセクション

<article class=“entry” id=“vol40”> <h2> CSS Nite in Ginza, Vol. 40 </h2> <p> 4周年記念となるVol.40では… </p> <section> <h3> 事前登録について </h3> ... </section> ... </article>

フィードの <item> や <entry> などをイメージ。

<aside> 補足的な情報や、サイドバー

<section> <h2> nav 要素 </h2> <p> 主要なナビゲーションを表します。 </p> <aside> <p> 海外では「navi」よりも「nav」の方が多いみたいです。</p> </aside> </section>

セクションと見出しからアウトラインができる。

<article> <h1> HTML5 のセクション </h1> <nav> ... </nav> ... <section> <h2> nav 要素 </h2> ... <aside> <h3>「navi」ではなく「nav」</h3> ... </aside> ... </section> ...

HTML5 のセクション (見出しなしの目次) section 要素 nav 要素「navi」ではなく「nav」 article 要素 aside 要素

見出しだけでもアウトラインはできる。

<h1> HTML5 のセクション </h1> <h2> section 要素 </h2> <h2> nav 要素 </h2> <h3>「navi」ではなく「nav」</h3> <h2> article 要素 </h2> ...

HTML5 のセクション section 要素 nav 要素「navi」ではなく「nav」 article 要素 aside 要素

注意！

使い方を間違えるとアウトラインが壊れてしまう。

特に <section> は気をつけて。

<article class=“entry”> <header> <h2> タイトル </h2> </header> <section class=“body”> <p> 本文 </p> <p> テキストテキスト </p> </section> <footer> ... </footer> </article>

セクションは意味的なもの。アウトラインを意識して。

レイアウト目的なら <div> で。

勧告はいつごろ？

「2010 年 9 月」とある。でも、むりです。

「勧告」とは？

仕様がすべて実装されすぐに使える状態。

実装が終わるのは？

「2022 年」と……

「使えないじゃん！」

そんなことはないです。

たとえば、CSS 2.1 はまだ「勧告候補」です。

勧告されていませんが広く使われてます。

実装されている機能から使っていけばいい。

実装の本格的なスタートは「勧告候補」になった時。

2012 年あたりになる？

実装状況を知るには？

1. 開発者向けサイト

Mozilla Developer Center https://developer.mozilla.org/ja

Safari Dev Center http://developer.apple.com/safari/

2. 仕様書のステータス表示

どう使っていくか

「実装されてる機能から使え」とは言ったものの……

対応しないブラウザーはどう対処すればよいのか？

1. JavaScript で対処

ExplorerCanvas http://excanvas.sourceforge.net/

IE に <canvas> を。

Modernizr http://www.modernizr.com/

対応状況をチェックする。 classもつけてくれたりする。

2. 対応度合いにあわせて利用

最低限なものは、全ての環境で。できる子には、高機能なものを。

Progressive Enhancement って言われてるやつです。

placeholder 属性無くても不都合はない。

難しいことは確か。

HTML5 や CSS3 は勧告までとても時間がかかる。

今までと異なる考え方で取り組んでいく必要がある。

今は何をすれば？

実装も出てきたけれど仕様はまだまだ策定中。

「<article> と <section> を区別する必要はあるのか。」

「<section> の誤用が多い。いっそのこと削除しては？」

仕様がドラスティックに変更される可能性も……

使う際には、リスクの認識を。

おわりに

「情報が少ない」といいました。

みんなが使っていく仕様情報はみんなで共有したい。

調べたことをまとめて情報を増やしていって欲しい。

ありがとうございました。

Contact: yakura-masataka@mitsue.co.jp

HTML5, きちんと。

8 comments

Notes on slide 1

47 Favorites