是否可以在<figcaption>标签中包含定义列表？</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. 在<dl>代码中使用<figcaption>是否具有语义友好性和可靠性？
2. 是否有更多语义方式来显示幻灯片“标题”（又称类别）而不是使用类？我意识到这是一个单独的问题，但它是相关的，我不能把所有这些都塞进帖子标题......

我的研究

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

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

w3.org表明没有任何迹象表明我的方法不正确，所以我确定它很好，但任何反馈都会受到赞赏。

Answer 1

是的，dl / figure允许figcaption：dl是流内容，figure / figcaption是流内容根据他们的content model。

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

dl并未真正添加任何内容来理解此figure的内容。如果存在多个名称 - 值对（例如，＆＃34; Price＆＃34;，＆＃34; Ingredients＆＃34;等），那将是合适的，但您目前拥有的只是标题和描述。< / p>

strong元素似乎根据其定义（＆＃34;强烈的重要性，严肃性或紧迫性＆＃34;）来使用。

我也认为在这种情况下，类别/标题/描述并不是照片的标题;对我来说，似乎这4个元素应该在同一水平上，所以说。但这可以解释，也取决于幻灯片放映的背景。

我认为每个菜单项都应该是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">