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

有限会社 futomi代表取締役羽田野 太巳

http://www.html5.jp/http://www.futomi.com/

http://twitter.com/futomi/

2011年8月21日

Chrome + HTML5 Conference

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

</ruby>

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個の要素

たったの108個• 新要素を学ぶだけでは不足

• すべての要素を理解すべし正しいセマンティクスの理解<strong>HTML5では旧要素も再定義</strong>

旧要素も覚えてますか？

<blockquote>, <q>, <cite>, <dfn>, <abbr>, <var>, <samp>, <kbd>

<caption>, <col>, <colgroup>,<thead>, <tbody>, <tfoot>

<legend>, <label>

再定義された要素<small>

<dl>

<i>

<s>

<hr>

<u>

細目（小さいとは限らない）

<cite>

固有名詞・スペルミス（下線とは限らない）

名前と意味が違う<small>

<dl>

<i>

<s>

<cite>

<hr>

<u>

細目（小さいとは限らない）

記述リスト（定義リストとは限らない）

声や思考など（斜体とは限らない）

無関係（取り消し線とは限らない）

固有名詞・スペルミス（下線とは限らない）

作品名（人名には使えない）

段落レベルの変わり目（罫線とは限らない）

<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で

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

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

<p>ひらがなで<u>あい</u>と名付けました。</p>

<p>記事本文に誤記がありました。「<u>若干</u>十八歳の...」</p>

すべての要素の意味をチェック要素の名前に惑わされていませんか？

HTML5の規定通りに使われてますか？

新要素を学ぶだけでは駄目

初心に返って、すべて要素を見直そう

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

セマンティクスが強化

AppleVoiceOver

NVDA

ウェブにもユニバーサル・アクセス

文書構造（HTML4）<div>ページヘッダー</div>

<div>ナビゲーション</div>

<div>記事

</div >

<div>サイドバー広告

</div>

<div>ページフッター</div>

文書構造(HTML5)<header>ページヘッダー</header>

<nav>ナビゲーション

</nav>

<article>記事

</article >

<aside>

サイドバー広告

</aside>

<footer>ページフッター</footer>

文書構造(HTML5)<header>ページヘッダー</header>

<nav>ナビゲーショ

ン</nav>

<article>記事

</article >

<aside>サイドバー広告

</aside>

<footer>ページフッター</footer>

メイン・コンテンツを機械的に抽出できる

デフォルト・スタイル

• デフォルト・スタイルにだまされるな

• 日本語に適しているわけではない

• 読み手に違和感がないスタイルを使うべし

英語で使う<i>

Alice's 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>

平城遷都1300年祭のマスコットキャラクターは「せんとくん」です。「ねぇ、かわいいとおもう？」

u { text-decoration: none; }u:before { content: '「'; }u:after { content: '」';}

i { font-style: normal; }i:before { content: '「'; }i:after { content: '」';}

見た目を基準にしないスタイルを基準に要素を選んでいませんか？

見た目はすべて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><b>記事の見出し</b><blockquote><b>小見出し1</b><blockquote>本文

</blockquote></blockquote><hr><blockquote><b>小見出し2</b><blockquote>本文

</blockquote></blockquote>

</div>

間違ったセマンティクス<article><h1>記事の見出し</h1><section><h2>小見出し1</h2><div><p>本文</p>

</div></section>

<section><h2>小見出し2</h2><div><p>本文</p>

</div></section>

</article>

正しいセマンティクス

スタイルと文書構造<section>

<h1>見出し

<section>本文

<section><h1>見出し

<div>本文

文法は正しいが<section>の乱用

不適切なアウトライン

スタイル目的なら<div>

<section><h1>見出し</h1><p>段落。</p><p>段落。</p><p>段落。</p>

裸のテキストと段落

<section>段落。<br>段落。<br>段落。<br>

手抜きだらしない

セクションには見出しを裸のテキストは段落改行と段落を区別

コンテンツの存在意義<article>

ブログ記事

<section>

<article>コメント

<article>コメント

<article>ブログ記事

<aside>

<article>コメント

<article>コメント

コメントの重要度に違い

適合性conformance

妥当性validity

文法があってればOK?

適合性conformance

妥当性validity

適合性を目指せ

文法チェッカーでは判定できない領域がHTML5で拡大

ご清聴ありがとうございました

有限会社 futomi代表取締役羽田野 太巳

http://www.html5.jp/http://www.futomi.com/

http://twitter.com/futomi/

Chrome + HTML5 Conference