Question

我有一组项目（或项目列表，但我不想暗示列表的使用），它们包含图像链接，标题和描述。图像链接需要悬停效果（当鼠标悬停时alpha变化），并且我想要布置它们的某种方式：左边的图像，右边的标题和描述。还有整个项目的背景。

这是我希望它看起来像的截图： 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>

但是我很难让css为此工作。例如我需要为a，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>

这种布局的问题在于它对我来说看起来不是语义。我可以用无序列表将它包裹在li中，但这似乎是额外的标记。

也许我只是太挑剔了，但我确实想知道是否有一个很好的解决方案。这是一个很长的问题，谢谢你把它读到最后。

Answer 1

我会说为此目的使用<DL>实际上是较少语义，然后使用<DIV> - 您肯定不会创建定义列表。

包含在div中的链接，标题和段落似乎完全可以接受。您可以尝试使用无序列表;但是你可能会像使用<DL>一样（或者更糟糕，因为你不再有dt / dd分离）CSS问题。另外，使用标题标签也不会在列表项中进行验证，因此您将不得不求助于另一个段落/ 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

我认为你的后一个例子非常好。你正在使用恰当地描述它们所包含内容的标签，即使你要关闭你的风格，页面的一般概念仍然存在（语义网的关键）。

Answer 3

我同意idrumgood，这不是一个项目列表，它是一组项目。使用div，它是一个完全有效的用法。如果您使用的是HTML5，则每个项目都使用“section”，屏幕截图使用“figure”。

一组图像链接（具有悬停效果），标题和描述的语义html结构？

3 个答案: