Weitere ähnliche Inhalte
Ähnlich wie HTML5マークアップの心得と作法 (20)
Mehr von Futomi Hatano (13)
Kürzlich hochgeladen (11)
HTML5マークアップの心得と作法
- 1. Chrome + HTML5 Conference
HTML5マークアップの心得と作法
2011年8月21日
有限会社 futomi
代表取締役 羽田野 太巳
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi/
- 6. アジェンダ
初心
過去の知識が正しいとは限らない
心得
常に心がけていなければならないこと
作法
清く正しく美しく
- 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> 段落レベルの変わり目(罫線とは限らない)
- 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>
- 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
- 34. 作法
清く正しく美しく
http://www.flickr.com/photos/jenny_b_lopez/1428512172/
- 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>コメント
コメントの重要度に違い
- 42. Chrome + HTML5 Conference
ご清聴ありがとうございました
有限会社 futomi
代表取締役 羽田野 太巳
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi/