![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”](https://image.slidesharecdn.com/talkhtml520091110-091111233344-phpapp02/85/HTML5-36-320.jpg)
HTML5, きちんと。
- 7. 「HTML5 & CSS3 で Web は変わるのか？」
- 10. 本日のテーマ：HTML5
- 11. まだまだ情報が少ない。
- 13. HTML5とは？ HTML5のセクション XHTMLはどうなる？ 勧告はいつごろ？ もうひとつの目的 どう使っていくか HTML5の新機能
- 14. HTML5 とは？
- 16. HTML4 や XHTML1 は 「文書」の作成が目的だった。
- 18. これまでのあゆみ
- 19. 1998 年 2 月 XML 1.0 が勧告。
- 20. W3C は XML への移行を計画。
- 22. XHTML 1.0 ― HTML4 を XML 化 XHTML 1.1 ― 機能を細分化 XHTML 2.0 ― 新しく作り直し
- 24. 「XHTML+CSS」が広まる。
- 27. Web アプリが台頭し 今の HTML では機能不足に。
- 29. 2004 年 6 月 W3C のワークショップにて
- 30. ベンダー「HTML の拡張を！」
- 31. W3C「うちではやりませんが お好きにどうぞ。」
- 32. Apple, Mozilla, Opera WHATWG を立ち上げる。
- 35. 2006 年 10 月 Tim Berners-Lee のブログにて
- 38. 2007 年 3 月 新 HTML WG 設立。
- 40. 2009 年 5 月 Google I/O で大プッシュ。
- 41. 少しずつ実装も進んでいる。
- 42. XHTML はどうなる？
- 43. XHTML2 WG が 2009 年末で活動終了と発表。
- 44. XHTML 2.0 は終了。 でも、XHTML はなくならない。
- 45. HTML5 は XML として 扱うことも可能（XHTML5）
- 46. HTML5 の HTML 構文でも 「XMLっぽく」書けるように。
- 47. <img> ← 今までの HTML <img /> ← こっちも OK に！ ※ 混在もできます。
- 48. というわけで、ご心配なく。
- 50. もうひとつの目的
- 52. 1. ブラウザーの互換性
- 54. Web アプリの開発には JavaScript や DOM が不可欠。
- 57. 非互換を生む 2 つの「ない」
- 62. 2. 既存の実装との互換性
- 66. HTML5 の新機能
- 68. <canvas>
- 74. 最新技術のショーケース。
- 78. <video src=“intro_html5.vid”> <a …> ダウンロード </a> </video>
- 80. プラグインじゃないので CSS や SVG と組み合わせが可能。
- 81. マークアップ
- 83. <canvas> <audio> <video> <header> <footer> <section> <article> <nav> <aside> <hgroup> <figure> <details> <datalist> <meter> <progress> <time> <mark> <ruby> etc...
- 85. <div id=“header”> → <header> <div class=“section”> → <section>
- 86. 定型句はよりシンプルに。
- 87. <!DOCTYPE html>
- 89. 古いブラウザーでも機能する。
- 90. フォームの拡張も。
- 91. <input type=text ...> <input type=password ...>
- 92. <input type=email ...> <input type=range ...> <input type=color ...> <input type=datetime ...> ...
- 93. 名 前 (必須)： メール (必須)：
- 94. <input type=“text” ... required> <input type=“email” ... required>
- 95. サイト内検索： キーワードを入力
- 96. <input type=“search” placeholder=“キーワードを入力”>
- 97. HTML5 のセクション
- 98. 文書構造をより明示的に表せる。
- 100. <section> <h3> section 要素 </h3> <p> 章や節などを表す。</p> ... </section> <section> <h3> nav 要素 </h3> <p> 主要なナビゲーションを表す。</p> ... </section>
- 101. <section> <h3> article 要素 </h3> <p> 自己完結するセクションを表す。</p> <section> <h4> サンプル </h4> ... </section> </section>
- 102. <nav> 主要なナビゲーション
- 103. <nav class=“global”> <ul> <li> <a ...> ホーム </a> <li> <a ...> お知らせ </a> <li> <a ...> HTML5 Niteって？ </a> <li> <a ...> これまでのNite </a> <li> <a ...> お問い合わせ </a> </ul> </nav>
- 104. UA が <nav> を利用することで アクセシビリティも高まる？
- 106. <article class=“entry” id=“vol40”> <h2> CSS Nite in Ginza, Vol. 40 </h2> <p> 4周年記念となるVol.40では… </p> <section> <h3> 事前登録について </h3> ... </section> ... </article>
- 107. フィードの <item> や <entry> などをイメージ。
- 109. <section> <h2> nav 要素 </h2> <p> 主要なナビゲーションを表します。 </p> <aside> <p> 海外では「navi」よりも 「nav」の方が多いみたいです。</p> </aside> </section>
- 110. <header> ... </header> <div class=wrap> <div class=main> ... </div> <aside class=sidebar> ... </aside> </div> <footer> ... </footer>
- 112. <article> <h1> HTML5 のセクション </h1> <nav> ... </nav> ... <section> <h2> nav 要素 </h2> ... <aside> <h3>「navi」ではなく「nav」</h3> ... </aside> ... </section> ...
- 113. HTML5 のセクション (見出しなしの目次) section 要素 nav 要素 「navi」ではなく「nav」 article 要素 aside 要素
- 114. 見出しだけでも アウトラインはできる。
- 115. <h1> HTML5 のセクション </h1> <h2> section 要素 </h2> <h2> nav 要素 </h2> <h3>「navi」ではなく「nav」</h3> <h2> article 要素 </h2> ...
- 116. HTML5 のセクション section 要素 nav 要素 「navi」ではなく「nav」 article 要素 aside 要素
- 117. 注意！
- 119. 特に <section> は気をつけて。
- 120. <article class=“entry”> <header> <h2> タイトル </h2> </header> <section class=“body”> <p> 本文 </p> <p> テキストテキスト </p> </section> <footer> ... </footer> </article>
- 121. <header id=logo> <section> <h1> <img src=logo ...> </h1> </section> </header>
- 122. <section id=wrapper> <section id=main> <article> <section> <header> ... </header> ... </section> </article> </section> ... </section>
- 124. レイアウト目的なら <div> で。
- 125. 勧告はいつごろ？
- 127. 「2010 年 9 月」とある。 でも、むりです。
- 128. 「勧告」とは？
- 129. 仕様がすべて実装され すぐに使える状態。
- 130. 実装が終わるのは？
- 131. 「2022 年」と……
- 132. 「使えないじゃん！」
- 133. そんなことはないです。
- 135. 勧告されていませんが 広く使われてます。
- 138. 2012 年あたりになる？
- 139. 実装状況を知るには？
- 140. 1. 開発者向けサイト
- 143. 2. 仕様書のステータス表示
- 146. どう使っていくか
- 151. 1. JavaScript で対処
- 153. IE に <canvas> を。
- 156. 2. 対応度合いにあわせて利用
- 160. 難しいことは確か。
- 161. HTML5 や CSS3 は 勧告までとても時間がかかる。
- 163. 今は何をすれば？
- 165. 「<article> と <section> を 区別する必要はあるのか。」
- 168. 使う際には、リスクの認識を。
- 169. おわりに
- 170. 「情報が少ない」といいました。
- 173. ありがとうございました。