◎初心
・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では拡大した