HTML5でセマンティックなマークアップ
Download as PPTX, PDF24 likes7,198 views
2011/8/25にC.A.Mobileさんの社内勉強会で使用したスライド。
HTML5でセマンティックなマークアップ
- 4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><body><div> <div> <div> <div>HTML4では、こんなマークアップが普通でした。 </div> <div> <div> </div> </div> </div> <div> <div> <div> <div>「分け入っても分け入ってもdiv」 </div> <div> </div> </div> </div> </div> <div> </div> </div></div></body></html>
- 6. エンジニアがマークアップに意味を「吹きこむ」Chrome+HTML5 Conference 開催のご案内最近、スマートフォンサイトを中心に活用事例が目立つようになり、HTML5への注目は日々高まっています。その一方、「HTML5について勉強したいけど、どこから始めればよいか分からない」という方も少なくないのではないでしょうか？HTML5 Developers JPでは、そんなディベロッパーの皆さんに向けて、HTML5を学んで頂くための勉強会「HTML5とか勉強会」をこれまで毎月開催してきました。その回数は既に19回に及びます。今回はそんな「HTML5とか勉強会」の第20回を記念し、HTML5 Developers JPとグーグル株式会社の共催で2011年8月21日、"Chrome+HTML5 Conference"を開催いたします。ここは強調したいなここは見出しここは固有名詞だここで第一節終了！ここは日付だなここは固有名詞、かつ強調したいな
- 9. 30種類の新要素
- 10. 14種類の既存要素が変化
- 11. マイクロデータ
- 14. 章、節、項…
- 15. メニュー、本文、サイドバー…
- 16. ページ、ダイアログ…
- 26. <nav>を使うか？使わないか？
- 27. <nav>の部分のみが「メニュー」として提示された場合に、ユーザにとって便益があるかどうかで考える。サイトナビゲーションヘッダ本文新着記事アフィリエイト広告著者のTwitter近況月別アーカイブ
- 33. 「HTML5 Outliner」で遊ぼう！ハンズオン:<section>でアウトラインをつくろう<!DOCTYPE html><section> <section> </section></section><section></section>
- 39. セクション要素は、常に見出しとセットだと考えるべし。<body><h1>もうすぐ絶滅するという紙の書物について</h1> <section><h1>序文</h1> … </section> <section><h1>本は死なない</h1> … </section></body>It’s OK!
- 41. 1セクション1見出し、の原則<hgroup>の例<body><hgroup> <h1>HTML5&API入門</h1> <h2>キャンバス、VideoからWebSocketまで </h2></hgroup> …</body>
- 42. セクションルートbody/blockquote/details/fieldset/figure/tdといった要素はセクションルートと呼ばれ、独立したアウトラインを構築するハンズオン:見出し、hgroup、セクションルート<!DOCTYPE html><meta charset=UTF-8><body><hgroup> <h1>HTML5&API Start Guide</h1> <h2> Canvas,Video,WebSocket,etc. </h2></hgroup> <section> <h1>HTML5 Overview</h1> </section></body>
- 44. これらにどんな要素を含めるかは自由（ただ、一般的には見出し要素を<header>に入れる）ハンズオン:ヘッダ、フッタ<!DOCTYPE html><meta charset=UTF-8><body> <header> <hgroup> <h1>HTML5&API Start Guide</h1> <h2>Canvas,Video,WebSocket,etc.</h2></hgroup> </header> <section> <h1>HTML5 Overview</h1> </section><footer>Copyright CAMobile Inc.</footer></body>
- 46. 暗黙セクションは推奨されない。ハンズオン:暗黙のセクション<!DOCTYPE html><meta charset=UTF-8><body><h1>H1</h1><h2>H2</h2><h3>H3</h3><h2>H2 again</h2></body>このコードを、きちんとsectionで書きなおしてみましょう。
- 47. その他関連する要素time要素
- 51. pubdate属性がtrueの場合、親となるbody/article要素の「公開日時」を表す。<time datetime=“2011/08/24T10:13:24.123+09:00”> 2011年8月24日 10時13分</time>
- 52. address要素親となるbody/article要素の「問い合わせ先アドレス」を表す。<address> <a href=http://twitter.com/Shumpei> Shumpei Shiraishi </a></address>
- 58. 投稿日時に<time>を使おう