语义html结构设置的图像链接(具有悬停的效果),标题,并说明?
题
我有一组项目(或一系列项目,但是我不想暗示使用的列表的),它们包含的图像链接,一个标题,一个描述。图像链接的需要一个悬停的效果(阿尔法改变当鼠标),而有一定的方式,我想要奠定了他们:图像上的左侧,然后标题和说明的权利。还有背景的整个街区的项目。
这里的截图什么我想它看起来像: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>
这个问题的布局是它看起来并不语给我。我可以把它包围在李有一个无序列,但这似乎是额外的标记。
也许我只是太挑剔,但我想找出如果有一个很好的解决方案。这是一个相当长的问题,并感谢你阅读它的结束。
解决方案
我想说的是,使用 <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>
其他提示
我觉得你后者的例子是完全良好的。你使用的标签,被恰当描述的内容,它们包含,甚至如果你要关掉你的风格,一般思想的网页仍会有(一个关键的语义网)。
我同意idrumgood,这不是一个列表中的项目,这是一组项目。使用div,它是一个完全有效的使用。如果你使用HTML5,将使用"部分"为每个项目和"图"的截图。