文脈と経緯
以下は「一通りのタグの種類や、アウトラインアルゴリズムについては一応理解しているので何も分からない訳ではないけど、デザイン画をどんな風に実際のコードとしてマークアップしていけばいいかよく分からない」と言っていた新人デザイナー向けに書いたドキュメントです。
新人の子は、セクションを厳密に定義しようとして時間をかけすぎてしまっていました。それも重要ですが、実際の業務における優先順位を明確にしたかったという意図もあります。
筆者もデザイナーです。
HTMLのマークアップをする時は、以下の3段階のルールでどんな要素が適当かを判断してください。
第1段階：正しく技術仕様に沿っているか
タグの入れ子関係には一定の仕様があり、
これをHTML5では「コンテンツ・モデル」と言います。
XHTML1やHTML4で言うところの「ブロックレベル要素とインラインレベル要素」の
関係を複雑化して更に分かりにくくしたものです。
・ulの直下にはliしか入らない
・pの中にpは入らない
・aの中にaは入らない
みたいなルールがたくさんあり(もっと複雑です)、これに反する記述は
「それなりに」ブラウザ上で表示されることもありますが、
その挙動は予想が付かないものになり、バグの原因になります。
(挙動が仕様に定められていない為、ブラウザによって異なる動作をする可能性があります。)
たとえば、button要素にa要素を内包すると、
ブラウザによってはa要素のリンクが効きますが、
ブラウザによっては動作しなくなります。
コンテンツモデルを完全に把握するのは
正直かなり面倒くさいのですが、
以下のサイトが割と分かりやすいです。
- HTML5の｢コンテンツ・モデル｣と｢カテゴリー｣を理解してマークアップするためのまとめ
http://mnemoniqs.com/web/html5-contents-model/ - HTML5入門！画像でわかるコンテンツモデル最強チートシート http://webgoto.net/136/
技術仕様に反さない記述をすることは、
いかなるプロジェクトにおいても必要なことです。
とはいえコンテンツモデルは結構複雑なので、
実は私でも100%把握していないことがあります。
少しばかり仕様から外れても壊れていなければ良いですが、
ブラウザの挙動に支障を来たすような壊れ方をするのは
避けてください。
第2段階：使い勝手に影響するマークアップを正しく行っているか
ラジオボタンやチェックボックスには、label要素がないと
クリックできるエリアが狭くて使いにくくなります。
また、画像のalt属性は仕様上必須です。
入力フォームにlabelが付いていなくても仕様違反ではありませんが、
後述の第3段階に比べると、UIの使い勝手に影響するためより重要です。
(スクリプトを多用する特殊なデザインのUIの場合はこの限りではありません)
第3段階：正しいセマンティクスに沿っているか
セマンティクスとは「情報の意味」のことで、
これは第1段階とは異なるレイヤーで考えるべきことです。
つまり、見出しが見出しとしてマークアップされ、
箇条書きが箇条書きとしてマークアップされ、
アウトラインがアウトラインとしてマークアップされていることを指します。
セマンティクスは軽視されるべきではありませんが、
(というか私は滅茶苦茶こだわりますが)
あえて矛盾することを言うとどうでもよい場合もあります。
- とにかく見た目が見本と同じになればそれで良い案件
- とにかく急いで作る必要がある案件
- 一般向けに公開されるWebサイトではない社内システムなどの案件
上記のようなケースでは、セマンティクスは2の次3の次という
場合も少なくありません。
(やる意味がない、という訳ではなく、やればやるだけのメリットはあります。)
セマンティクスを重視する理由については、以下のページが詳しいです。
[HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者 http://webcre8.jp/think/semantic-html-reason.html
まとめると
第1、第2段階の配慮はいかなる状況においても、
コーディング時には気をつかってください。
第3段階については軽視して良い場合もあります。