リストタグの使い分け

先ほど、社内で少し話しが出てたものを記載。皆さんもご存知の焼酎甲類ビッグマンを例にしました。

ブラウザ表示

焼酎甲類ビッグマンシリーズ
ビッグマンブラウン
スーパービッグマン
ビッグマンスタンダード
ビッグマンパック
ビッグマンタンク

こんな感じで表示するとき、どーいたす？
※list-style は none で考え脳内ブラウザでイメージしてください。
金井は脳内ブラウザVer 0.98 搭載(バグあり)

1. <ul> + <li> (XHTMLソース)

<h3>焼酎甲類ビッグマンシリーズ</h3>
<ul>
<li>ビッグマンブラウン</li>
<li>スーパービッグマン</li>
<li>ビッグマンスタンダード</li>;
<li>ビッグマンパック</li>
<li>ビッグマンタンク</li>
</ul>

美しいソースですね、<ul> + <li> は箇条書きのためのタグですので、これがベスト。

2. <ol> + <li> (XHTMLソース)

<h3>焼酎甲類ビッグマンシリーズ</h3>
<ol>
<li>ビッグマンブラウン</li>
<li>スーパービッグマン</li>
<li>ビッグマンスタンダード</li>;
<li>ビッグマンパック</li>
<li>ビッグマンタンク</li>
</ol>

スタイルの指定がないと上から1, 2, 3, 4, 5...と先頭に番号が表示されます。まずさランキングなどの表示には <ol> + <li> を使いましょう。

3. <dl> + <dt> (XHTMLソース)

<h3>焼酎甲類ビッグマンシリーズ</h3>
<dl>
<dt>ビッグマンブラウン</dt>
<dt>スーパービッグマン</dt>
<dt>ビッグマンスタンダード</dt>;
<dt>ビッグマンパック</dt>
<dt>ビッグマンタンク</dt>
</dl>

それぞれのビッグマンに説明分が入る場合は <dd> タグを使って記述しましょう。これ例の場合は向いてない。

4. <br /> (XHTMLソース)

<h3>焼酎甲類ビッグマンシリーズ</h3>
ビッグマンブラウン<br />
スーパービッグマン<br />
ビッグマンスタンダード<br />
ビッグマンパック<br />
ビッグマンタンク<br />

これはバグです、もはやバグです。そこで改行せざるを得ないデザイン、構築にしてしまった結果生じたバグです。

ということで本日より<br /> 禁止！以上！！
タグには意味合いがあるので、基準に沿って正しく美しいソースコードを書こう。