Downloaded 1,651 times
![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”](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ftalkhtml520091110-091111233344-phpapp02%2f85%2fHTML5-36-320.jpg&f=jpg&w=240)
MY
Uploaded byMasataka Yakura
495,344 views
HTML5, きちんと。
HTML5の概要や目的について説明しています。セクション関連要素についても紹介しています。2009年のCSS Nite vol. 40で話したときのスライドです。
Recommended
![ドメイン駆動設計のプラクティスでカバーできること、できないこと[DDD]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2f2022-220117111455-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More Related Content
What's hot
Viewers also liked
Similar to HTML5, きちんと。
HTML5, きちんと。
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.「HTML5 & CSS3で Web は変わるのか？」
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.HTML5とは？ HTML5のセクションXHTMLはどうなる？ 勧告はいつごろ？もうひとつの目的 どう使っていくかHTML5の新機能
- 14.
- 15.
- 16.HTML4 や XHTML1は「文書」の作成が目的だった。
- 17.
- 18.
- 19.1998 年 2月XML 1.0 が勧告。
- 20.W3C は XMLへの移行を計画。
- 21.
- 22.XHTML 1.0 ―HTML4 を XML 化XHTML 1.1 ― 機能を細分化XHTML 2.0 ― 新しく作り直し
- 23.
- 24.
- 25.
- 27.Web アプリが台頭し今の HTMLでは機能不足に。
- 28.
- 29.2004 年 6月W3C のワークショップにて
- 30.
- 31.W3C「うちではやりませんがお好きにどうぞ。」
- 32.Apple, Mozilla, OperaWHATWGを立ち上げる。
- 33.
- 34.
- 35.2006 年 10月Tim Berners-Lee のブログにて
- 36.
- 37.
- 38.2007 年 3月新 HTML WG 設立。
- 39.
- 40.2009 年 5月Google I/O で大プッシュ。
- 41.
- 42.
- 43.XHTML2 WG が2009年末で活動終了と発表。
- 44.XHTML 2.0 は終了。でも、XHTMLはなくならない。
- 45.HTML5 は XMLとして扱うことも可能（XHTML5）
- 46.HTML5 の HTML構文でも「XMLっぽく」書けるように。
- 47.<img>← 今までの HTML<img /> ← こっちも OK に！※ 混在もできます。
- 48.
- 49.
- 50.
- 51.
- 52.
- 54.Web アプリの開発にはJavaScript やDOM が不可欠。
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 73.
- 74.
- 76.
- 77.
- 78.<video src=“intro_html5.vid”> <a …> ダウンロード </a></video>
- 80.プラグインじゃないのでCSS や SVGと組み合わせが可能。
- 81.
- 82.
- 83.<canvas> <audio> <video><header><footer> <section> <article> <nav><aside> <hgroup> <figure> <details><datalist> <meter> <progress><time> <mark> <ruby> etc...
- 84.
- 85.<div id=“header”>→ <header><divclass=“section”>→ <section>
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.<input type=text ...><inputtype=password ...>
- 92.<inputtype=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.
- 98.
- 99.
- 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.
- 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>を利用することでアクセシビリティも高まる？
- 105.
- 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>などをイメージ。
- 108.
- 109.<section> <h2> nav要素 </h2> <p> 主要なナビゲーションを表します。 </p> <aside> <p> 海外では「navi」よりも 「nav」の方が多いみたいです。</p> </aside></section>
- 110.<header> ... </header><divclass=wrap> <div class=main> ... </div> <aside class=sidebar> ... </aside></div><footer> ... </footer>
- 111.
- 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.
- 118.
- 119.
- 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> <sectionid=main> <article> <section> <header> ... </header> ... </section> </article> </section> ...</section>
- 123.
- 124.
- 125.
- 127.「2010 年 9月」とある。でも、むりです。
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 146.
- 147.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.HTML5 や CSS3は勧告までとても時間がかかる。
- 162.
- 163.
- 164.
- 165.「<article> と <section>を 区別する必要はあるのか。」
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.