是否可以在 <figcaption> 标记中包含定义列表？

Question

背景

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

我的研究

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

• MDN 在<figcaption> 中有一些带有<cite> 标签的examples。
• HTML5 Doctor 内部有一个 <a> 和 <code>。
• 一个 S.O.用户发布了一个间接相关的question，但我在他们的标记中注意到<figcaption> 中有一些<p> 标签。

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

Answer 1

是的，dl 允许在 figure/figcaption 内部：dl 是流内容，figure/figcaption 期望流内容根据其content model。

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

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

strong 元素似乎没有按照其定义（“非常重要、严肃或紧迫”）在这里使用。

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

我认为每个菜单项都应该是一个article，而不是使用figure。此选择允许使用标题和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>

Answer 2

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

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

例如<div class="exampleClass" data-title="My Title" data-info="My other info">