背景
我正在为一家餐厅网站创建一个滑块,并使用Swiper进行编码,希望尽可能地语义化。为了让您了解内容,每个幻灯片都有四个主要特征:
- 背景图片
- 菜单类别(例如三明治)
- 菜单项
- 菜单项描述
如果您需要视觉效果(和食欲):
我的解决方案
这是我能想到的最语义化的编码方式:
<figure class="swiper-slide">
<img src="img/hammin-it-up.jpg" alt="" />
<figcaption>
<strong class="slider-menu-category">Sandwiches</strong>
<dl class="slider-menu-item">
<dt>Hammin' It Up</dt>
<dd>Fontina Cheese & Blackforest Ham grilled on Texas Toast</dd>
</dl>
</figcaption>
</figure>
我的问题
- 在
<figcaption>
标签中使用<dl>
是否符合语义和w3标准? - 有没有更语义化的方式来展示幻灯片的“标题”(也称为类别),而不是使用类?我意识到这是一个单独的问题,但它与之相关,我无法将所有内容都塞进帖子标题中...
我的研究
我找不到一个完全符合我的要求的网站,但我找到了一些相似的:
- MDN有一些例子,其中
<cite>
标签在<figcaption>
内部。 - HTML5 Doctor有一个
<a>
和<code>
同时在其中。 - 一个S.O.用户发布了一个间接相关的问题,但我注意到他们的标记中有一些
<p>
标签在<figcaption>
内部。
w3.org没有指出我的方法是错误的,所以我有点确定它是正确的,但任何反馈都将不胜感激。
<h1>三明治:<b>火腿</b></h1>
- unor