巷ではHTML5が言われていますが、そもそもHTML4.01やXHTMLのマークアップができないのにいきなりHTML5を使うのは愚の骨頂と言ってもいいと思います。HTML4.01やXHTMLがあったからこそHTML5が開発されることになりました。現在使われる技術がなくなるわけではないです。新しい技術を使うためには古い技術も大事です。今回はXHTMLのマークアップの効率化の紹介をしたいとおもいます。

div要素、span要素を少なくする

div要素、span要素は固有の役割を持たないタグです。このタグは純粋なスタイルコンテナとして利用できます。そのため、フルCSSレイアウトではこれらの要素が必要不可欠になります。

div要素、span要素は構造的には不要な存在

div要素、span要素は構造的な役割をもたないために構造的には不要な存在といっても過言ではありません。例えば、以下のようなグローバルナビゲージョンをマークアップしたときに、必ずしもdiv要素を使ってul要素をラップするのではなく、直接ul要素にid要素を割り当てても良いといえます。

<div id="globalnavi">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ああああ</a></li>
<li><a href="#">いいい</a></li>
</ul>
</div>

<ul id="globalnavi">
<li><a href="#">HOME</a></li>
<li><a href="#">ああああ</a></li>
<li><a href="#">いいい</a></li>
</ul>

チームにおけるマークアップルール

会社や制作チームで、『ページ内のおおまかな情報ブロックはdiv要素で定義する』と決めている場合は、ul要素に直接idを割り振ってしまう事で混乱が生じる可能性があります。そのようなケースでは取り決めたルールは守りながら、一方でdiv要素はなるべく少ない方が良いという共通認識が大切になります。

フルCSSレイアウト

フルCSSレイアウトの場合、目的とするレイアウト実現のためにdiv要素を入れ子にすることがよくあります。しかし、なるべく入れ子を少なくする工夫、例えば4階層の入れ子を3階層にするなど、できるだけマークアップをクリーンにする工夫は必要になります。

span要素の原則

span要素は、div要素みたいに複雑ではありません。意味的なインライン要素（em要素やstrong要素など）でマークアップできないかどうかを考え、どうしてもできない場合にspan要素を使うというのが原則です