1.
Chrome + HTML5 ConferenceHTML5マークアップの心得と作法 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> Alices 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/