HTML5のマークアップの特徴を一言で表すとすれば「セマンティクス」。それ故に、HTML5では文脈に合わせてマークアップしなければいけません。もはや、マークアップは単純作業ではなくクリエイティブなものになっているのです。マークアップにも心得と作法がよりいっそう重要になってきています。本セッションでは、HTML5仕様ではマークアップに何を求めているのか（心得）、そして、我々はどのようにマークアップをすべきか（作法）、について具体的に解説します。

1. Chrome + HTML5 Conference
HTML5マークアップの心得と作法
2011年8月21日
有限会社 futomi
代表取締役 羽田野 太巳
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi/

2. <ruby>
羽田野<rp>（</rp><rt>はたの</rt><rp>）</rp>
太巳<rp>（</rp><rt>ふとみ</rt><rp>）</rp>
</ruby>

3. http://www.futomi.com/

4. http://www.html5.jp/

5. HTML5 =
Markup + API

6. アジェンダ
初心
過去の知識が正しいとは限らない
心得
常に心がけていなければならないこと
作法
清く正しく美しく

7. 初心
過去の知識が正しいとは限らない
http://www.jti.co.jp/sstyle/manners/ad/gallery/index.html

8. 108

9. 豊富なボキャブラリー
108個の要素
30個が新たに追加
24個がHTML5で新たに開発

10. たったの108個
• 新要素を学ぶだけでは不足
• すべての要素を理解すべし
正しいセマンティクスの理解
<strong>HTML5では旧要素も再定義</strong>

11. 旧要素も覚えてますか？
<blockquote>, <q>, <cite>, <dfn>, <abbr>,
<var>, <samp>, <kbd>
<caption>, <col>, <colgroup>,
<thead>, <tbody>, <tfoot>
<legend>, <label>

12. 再定義された要素
<small> 細目（小さいとは限らない）
<dl>
<i>
<s>
<u> 固有名詞・スペルミス（下線とは限らない）
<cite>
<hr>

13. 名前と意味が違う
<small> 細目（小さいとは限らない）
<dl> 記述リスト（定義リストとは限らない）
<i> 声や思考など（斜体とは限らない）
<s> 無関係（取り消し線とは限らない）
<u> 固有名詞・スペルミス（下線とは限らない）
<cite> 作品名（人名には使えない）
<hr> 段落レベルの変わり目（罫線とは限らない）

14. <small>
細目
小さい文字という役割は廃止
見た目はCSSで

15. http://panasonic.jp/pc/products/b10c/

16. <p>
<strong>
<small>重要な細目</small>
</strong>
</p>

17. <dl>
記述リスト
定義という意味はない

18. 定義リストにしたいなら
<dl>
<dt><dfn>用語</dfn></dt>
<dd>説明...</dd>
...
</dl>

19. <s>
もう無関係、もう正確でない
取り消し線という役割は廃止
見た目はCSSで

20. <p>大特価 500円！
<s>（定価：800円）</s></p>

21. <u>
固有名詞またはスペルミス
下線という役割は廃止
見た目はCSSで

22. <p>ひらがなで<u>あい</u>と
名付けました。</p>
<p>記事本文に誤記がありました。
「<u>若干</u>十八歳の...」</p>

23. すべての要素の意味をチェック
要素の名前に惑わされていませんか？
HTML5の規定通りに使われてますか？
新要素を学ぶだけでは駄目
初心に返って、すべて要素を見直そう

24. 心得
常に心がけていなければならないこと

25. セマンティクスが強化
ウェブにもユニバーサル・アクセス
Apple
VoiceOver
NVDA

26. 文書構造（HTML4）
<div>ページヘッダー</div>
<div>
<div>
<div> サイド
ナビゲー
記事 バー
ション
</div > 広告
</div>
</div>
<div>ページフッター</div>

27. 文書構造(HTML5)
<header>ページヘッダー</header>
<aside
>
<nav>
<article> サイド
ナビゲー
記事 バー
ション
</article > 広告
</nav>
</asid
e>
<footer>ページフッター</footer>

28. 文書構造(HTML5)
<header>ページヘッダー</header>
メイン・コンテンツを
機械的に抽出できる
<aside>
<nav>
<article> サイド
ナビゲーショ
記事 バー
ン
</article > 広告
</nav>
</aside>
<footer>ページフッター</footer>

29. デフォルト・スタイル
• デフォルト・スタイルにだまされるな
• 日本語に適しているわけではない
• 読み手に違和感がないスタイルを使うべし

30. 英語で使う<i>
Alice's Adventures in Wonderland by Lewis Carroll
http://www.gutenberg.org/ebooks/11

31. 中国語で使う<u>
http://en.wikipedia.org/wiki/Proper_name_mark

32. <p>平城遷都1300年祭のマスコットキャラクター
は<u>せんとくん</u>です。</p>
<p><i>ねぇ、かわいいとおもう？</i></p>
u { text-decoration: none; } i { font-style: normal; }
u:before { content: '「'; } i:before { content: '「'; }
u:after { content: '」';} i:after { content: '」';}
平城遷都1300年祭のマスコットキャラクター
は「せんとくん」です。
「ねぇ、かわいいとおもう？」

33. 見た目を基準にしない
スタイルを基準に要素を選んでいませんか？
見た目はすべてCSSで解決すべし
セマンティクスを基準に要素を選択しましょう

34. 作法
清く正しく美しく
http://www.flickr.com/photos/jenny_b_lopez/1428512172/

35. 間違ったセマンティクス
<div>
<b>記事の見出し</b>
<blockquote>
<b>小見出し1</b>
<blockquote>
本文 文法は正しい
</blockquote>
</blockquote> セマンティクスは誤り
<hr>
<blockquote>
<b>小見出し2</b>
<blockquote>
本文
</blockquote>
</blockquote>
</div>

36. 間違ったセマンティクス 正しいセマンティクス
<div> <article>
<b>記事の見出し</b> <h1>記事の見出し</h1>
<blockquote> <section>
<b>小見出し1</b> <h2>小見出し1</h2>
<blockquote> <div>
本文 <p>本文</p>
</blockquote> </div>
</blockquote> </section>
<hr>
<blockquote> <section>
<b>小見出し2</b> <h2>小見出し2</h2>
<blockquote> <div>
本文 <p>本文</p>
</blockquote> </div>
</blockquote> </section>
</div> </article>

37. スタイルと文書構造
<section> <section>
<h1>見出し <h1>見出し
<section>本文 <div>本文
文法は正しいが スタイル目的なら
<section>の乱用 <div>
不適切なアウトライン

38. 裸のテキストと段落
<section> <section>
段落。<br> <h1>見出し</h1>
段落。<br> <p>段落。</p>
段落。<br> <p>段落。</p>
<p>段落。</p>
手抜き セクションには見出しを
だらしない 裸のテキストは段落
改行と段落を区別

39. コンテンツの存在意義
<article> <article>
ブログ記事 ブログ記事
<section> <aside>
<article>コメント <article>コメント
<article>コメント <article>コメント
コメントの重要度に違い

40. 文法があってればOK?
適合性
conformance
妥当性
validity

41. 適合性を目指せ
適合性
conformance
妥当性
文法チェッカーでは validity
判定できない領域が
HTML5で拡大

42. Chrome + HTML5 Conference
ご清聴ありがとうございました
有限会社 futomi
代表取締役 羽田野 太巳
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi/