-
早くも5回目です。
今回はHTMLマークアップのルールについて説明します。
其の一でも紹介しましたが、HTMLマークアップをする上では
意味のあるブロック要素の中にインライン要素という形でマーキングしましょう。
-
悪い例.
<a href="/">HOME</a>
正しい例.
<p><a href="/">HOME</a></p>
デザインや文章構造が複雑になるとブロック要素内にブロック要素を定義する事もあります。
この時の気をつけなくてはならないのはリストタグ(LI,DD)以外のブロック要素内にはブロック要素を定義できないのです。
悪い例,
<h1><p>あかさたな</p></h1>
悪い例,
<dt><h2>あいうえお</h2></dt>
良い例,
<li><h2>見出し</h2><p>段落</p></li>
良い例,
<h1>ビートルズ</h1>
<dl>
<dt>メンバー紹介</dt>
<dd>
<h2>ジョン・レノン</h2>
<p>・・・・・・</p>
</dd>
</dl>
またW3Cの勧告文では触れられてないようですが、
意味のないブロック要素div等でインライン要素を括ってもOKですが、文章構造という観点から必ず意味のあるブロック要素で括る癖を付けて置いた方が良いです。
これは自分で研究した文章構造論なので自分以外、正確にこれを実行してる人は見たことありませんので個人的解釈と思ってもらって結構です。
ただこれをする事で結果が違うんです。
例,
<div><a href="/">HOME</a></div>
<div><img src="/bg.gif" alt="" /></div>
↓↓↓
<div><p><a href="/">HOME</a></p></div>
<div><p><img src="/bg.gif" alt="" /></p></div>