在<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>是否符合语义和w3标准？
2. 有没有更语义化的方式来展示幻灯片的“标题”（也称为类别），而不是使用类？我意识到这是一个单独的问题，但它与之相关，我无法将所有内容都塞进帖子标题中...

我的研究

我找不到一个完全符合我的要求的网站，但我找到了一些相似的：

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

w3.org没有指出我的方法是错误的，所以我有点确定它是正确的，但任何反馈都将不胜感激。

- abettermap

Answer 1

是的，dl可以放在figure/figcaption中：因为dl是流内容，而figure/figcaption根据它们的内容模型需要流内容。

然而，在您特定的示例中，我认为这不是最好的选择。

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>

- unor

---

啊，是的，文章更有意义了。您认为使用<h1>表示类别，<h2>表示菜单项如何？这些是我想要实现的层次优先级。 - abettermap

@travelampel：除非您有几个菜单项属于同一标题，否则我不会为类别使用标题；当同一级别上有几个具有相同类别的标题时，文档大纲会令人困惑。如果您不喜欢我使用的“子标题”方式，您可以使用一个标题并包含类别和菜单项（并以不同的样式呈现这些部分），但我猜您应该使用单数而不是复数：<h1>三明治：<b>火腿</b></h1> - unor

Answer 2

在编程中，使用<div> .. </div>来代替其他标签，HTML5中允许使用<figcaption>

坚持使用

标签将与任何设备上的任何浏览器兼容。如果需要，可以使用title属性。只要以data-开头，就可以使用任何属性。

例如：<div class="exampleClass" data-title="我的标题" data-info="我的其他信息">

- Scott Selby