语义html结构设置的图像链接(具有悬停的效果)，标题，并说明？

Question

我有一组项目(或一系列项目，但是我不想暗示使用的列表的)，它们包含的图像链接，一个标题，一个描述。图像链接的需要一个悬停的效果(阿尔法改变当鼠标)，而有一定的方式，我想要奠定了他们：图像上的左侧，然后标题和说明的权利。还有背景的整个街区的项目。

这里的截图什么我想它看起来像:alt文本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>

但我有一个很难得到css工作。例如我需要一个额外的背景对于每一组的一个，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

我想说的是，使用 <DL> 为此目的其实是 小 然后使用的语义 <DIV> -你肯定不会创建一个定义清单。

链接，标题和段落包裹在一个div似乎完全可以接受我。你可以尝试使用无序列表相反；但是你可能会有相同的(或者更糟的是作为你不会有dt/dd分离了)问题CSS你有没有用 <DL>.再加上使用标题标记不验证内列项目，所以你必须要诉诸另一个段落/div/跨度-肯定不太理想。

更新 (基于 idrumgood's下面的评论):
标题(和其他框级别的元素)做的验证在无序列项目，因此，也许在以下方式将两可的语义，并与你的风格：

<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

我觉得你后者的例子是完全良好的。你使用的标签，被恰当描述的内容，它们包含，甚至如果你要关掉你的风格，一般思想的网页仍会有(一个关键的语义网)。

Answer 3

我同意idrumgood，这不是一个列表中的项目，这是一组项目。使用div，它是一个完全有效的使用。如果你使用HTML5，将使用"部分"为每个项目和"图"的截图。