Question

Consider that you land on a category webpage, whose sole purpose it is to direct you to the appropriate sub-category by informing you what’s inside each with an image and a short title.

When it comes to UX considerations — it was suggested that the following arrangement would be the most optimal (text before image):

Each photo and text combination would link to the respective sub-category.

Considering semantic HTML5, since these are titles of sub-categories and not exactly captions, would it be appropriate to use the <figcaption> element? Or is something else?

Using figure captions:

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<figure>
<a>
<figcaption>Rhinos</figcaption>
<img />
</a>
</figure>

Using headers (or something else) instead:

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<figure>
<a>
<h3>Rhinos</h3>
<img />
</a>
</figure>

Or, what lese would be correct semantically, and allow ease of styling?

Answer 1

I think the use of the figure element would not be correct here, as this content is probably the main content of the page, but for figure it says:

[…] but that could, without affecting the flow of the document, be moved away from that primary content […]

You’d use figure if you have a diagram in a paper or a photograph in a news article etc.: content that “[…] is typically referenced as a single unit from the main flow of the document”.

Instead, I’d use section for each category and enclose all categories in a nav (because it is the main navigation for that sectioning content, which is opened by the heading “Our Planet’s Animals”).

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<nav> <!-- nav could be omitted -->

 <section>
  <a>
  <h1>Rhinos</h1> <!-- you could use h3 here instead -->
  <img />
  </a>
 </section>

 <section>
  …
 </section>

 <section>
  …
 </section>

 <section>
  …
 </section>

</nav>

---

If you don’t want to use headings, one could also use a list for the categories (dl or ul). I think the ul fits better than dl here:

<h2>Our Planet's Animals</h2>
<p>Contrary to popular belief...</p>

<nav> <!-- nav could be omitted -->
 <ul>
  <li><a>Rhinos <img /></a></li>
  <li>…</li>
  <li>…</li>
  <li>…</li>
 </ul>
</nav>

It might also be possible to use section in each li element (<li><section>…</section></li>), but I’m not sure how this would affect the document outline.