我有一个包含产品列表的页面 .
我决定使用无序列表而不是div来显示产品,但是存在问题,因为我无法在 <li>
中插入其他块级元素来实现我想要的某些特定设计(带有一些背景的图像,有边框)描述,浮动链接等等) .
我的问题是:
-
使用
<li>
中的内联元素(例如<span>
)来实现这样的可视化是否可能和语义正确? -
使用div代替它(和H2,P标签)在语义上是否正确?
-
通常,您如何标记每个产品包含的产品列表:
-
一张图片;
-
产品名称;和
-
一个链接"more" .
提前致谢 .
3 回答
一种极端语义的方式将是dukevideo.com上使用的模型 .
(在真实网站上,标记已经重新制作 - 并且无效 . 我的继任者是在LIs中唱DIV而不是SPAN)
这种语义标记很重,但是超级语义 . 搜索引擎或屏幕阅读器可以很好地工作 . 它允许我们以列表形式区分产品规格的各个部分 .
希望这些类能够指示CSS正在做什么 . 例如:* . 隐藏 - 隐藏屏幕上的内容,但不隐藏屏幕阅读器,搜索引擎* .red - 使文本变为红色* .strikethru - 罢工 - 通过文本,以说明大幅降价* .title - 更大胆的脸
HTML最重要的部分是它具有语义意义 . 如果你想将内联元素显示为完全可以接受的块级元素,只要它背后的HTML是有意义的 . 这是能够将内容与演示文稿分开的重要部分 .
通常,如果您可以将某些内容描述为列表,那么它应该是一个HTML列表,可以是
<ul>
,<ol>
或<dl>
. 它想要遵循该指南,那么只要不将块级元素放在内联元素中就可以使用<div>
.保持标记尽可能简单我会说它应该如下所示:
有关样式的一些其他信息
<dl>
s Max Design's "Definition lists - misused or misunderstood?"有一个可能有用的不同样式列表 .<span>
是"tofu of HTML",就像<div>
一样 . 它通常可以插入任何地方,但如果你想确定,我建议你试一试,然后在the W3C validation page上测试HTML .或者甚至更好,如果您使用的是Firefox,请使用HTML Validator add-on for Firefox . 我知道它仅适用于Windows,但在他们的网站上,还有适用于Linux和OS X的版本 .
是的 .
我会使用无序列表,就像你在这里做的那样,或Data List .