div要素とspan要素の役割
div要素とspan要素は、id属性及びclass属性と併用することで、文書に構造を付加するための一般機構を提供する
ものです[HTML4.01]。一般機構といっても、なんでもかんでもdiv要素やspan要素としてマーク付けしてよい、というわけではありません。これらの要素型を用いてよいのは、文書の制作者が存在を示したいと考えるなんらかの要素が、HTML/XHTMLの要素型として定義されていない場合のみです。以下に例を示します。
<div class="section">
<h2>七夕</h2>
<p>今日は<span class="date">7月7日</span>、七夕です。
笹に短冊を吊るそうとしましたが、通りすがりのパンダに笹を食べられてしまいました。</p>
<div class="photo">
<img src="..." alt="[写真] 笹を貪る通りすがりのパンダ" />
</div><!-- eoc (photo) -->
</div><!-- eoc (section) -->
ただし、div要素とspan要素自体はいかなる意味も持たない、という点には注意が必要です。これらの要素がなにを意味しているかは、機械的に判断することができません。もちろん、CSSなどでスタイルを付与しておけば、ユーザは制作者の意図を推測してくれるでしょう。しかし、制作者の設定したスタイルシートが適用されないこともあるので、そうした場合でも閲覧に支障がないようにしておくべきです。
class名とidの付け方
class名とidを付けるときは、その要素の意味に即した名前を付けておくと、メンテナンスが容易になります。class="space-2"やclass="green"のように、特定のスタイルに依存した名前を付けてはいけません。制作者自身が文書の構造を把握しにくくなるだけでなく、あとからスタイルを調整・変更する際にも不便です。