2

我有一组项目（或项目列表，但我不想暗示使用列表），它们包含图像链接、标题和描述。图像链接需要悬停效果（鼠标悬停时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 中，但这似乎是额外的标记。

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

4

3 回答 3

2

我会说，<DL>为此目的使用实际上比使用更少语义<DIV>- 你肯定不会创建定义列表。

包裹在 div 中的链接、标题和段落对我来说似乎完全可以接受。您可以尝试改用无序列表；但是您可能会遇到与使用<DL>. 加上使用标题标签也不会在列表项中验证，所以你必须求助于另一个段落/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>
于 2009-08-03T19:46:37.110 回答
0

我认为你的后一个例子非常好。您使用的标签恰当地描述了它们包含的内容，即使您关闭样式，页面的总体概念仍然存在（语义网的关键）。

于 2009-08-03T19:47:37.327 回答
0

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

于 2009-08-04T03:25:48.817 回答