zakihayaメモ

RubyとRailsのことが中心

Chrome+HTML5 Conference(HTML5マークアップの心得と作法)メモ

◎初心
・HTML5をやる時は一度頭をリセットする。
・タグの数は108。新しく開発されたのは24。
・HTML5ではもともとある要素も再定義されているので注意。
 混乱しないように再確認しておくこと。
・再定義された要素の例
 - <small> 細目(小さいとは限らない)
 - <dl> 記述リスト(定義リストとは限らない)
 - <i> 声や思考など(斜体とは限らない)
 - <s> 無関係(取り消し線とは限らない)
 - <u> 固有名詞・スペルミス(下線とは限らない)
 - <cite> 作品名(人名には使えない)
 - <hr> セクション内での段落レベルの変わり目(経線とは限らない)
・HTML5のマークアップは、セマンティクス(文章の意味)を理解しながら記述する必要がある
 例)・dlを定義リストで使うなら
   <dl>
     <dt><dfn>---</dfn></dt><dl></dl>
   </dl>
   ・取り消し線
   <p>大特価500円<s>(定価800円)</s></p>
   見た目は同じでもdelを使うと値段を訂正するという意味になってしまう
   →ロボットから見たら間違いが多いサイトだと理解されてしまう
   
◎心得
・セマンティクスが強化されると検索エンジン+ソフトウエアがうれしい
・文章構造
 HTML4→全部<div>
 HTML5→<header>、<nav>、<article>、<aside>、<footer> <section>
      メインコンテンツを機械的に抽出できるようになる
・デフォルトスタイルにだまされるな。日本語で見やすいスタイルを心がける。
 例)<u> デフォルトスタイルは下線→中国語では固有名詞に下線をつけるから(日本語では前後に間隔をあけたり)
   <i> デフォルトスタイルは斜体→英語では声や思考などを斜体で表すから(日本語では「」)
・見た目を基準にしない。セマンティクスを基準に要素を選択すること。見た目は全てCSSで。


◎作法
・例
 <section>→見出しと本文をセットにしたもの
 <section>
   <h1>見出し</h1><div>・・・</div>
 </section>
 
・文法が合っていればOK?
 HTML4では、validity(妥当性)=conformance(適合性)がほぼあてはまる
 HTML5では、validity(妥当性)=conformance(適合性)ではない
 文法チェッカーでは判断できない領域がHTML5では拡大した