HTML5でセマンティックなマークアップ
•Als PPTX, PDF herunterladen•
24 gefällt mir•7,192 views
2011/8/25にC.A.Mobileさんの社内勉強会で使用したスライド。
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie HTML5でセマンティックなマークアップ
Mehr von Shumpei Shiraishi
Mehr von Shumpei Shiraishi (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (8)
HTML5でセマンティックなマークアップ
- 2. よりセマンティックな 文書プラットフォーム + よりリッチな アプリケーション プラットフォーム 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>
- 5. これからは？ 文書に内在する 「意味」（＝セマンティック） を意識しながらマークアップする必要がある。
- 6. エンジニアがマークアップに意味を「吹きこむ」 Chrome+HTML5 Conference 開催のご案内 最近、スマートフォンサイトを中心に活用事例が目立つようになり、HTML5への注目は日々高まっています。 その一方、 「HTML5について勉強したいけど、どこから始めればよいか分からない」 という方も少なくないのではないでしょうか？ HTML5 Developers JPでは、そんなディベロッパーの皆さんに向けて、 HTML5を学んで頂くための勉強会「HTML5とか勉強会」をこれまで毎月開催してきました。その回数は既に19回に及びます。 今回はそんな「HTML5とか勉強会」の第20回を記念し、HTML5 Developers JPとグーグル株式会社の共催で 2011年8月21日、"Chrome+HTML5 Conference"を開催いたします。 ここは強調したいな ここは見出し ここは固有名詞だ ここで第一節終了！ ここは日付だな ここは固有名詞、 かつ強調したいな
- 7. エンジニアがマークアップに意味を「吹きこむ」 マークアップを通じた、 他者との「コミュニケーション」 と言って良い。 すると、吹きこまれた「意味」を他のプログラムが解釈することも可能になる。 Semantic Semantic <!DOCTYPE html> <html> … </html>
- 9. 30種類の新要素
- 10. 14種類の既存要素が変化
- 11. マイクロデータ
- 14. 章、節、項…
- 15. メニュー、本文、サイドバー…
- 16. ページ、ダイアログ…
- 26. <nav>を使うか？使わないか？
- 28. <nav> サイトナビゲーション ヘッダ <article> 本文 <section> <section> 新着記事 アフィリエイト 広告 <aside> <nav> 著者のTwitter近況 <aside> <section> 月別 アーカイブ
- 51. pubdate属性がtrueの場合、親となるbody/article要素の「公開日時」を表す。<time datetime=“2011/08/24T10:13:24.123+09:00”> 2011年8月24日 10時13分 </time>
- 58. 投稿日時に<time>を使おう