イメージリンク（ホバー効果を持つ）、タイトル、説明のセマンティックhtml構造？

Question

私はアイテムのセット（またはアイテムのリストですが、私はリストの使用を暗示したくありません）を持っています、彼らはイメージのリンク、タイトル、および説明が含まれています。イメージリンクにはマウスオーバーするとアルファ変化があり、マウスを置いて特定の方法があります：左の画像、次に右のタイトル、説明。また、商品のブロック全体の背景もあります。

は、ここで私はそれが見えるようにしたいもののスクリーンショットです： alt text http://img26.imageshack.us/img26/9806/screenshothmr.png

ので、私の質問は、このための良いセマンティックHTML構造である何ですか？私はこのようにdlを使用しようとしました：

<dl> 
    <dt><a href="#"></a></dt> <!-- using the background of anchor for the hover effect --> 
    <dd>Title<p>description goes here</p></dd> 

    <dt>... 
</dl> 

しかし、私はこのために働くのに苦労しています。例えば私は、dtとddの各セットの余分な背景が必要です、そして、私は背景を組み合わせるために3つの異なるイメージを使用したくありません。だから私はこれを行うdivの束を使用することを考えています：

<div> 
    <a href="#"></a> <!-- image link with background hover --> 
    <h4>Title</h4> <!-- i also wanted to use h4 inside the dd, but it won't pass validation --> 
    <p>description goes here</p> 
<div> 

このレイアウトの問題は、それは私にとって意味がないということです。私は順序のないリストでそれをリップで包むことができますが、それは特別なマークアップのようです。

たぶん私はあまりにもうるさいことだけど、このための良い解決策があるのなら、私はしたく見つけるん。かなり長い質問ですが、最後まで読んでいただきありがとうございます。

Answer 1

私は<DIV>を使用して、この目的のために<DL>を使用して、実際に以下セマンティックであることを言うだろう - あなたが最も確かに定義リストを作成していません。

リンク、ヘッダーとdivの中に包まれた段落は、私には完全に受け入れているようです。代わりに、順序なしリストを使用することができます。 <DL>の場合と同じように、CSSとの問題は同じである（またはdt/ddの分離がないほど悪くなる）可能性があります。また、ヘッダータグを使用するとリストアイテム内で検証されないので、別の段落/ div/spanに頼らざるを得ません。 （以下idrumgoodのコメントに基づいて）

更新：
ヘッダー（および他のブロックレベル要素は）ので、おそらく次のようなアプローチは、両方の意味的になり、順不同リスト項目の中に検証して作業を行うあなたのスタイル：

<ul> 
    <li> 
    <a href="#"> </a> <!-- image link with background hover --> 
    <h4>Title</h4> 
    <p>description goes here</p> <!-- perhaps you won't need the actual paragraph tag --> 
    </li> 
</ul> 

Answer 2

あなたの後者の例は完全に良いと思います。あなたは、内容が適切に記述されたタグを使用しています。スタイルをオフにしても、ページの一般的なアイデアはそこに存在します（セマンティックWebの鍵）。私はidrumgoodに同意

Answer 3

が、これはプロジェクトのリストではありません、それはプロジェクトのセットです。 divを使用すると、divを完全に有効に使用できます。 HTML5を使用していた場合は、各項目に「セクション」を使用し、スクリーンショットに「図」を使用します。