定義リストの定義の省略について
定義リストを使ってリンク集を作っていたんですが、その際にあるリンクに関しては説明を付けず、あるリンクに関しては説明を付けたいと思うことがありました。例えばAmazonのリンクなんかは誰でも知っているから説明をつける必要がないからです。
というわけで、次のようなHTMLを書いたわけです。
<dl>
<dt><a href="http://www.amazon.co.jp/">Amazon</a></dt>
<dt><a href="http://webu.hateblo.jp/">ウェ部</a></dt>
<dd>ステキなブログです。</dd>
</dl>これは次のように表示されます。
一見問題がないようですが、実はこれ、少なくともHTML5においては間違った用法です。どこが間違っているかわかるでしょうか？
これが間違ってることに気づいたのは、定義リストの定義部分を、用語部分の横に表示させようしたときです。つまり、次のようなスタイルシートを書きました（参考：CSSデザインカタログ | list | dt と dd を横並びにした定義リスト）。
dt {
clear: left;
float: left;
}これを適用すると、上記のHTMLは次のように表示されます。
Amazonがステキなブログということになってしまいました。
なぜこのようなことが起きるかというと、HTML5の定義リストでは複数の定義に対して一つの説明を与えることが可能で、上記のHTMLはAmazonとウェ部に「ステキなブログです。」という説明を与えていると解釈されるからです（参考：<dl>－HTML5タグリファレンス）。
<dl>－HTML5タグリファレンスではそれを利用した例として次のものを示しています。
<dl> <dt lang="ja"><dfn>色</dfn></dt> <dt lang="en-US"><dfn>color</dfn></dt> <dt lang="en-GB"><dfn>colour</dfn></dt> <dd>可視光線の波長の長短によって人が視覚で感じ分けられる色覚・色刺激のこと。</dd> </dl>
これが次のように表示されます。
- 色
- color
- colour
- 可視光線の波長の長短によって人が視覚で感じ分けられる色覚・色刺激のこと。
つまり、定義リストの定義を省略を記事の最初に示したHTMLでやろうとすると意図とは違う解釈をされてしまうために、その目的に記事の最初のHTMLは使えないということになります。
というわけで、定義の省略をしたかったら、次のように空の定義を入れるればよさそうです。
<dl>
<dt><a href="http://www.amazon.co.jp/">Amazon</a></dt>
<dd></dd>
<dt><a href="http://webu.hateblo.jp/">ウェ部</a></dt>
<dd>ステキなブログです。</dd>
</dl>これは次のように表示されます。
問題はなさそうですし、気を利かせてくれてるのか空の定義部分に余計な空白が入っていません。しかし、これに上記のスタイルシートを適用させると、次のようになります。
どうやら空の定義は完全に無視されているようです。
しょうがないので空のdtタグの中に （スペースの実体参照）を入れてみます。
一応意図した通りに表示されましたが、あまりスマートな解決法とは思えません。
なんとかならないものでしょうか。
