Acceptable to include a definition list within a <figcaption> tag?

Question

Background

I am using Swiper to create a slider for a restaurant website and I would like to code it as semantically as possible. To give you an idea of the content, each slide has four main features:

• Background image
• Menu category (i.e. sandwiches)
• Menu item
• Menu item description

If you need a visual (and an appetite):

My Solution

This was the most semantic way I could think of to code it:

<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>

My Question/s

1. Is it semantically friendly and w3-OK to use a <dl> within a <figcaption> tag?
2. Is there a more semantic way to show the slide "title" (aka category) than using a class? I realize this is a separate question, but it's related and I couldn't cram all that into the post title...

My Research

I could not find a site with an exact match to what I did, but I found some that were close:

• MDN has some examples with a <cite> tag inside a <figcaption>.
• HTML5 Doctor has an <a> and <code> inside the same.
• An S.O. user posted an indirectly related question, but I noticed within their markup some <p> tags inside a <figcaption>.

w3.org indicates nothing suggesting my method was incorrect, so I am semi-sure it's fine, but any feedback would be appreciated.

Answer 1

Yes, dl is allowed inside of figure/figcaption: dl is flow content, and figure/figcaption expect flow content according to their content model.

However, I don’t think it’s the best choice in your specific example.

The dl doesn’t really add anything to understanding the content of this figure. It would be appropriate if there were several name-value pairs (e.g., "Price", "Ingredients" etc.), but what you currently have is just a title and a description.

The strong element doesn’t seem to be used according to its definition ("strong importance, seriousness, or urgency") here.

And I also think that the category/title/description isn’t really a caption for the photograph in this case; to me, it seems these 4 elements should be on the same level, so to say. But this is open for interpretation and also depends on the context where this slideshow will be shown.

Instead of using figure, I think that each menu item should be an article. This choice enables the use of headings and header elements:

<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>