HTML5でセマンティックなマークアップ

9,196 views
8,903 views

Published on

2011/8/25にC.A.Mobileさんの社内勉強会で使用したスライド。

Published in: Technology, Education
0 Comments
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,196
On SlideShare
0
From Embeds
0
Number of Embeds
493
Actions
Shares
0
Downloads
56
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide

HTML5でセマンティックなマークアップ

  1. 1. HTML5でセマンティックなマークアップ<br />2011/8/23 白石俊平<br />
  2. 2. よりセマンティックな<br />文書プラットフォーム<br />+<br />よりリッチな<br />アプリケーション<br />プラットフォーム<br />HTML5 =<br />
  3. 3. HTML5においては、「セマンティックなマークアップ」というパラダイムシフトが必要。<br />
  4. 4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /><html><body><br /><div><br /> <div><br /> <div><br /> <div><br />HTML4では、こんなマークアップが普通でした。<br /> </div><br /> <div><br /> <div><br /> </div><br /> </div><br /> </div><br /> <div><br /> <div><br /> <div><br /> <div>「分け入っても分け入ってもdiv」<br /> </div><br /> <div><br /> </div><br /> </div><br /> </div><br /> </div><br /> <div><br /> </div><br /> </div><br /></div><br /></body></html><br />
  5. 5. これからは?<br />文書に内在する<br />「意味」(=セマンティック)<br />を意識しながらマークアップする必要がある。<br />
  6. 6. エンジニアがマークアップに意味を「吹きこむ」<br />Chrome+HTML5 Conference 開催のご案内<br />最近、スマートフォンサイトを中心に活用事例が目立つようになり、HTML5への注目は日々高まっています。<br />その一方、<br />「HTML5について勉強したいけど、どこから始めればよいか分からない」<br />という方も少なくないのではないでしょうか?<br />HTML5 Developers JPでは、そんなディベロッパーの皆さんに向けて、<br />HTML5を学んで頂くための勉強会「HTML5とか勉強会」をこれまで毎月開催してきました。その回数は既に19回に及びます。<br />今回はそんな「HTML5とか勉強会」の第20回を記念し、HTML5 Developers JPとグーグル株式会社の共催で<br />2011年8月21日、"Chrome+HTML5 Conference"を開催いたします。<br />ここは強調したいな<br />ここは見出し<br />ここは固有名詞だ<br />ここで第一節終了!<br />ここは日付だな<br />ここは固有名詞、<br />かつ強調したいな<br />
  7. 7. エンジニアがマークアップに意味を「吹きこむ」<br />マークアップを通じた、<br />他者との「コミュニケーション」<br />と言って良い。<br />すると、吹きこまれた「意味」を他のプログラムが解釈することも可能になる。<br />Semantic<br />Semantic<br /><!DOCTYPE html><br /><html><br /> …<br /></html><br />
  8. 8. HTML5における「セマンティック」の実際<br /><ul><li>現在の要素数は108
  9. 9. 30種類の新要素
  10. 10. 14種類の既存要素が変化
  11. 11. マイクロデータ
  12. 12. WAI-ARIAとの統合</li></li></ul><li>今回は、「セクション要素」とそれに関連するいくつかの要素について勉強します。<br />
  13. 13. セクション要素とは?<br /><ul><li>セクションとは、文書を論理的に分割した単位のこと
  14. 14. 章、節、項…
  15. 15. メニュー、本文、サイドバー…
  16. 16. ページ、ダイアログ…
  17. 17. HTML5では、以下の4要素がセクション要素として追加
  18. 18. section/article/aside/nav</li></li></ul><li><section><br /><ul><li>汎用的なセクションを表す要素
  19. 19. <article>/<aside>/<nav>以外のセクションは全て<section>で。</li></li></ul><li><article><br /><ul><li>独立した「本文」として取り扱うことが可能なセクション。
  20. 20. <article>か?<section>か?
  21. 21. ->そのセクションをRSSリーダーで全文配信しても意味が通るならば<article></li></li></ul><li><aside><br /><ul><li>ページの他の部分と「あまり関連がない」(=重要度が低い)セクション。
  22. 22. 例えば広告やサイドバーガジェットなど
  23. 23. <aside>か?<section>か?
  24. 24. ->そのセクションをざっくり削ってしまっても、ページの意味内容がほとんど損なわれないなら、<aside></li></li></ul><li><nav><br /><ul><li>サイト内の「主要な」ナビゲーションメニューを表す。
  25. 25. 内部に<ul>と<a>を用いてリンク一覧を作るのが基本。
  26. 26. <nav>を使うか?使わないか?
  27. 27. <nav>の部分のみが「メニュー」として提示された場合に、ユーザにとって便益があるかどうかで考える。</li></li></ul><li>サイトナビゲーション<br />ヘッダ<br />本文<br />新着記事<br />アフィリエイト<br />広告<br />著者のTwitter近況<br />月別<br />アーカイブ<br />
  28. 28. <nav><br />サイトナビゲーション<br />ヘッダ<br /><article><br />本文<br /><section><br /><section><br />新着記事<br />アフィリエイト<br />広告<br /><aside><br /><nav><br />著者のTwitter近況<br /><aside><br /><section><br />月別<br />アーカイブ<br />
  29. 29. セクションとアウトライン<br /><ul><li>セクションの階層構造が文書のアウトラインを構成する
  30. 30. 「セクション要素の利用=アウトライン操作」であることを常に意識して!!
  31. 31. <div>と同じ感覚で利用するとか、ほんとNG
  32. 32. スタイル用途でブロックを作成する場合は<div>を使用する
  33. 33. 「HTML5 Outliner」で遊ぼう!</li></li></ul><li>ハンズオン:<section>でアウトラインをつくろう<br /><!DOCTYPE html><br /><section><br /> <section><br /> </section><br /></section><br /><section><br /></section><br />
  34. 34. セクションに関連する要素<br /><ul><li>見出し要素(h1〜h6,hgroup)
  35. 35. セクションルート(body/blockquote/details/fieldset/figure/td)
  36. 36. ヘッダ、フッタ(header/footer)</li></li></ul><li>見出し要素<br /><ul><li>見出し要素(h1〜h6)は、セクションの見出し、という意味を与えられた。
  37. 37. 見出しのランクはセクションごとにリセットされる。
  38. 38. 基本的には、<h1>のみを使うべし!
  39. 39. セクション要素は、常に見出しとセットだと考えるべし。</li></li></ul><li><body><br /><h1>もうすぐ絶滅するという紙の書物について</h1><br /> <section><br /><h1>序文</h1><br /> …<br /> </section><br /> <section><br /><h1>本は死なない</h1><br /> …<br /> </section><br /></body><br />It’s OK!<br />
  40. 40. <hgroup><br /><ul><li>複数の見出しからなるセクションでは、複数の見出しを使用し、<hgroup>でまとめる
  41. 41. 1セクション1見出し、の原則</li></li></ul><li><hgroup>の例<br /><body><br /><hgroup><br /> <h1>HTML5&API入門</h1><br /> <h2><br />キャンバス、VideoからWebSocketまで<br /> </h2><br /></hgroup><br /> …<br /></body><br />
  42. 42. セクションルート<br /><ul><li>body/blockquote/details/fieldset/figure/tdといった要素はセクションルートと呼ばれ、独立したアウトラインを構築する</li></li></ul><li>ハンズオン:見出し、hgroup、セクションルート<br /><!DOCTYPE html><br /><meta charset=UTF-8><br /><body><br /><hgroup><br /> <h1>HTML5&API Start Guide</h1><br /> <h2><br /> Canvas,Video,WebSocket,etc.<br /> </h2><br /></hgroup><br /> <section><br /> <h1>HTML5 Overview</h1><br /> </section><br /></body><br />
  43. 43. ヘッダ、フッタ<br /><ul><li><header>、<footer>要素は、セクションのヘッダ、フッタを表す
  44. 44. これらにどんな要素を含めるかは自由(ただ、一般的には見出し要素を<header>に入れる)</li></li></ul><li>ハンズオン:ヘッダ、フッタ<br /><!DOCTYPE html><br /><meta charset=UTF-8><br /><body><br /> <header><br /> <hgroup><br /> <h1>HTML5&API Start Guide</h1><br /> <h2>Canvas,Video,WebSocket,etc.</h2><br /></hgroup><br /> </header><br /> <section><br /> <h1>HTML5 Overview</h1><br /> </section><br /><footer>Copyright CAMobile Inc.</footer><br /></body><br />
  45. 45. 暗黙のセクション<br /><ul><li>明示的なセクションなしに見出し要素を使用すると、暗黙セクションが生成される。
  46. 46. 暗黙セクションは推奨されない。</li></li></ul><li>ハンズオン:暗黙のセクション<br /><!DOCTYPE html><br /><meta charset=UTF-8><br /><body><br /><h1>H1</h1><br /><h2>H2</h2><br /><h3>H3</h3><br /><h2>H2 again</h2><br /></body><br />このコードを、きちんとsectionで書きなおしてみましょう。<br />
  47. 47. その他関連する要素<br /><ul><li>time要素
  48. 48. address要素</li></li></ul><li>time要素<br /><ul><li>日付、時刻を表す要素。
  49. 49. タグのtextContent、もしくはdatetime属性で日時を表すことができる。
  50. 50. 日時のフォーマットはISO8601形式
  51. 51. pubdate属性がtrueの場合、親となるbody/article要素の「公開日時」を表す。</li></ul><time<br /> datetime=“2011/08/24T10:13:24.123+09:00”><br /> 2011年8月24日 10時13分<br /></time><br />
  52. 52. address要素<br /><ul><li>親となるbody/article要素の「問い合わせ先アドレス」を表す。</li></ul><address><br /> <a href=http://twitter.com/Shumpei><br /> Shumpei Shiraishi<br /> </a><br /></address><br />
  53. 53. ハンズオン:ブログ記事を題材としたマークアップ演習<br /><ul><li>http://bit.ly/cam_html5_markup_excersize
  54. 54. ダウンロードして展開し、entry.htmlを開いてください。</li></li></ul><li>ハンズオン:見出しを整える<br /><ul><li><body>に対する<header>要素と<h1>要素を適切に利用する
  55. 55. サンプルでは、<h1>が削除されている
  56. 56. 恐らく、記事のタイトルに<h1>を使用したかったためだと考えられる。</li></li></ul><li>ハンズオン:article要素を利用する<br /><ul><li>記事本文に<article>を使用する
  57. 57. post-858から<!-- #post-## -->まで
  58. 58. 投稿日時に<time>を使おう
  59. 59. 作成者に<address>を使おう
  60. 60. <header>も使おう</li></li></ul><li>ハンズオン:aside,section要素を利用する<br /><ul><li>ソーシャル関連のボタン群を<aside>で囲む
  61. 61. コメント欄を<section>で囲む</li></li></ul><li>ハンズオン:nav要素を利用する<br /><ul><li>右サイドバーを<nav>で囲む</li></li></ul><li>ハンズオン:footer要素を利用する<br /><ul><li>id=“footer”となっている<div>をfooterに書き換える</li></li></ul><li>今日もありがとうございました!<br />@Shumpei<br />

×