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	12132
http://coliss.com	8370
http://designers-union.com	721
http://webdrawer.net	690
http://d.hatena.ne.jp	651
http://news.mynavi.jp	230
http://tuyaken.com	180
http://ivystar.jp	177
http://ameblo.jp	86
http://asiangraphicdesign.collected.info	81
http://womtv.posterous.com	69
http://www.webernote.net	61
http://twitter.com	47
http://webizm.jp	44
http://codezine.blogspot.com	32
http://nanaironohashi.tumblr.com	28
http://webcache.googleusercontent.com	25
https://twitter.com	23
http://pororon777.tumblr.com	22
http://tatsukii.tumblr.com	22
http://at160.tumblr.com	21
http://hamind.blogspot.com	19
http://cobs.jp	18
http://us-w1.rockmelt.com	16
http://strawberryj.am	16
http://nloc.tumblr.com	8
http://fukudayouichi.com	8
http://blog.ameba.jp	7
http://b.hatena.ne.jp	7
http://taku-clip.tumblr.com	7
http://www.slideshare.net	6
http://sironekotoro.posterous.com	6
http://webtech.e-news.bz	5
http://szkuwa.tumblr.com	5
http://posterous.com	5
http://safe.tumblr.com	5
http://nuevospowerpoints.blogspot.com	4
http://sironekotoro.blogspot.com	4
http://a0.twimg.com	3
http://172.23.90.50	3
http://s.news.mynavi.jp	2
http://jp.hanrss.com	2
https://cybozulive.com	2
http://s.deeeki.com	2
http://www.netvibes.com	2
http://www.tumblr.com	2
http://www.easypox.appspot.com	2
http://springpadit.com	1
http://www.onlydoo.com	1
http://www2.multiburst.net	1
http://mundo-powerpoints.blogspot.com	1

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

by Futomi Hatano on Aug 30, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

53 Embeds 23,884

Statistics

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