2

背景

我正在使用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>

我的问题

  1. 在标签中使用 a<dl>在语义上是否友好且 w3-OK？<figcaption>
  2. 有没有比使用类更语义化的方式来显示幻灯片“标题”（又名类别）？我意识到这是一个单独的问题，但它是相关的，我无法将所有这些都塞进帖子标题中......

我的研究

我找不到与我所做的完全匹配的网站，但我找到了一些接近的网站：

  • MDN有一些<cite>在<figcaption>.
  • HTML5 Doctor有一个<a>和<code>里面一样的。
  • 一个 SO 用户发布了一个间接相关的问题，但我在他们的标记中<p>注意到<figcaption>.

w3.org表示没有任何迹象表明我的方法不正确，所以我半肯定它没问题，但任何反馈都将不胜感激。

4

2 回答 2

1

是的，在/dl中是允许的：是流内容，并且/根据其内容模型期望流内容。figurefigcaptiondlfigurefigcaption

但是，我认为这不是您具体示例中的最佳选择。

并dl没有真正添加任何内容来理解 this 的内容figure。如果有几个名称-值对（例如，“价格”、“成分”等），那将是合适的，但您目前拥有的只是一个标题和一个描述。

此处的strong元素似乎并未根据其定义（“非常重要、严肃或紧迫”）使用。

而且我还认为，在这种情况下，类别/标题/描述并不是照片的真正标题；对我来说，这四个元素似乎应该在同一水平上，可以这么说。但这是开放的解释，也取决于将显示此幻灯片的上下文。

而不是使用figure，我认为每个菜单项应该是一个article. 此选择允许使用标题和header元素：

<article>
  <img src="" alt="" />
  <header>
    <div>Sandwiches</div>
    <h1>Hammin' It Up</h1>
  </header>
  <p>Fontina Cheese & Blackforest Ham grilled on Texas Toast</p>
</article>
于 2014-06-25T14:34:07.437 回答
-1

用于<div> .. </div>所有内容，<figcaption>HTML5 允许使用

坚持使用 div 将与任何设备上的任何浏览器兼容。如果您愿意，可以使用 title 属性。你也可以有任何属性，只要它以data-

和例子是<div class="exampleClass" data-title="My Title" data-info="My other info">

于 2014-06-25T04:00:44.980 回答