Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

10,965 views

Published on

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

Published in: Technology, Education
  • Be the first to comment

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 />

×