HTML5でセマンティックなマークアップ
39
HTML5 ででででででででででででででで 2011/8/23 でででで
-
Upload
shumpei-shiraishi -
Category
Technology
-
view
7.557 -
download
1
description
2011/8/25にC.A.Mobileさんの社内勉強会で使用したスライド。
Transcript of HTML5でセマンティックなマークアップ
HTML5 でセマンティックなマークアップ
2011/8/23 白石俊平
HTML5 =
よりセマンティックな文書プラットフォーム
+よりリッチな
アプリケーションプラットフォーム
HTML5 においては、「セマンティックなマークアップ」というパラダイムシフトが必要。
<!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>
これからは？
文書に内在する「意味」（＝セマンティック）を意識しながらマークアップする必要がある。
エンジニアがマークアップに意味を「吹きこむ」
Chrome+HTML5 Conference 開催のご案内
最近、スマートフォンサイトを中心に活用事例が目立つようになり、 HTML5への注目は日々高まっています。その一方、「 HTML5について勉強したいけど、どこから始めればよいか分からない」という方も少なくないのではないでしょうか？HTML5 Developers JPでは、そんなディベロッパーの皆さんに向けて、HTML5を学んで頂くための勉強会「 HTML5とか勉強会」をこれまで毎月開催してきました。その回数は既に 19回に及びます。今回はそんな「 HTML5とか勉強会」の第 20回を記念し、 HTML5 Developers JPとグーグル株式会社の共催で2011年 8月 21日、 "Chrome+HTML5 Conference"を開催いたします。
ここは強調したいな
ここは固有名詞だ
ここは日付だな ここは固有名詞、かつ強調したいな
ここは見出し
ここで第一節終了！
エンジニアがマークアップに意味を「吹きこむ」
すると、吹きこまれた「意味」を他のプログラムが解釈することも可能になる。
<!DOCTYPE html><html> …</html>
Semantic
Semantic
マークアップを通じた、他者との「コミュニケー
ション」と言って良い。
HTML5 における「セマンティック」の実際
• 現在の要素数は108• 30 種類の新要素• 14 種類の既存要素が変化
• マイクロデータ• WAI-ARIA との統合
今回は、「セクション要素」とそれに関連するいくつかの要素について勉強します。
セクション要素とは？
• セクションとは、文書を論理的に分割した単位のこと• 章、節、項…• メニュー、本文、サイドバー…• ページ、ダイアログ…
• HTML5 では、以下の 4 要素がセクション要素として追加• section/article/aside/nav
<section>
• 汎用的なセクションを表す要素• <article>/<aside>/<nav> 以外のセク
ションは全て <section> で。
<article>
• 独立した「本文」として取り扱うことが可能なセクション。
• <article> か？ <section> か？• → そのセクションを RSS リーダーで全
文配信しても意味が通るならば<article>
<aside>
• ページの他の部分と「あまり関連がない」（＝重要度が低い）セクション。
• 例えば広告やサイドバーガジェットなど• <aside> か？ <section> か？
• → そのセクションをざっくり削ってしまっても、ページの意味内容がほとんど損なわれないなら、 <aside>
<nav>
• サイト内の「主要な」ナビゲーションメニューを表す。
• 内部に <ul> と <a> を用いてリンク一覧を作るのが基本。
• <nav> を使うか？使わないか？• <nav> の部分のみが「メニュー」とし
て提示された場合に、ユーザにとって便益があるかどうかで考える。
ヘッダ
本文
サイトナビゲーション
新着記事
月別アーカイブ
アフィリエイト広告
著者のTwitter近況
ヘッダ
本文
サイトナビゲーション
新着記事
月別アーカイブ
アフィリエイト広告
著者のTwitter近況
<nav>
<section>
<nav>
<section>
<article> <section>
<aside>
<aside>
セクションとアウトライン• セクションの階層構造が文書のアウトラインを構成する• 「セクション要素の利用＝アウトライン操作」であることを常に
意識して！！• <div> と同じ感覚で利用するとか、ほんと NG• スタイル用途でブロックを作成する場合は <div> を使用する
• 「 HTML5 Outliner 」で遊ぼう！
ハンズオン :<section> でアウトラインをつくろう
<!DOCTYPE html>
<section>
<section>
</section>
</section>
<section>
</section>
セクションに関連する要素
• 見出し要素（ h1 〜 h6,hgroup ）• セクションルート（ body/blockquote/
details/fieldset/figure/td ）• ヘッダ、フッタ（ header/footer ）
見出し要素
• 見出し要素（ h1 〜 h6 ）は、セクションの見出し、という意味を与えられた。
• 見出しのランクはセクションごとにリセットされる。• 基本的には、 <h1> のみを使うべし！
• セクション要素は、常に見出しとセットだと考えるべし。
It’s OK!
<body>
<h1>もうすぐ絶滅するという紙の書物について </h1>
<section>
<h1>序文 </h1>
…
</section>
<section>
<h1>本は死なない </h1>
…
</section>
</body>
<hgroup>
• 複数の見出しからなるセクションでは、複数の見出しを使用し、 <hgroup> でまとめる
• 1 セクション 1 見出し、の原則
<hgroup> の例
<body>
<hgroup>
<h1>HTML5&API入門 </h1>
<h2>
キャンバス、 Videoから WebSocketまで
</h2>
</hgroup>
…
</body>
セクションルート
• 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>
ヘッダ、フッタ
• <header> 、 <footer> 要素は、セクションのヘッダ、フッタを表す
• これらにどんな要素を含めるかは自由（ただ、一般的には見出し要素を <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>
暗黙のセクション
• 明示的なセクションなしに見出し要素を使用すると、暗黙セクションが生成される。
• 暗黙セクションは推奨されない。
ハンズオン : 暗黙のセクション
<!DOCTYPE html>
<meta charset=UTF-8>
<body>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h2>H2 again</h2>
</body>
このコードを、きちんと sectionで書きなおしてみましょう。
その他関連する要素
• time 要素• address 要素
time 要素• 日付、時刻を表す要素。• タグの textContent 、もしくは datetime 属性で日時を
表すことができる。• 日時のフォーマットは ISO8601 形式• pubdate 属性が true の場合、親となる body/article 要
素の「公開日時」を表す。
<time datetime=“2011/08/24T10:13:24.123+09:00”> 2011 年 8 月 24 日 10 時 13 分</time>
address 要素
• 親となる body/article 要素の「問い合わせ先アドレス」を表す。
<address> <a href=http://twitter.com/Shumpei> Shumpei Shiraishi </a></address>
ハンズオン : ブログ記事を題材としたマークアップ演習
• http://bit.ly/cam_html5_markup_excersize
• ダウンロードして展開し、 entry.html を開いてください。
ハンズオン : 見出しを整える
• <body> に対する <header> 要素と<h1> 要素を適切に利用する
• サンプルでは、 <h1> が削除されている• 恐らく、記事のタイトルに <h1> を使用
したかったためだと考えられる。
ハンズオン :article 要素を利用する
• 記事本文に <article> を使用する• post-858 から <!-- #post-## --> まで
• 投稿日時に <time> を使おう• 作成者に <address> を使おう• <header> も使おう
ハンズオン :aside,section 要素を利用する
• ソーシャル関連のボタン群を <aside> で囲む
• コメント欄を <section> で囲む
ハンズオン :nav 要素を利用する
• 右サイドバーを <nav> で囲む
ハンズオン :footer 要素を利用する
• id=“footer” となっている <div> をfooter に書き換える
今日もありがとうございました！
@Shumpei
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]](https://static.fdocuments.net/doc/165x107/5fb29d840f1bb936bf5a22fb/ms-html5-microsoft-edge-internet-explorer-html5-2155-html5-section.jpg)
