HTML5マークアップの心得と作法

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

http://www.futomi.com/

http://www.html5.jp/

HTML5 = Markup + API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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年祭のマスコットキャラクターは「せんとくん」です。「ねぇ、かわいいとおもう？」

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

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

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

間違ったセマンティクス正しいセマンティクス<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>

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

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

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

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

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

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

http://kachibito.net	14535
http://coliss.com	9292
http://webdrawer.net	1349
http://d.hatena.ne.jp	869
http://designers-union.com	735
http://tuyaken.com	381
http://ivystar.jp	340
http://news.mynavi.jp	242
http://ameblo.jp	96
http://asiangraphicdesign.collected.info	81
http://m022.mm.aprico.fujitsu.com	79
http://www.webernote.net	78
http://womtv.posterous.com	69
http://twitter.com	47
http://webizm.jp	44
http://cobs.jp	37
http://webcache.googleusercontent.com	34
http://codezine.blogspot.com	32
http://nanaironohashi.tumblr.com	28
https://twitter.com	26
http://pororon777.tumblr.com	23
http://tatsukii.tumblr.com	22
http://at160.tumblr.com	21
http://hamind.blogspot.com	19
http://us-w1.rockmelt.com	16
http://strawberryj.am	16
http://sironekotoro.blogspot.jp	14
http://nloc.tumblr.com	8
http://fukudayouichi.com	8
http://taku-clip.tumblr.com	7
http://blog.ameba.jp	7
http://b.hatena.ne.jp	7
https://www.facebook.com	7
http://sironekotoro.posterous.com	6
http://www.slideshare.net	6
http://webtech.e-news.bz	5
http://szkuwa.tumblr.com	5
http://www.facebook.com	5
http://safe.tumblr.com	5
http://posterous.com	5
http://ponnao.com	5
http://sironekotoro.blogspot.com	4
http://nuevospowerpoints.blogspot.com	4
http://172.23.90.50	3
http://a0.twimg.com	3
http://s.deeeki.com	3
http://141.mashmetv.appspot.com	2
http://www.netvibes.com	2
http://www.easypox.appspot.com	2
http://www.tumblr.com	2
https://cybozulive.com	2

HTML5マークアップの心得と作法

by Futomi Hatano

Accessibility

Categories

Upload Details

Usage Rights

60 Embeds 28,649

Statistics