HTML5 の基礎を聞いてきた

先日デザイナーよりの HTML5 セミナーを聞いてきたのでメモを貼って
おく。知らない事が多すぎるのでいろいろ新鮮に聞けた。

HTML5 SEMANTICS

マークアップについて

HTML4 はボキャブラリーが少なかったが、
CSS を使って見た目を帰る事が出来る様に
なった。

しかしせっかく作成した電子的文書が機械
等から読み取れなかったので本当の意味で
Web とは言えなかった

HTML5 において廃止された古い要素と新た
に定義された要素がある。

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

過去の知識が正しいとは限らない

HTML5 の要素数 108

30個が追加され、24個が開発された。
※6個はブラウザベンダの独自拡張として既
に利用されていた。

マークアップが根底に必ずあるが、API
多く含まれている。(プログラミングに利用
される)

新要素を学ぶだけでは不足
全ての要素を理解すべし
正しいセマンティクスの理解

HTML5 では見た目に依存する定義は全て
廃止

「細目」は裁判用語
u 主に中国語で利用される
記述リスト 定義でなくても構わない
 本来は definition list なので定義のリスト
 であり、世間的に間違った用法だったが
 HTML5 で定義が緩められた。
i 欧米の表記スタイル イタリックで声や
思考として使われていたもの。

cite 引き合いに出すという意味 HTML5
では人名には使えなくなった。
hr には罫線という意味はなくなったが
デフォルトスタイルで罫線が表示される。
意味を間違えてはいけない。(ブラウザ依
存の罠にはまりそう)

del と s の違いに注意
 定価を消した場合、del では間違ったの
 で削除したという様な意味になる。
 s は「もう無関係」という意味で使える
 ので「定価はこれですが、今は特価です」
 という意味で使える。

  • 心得

常に心がけていなければならない事

セマンティクスが強化
ソフトウェアにもわかり易い物を作るの
がユニバーサルアクセスにつながる。

クラストークンは定義されていない
(一部マイクロフォーマットとして定義
されている)

正確にメインコンテンツを抜き出せる様
HTML5 は定義されている。

GoogleHTML5 に対応しているかは不
明。現在は HTML4 のサイトが多く無視す
る訳には行かない為。

デフォルトスタイルにだまされるな。
英語圏の印刷スタイルに基づいたもの
読み手に違和感が無い様にスタイルを
当て直す必要がある。

欧米ではイタリックに人物の声等の意味
が持たされているが日本人にはなじみが
ない。

中国語では有名な人物等に下線を引く慣
例があるので u 要素があてがわれた。

日本語の慣例にあったスタイルを利用す
る様にしよう。

  • 作法

清く正しく美しく

章や説は見出しを伴うので section の乱
用には注意する。

article の中の article はコメントという意
味を持つ。

コメント欄を section で区切った場合
 記事と同列の重要度。
aside で区切った場合
 一段重要度を落とす。

HTML5 に移行する今後は文脈を理解しな
いと正しくマークアップできない。

HTML4 では機械的にマークアップ出来た
HTML5 になると文法チェッカーではチ
ェック出来ない部分が増えるので正しく日
本語を使えないと正しくマークアップ出来
ない。

マークアップの準備

10年前の大改革は利用者には何ももたらさ
なかった。

どのブラウザも XHTML 1.1 をサポートしな
かった。XML ベースで機械には優しいが利用
者には難しすぎてブラウザに実装されなかった。

どのブラウザも DOCTYPE 宣言をモード切り替
えの為に利用していた。

ブラウザ側は HTML5 で定義された部分しか見て
いなかったのでその部分のみを利用して標準モー
ドでレンダリングする様に定義された。

文字エンコーディングも同様に一部分しかブラウ
ザに利用されていなかったので charset 属性が追
加された。ただし文書の先頭から 1024 バイト以
内に書かないと有効にならない。IE ではかつて
512 バイト以内と言われてもいた。

HTML5 は過去のブラウザの挙動を仕様にしたも
のが多い。

言語指定
元々は HTTP ヘッダ を記述出来る様にした物だ
ったがブラウザには利用されていなかった。よっ
て旧来の meta 要素による指定は非推奨。html
要素に lang 属性として記述する。

新要素のスタイリング
道要素は全てブラウザでインラインとしてレン
ダリングされてしまう。ブロックが当たり前では
ないので明示的にブロックを指定する必要がある。

スタイルシートでブロックとして定義する。

section, article, aside, nab { display: block; }

IE8 以下では DOM ツリーが期待通りに構成され
ないので CSS が当たらない。解決法は html5shiv
を指定する事。

HTML5 では マークアップ作法は ほぼ HTML4 と
同じ。XHTML より規則は緩くなった。

終了タグはほぼ省略可能。ただし分かりにくいの
で乱用は避けるべき

hgroup の使用は避けた方が良い。まだ仕様が確定
されていないので変更される可能性がある。

HTML4 では節の区切りをデザイン的に表現してい
たがセマンティクス的に明確に表現出来なかった。
HTML5 では section 要素で明示的に節の区切る事
が出来る様になった。