1

I have a list of teasers looking like this:

<ul>
  <li>
    <a href="#">
      <article>
        <h1>Title of Video</h1>
        <img src="thumbnail.jpg">
        <p>Something about the video</p>
      </article>
    </a>
  </li>
  <li>
    <a href="#">
      <article>
        <h1>Title of Video</h1>
        <img src="thumbnail.jpg">
        <p>Something about the video</p>
      </article>
    </a>
  </li>
  <li>
    <a href="#">
      <article>
        <h1>Title of Video</h1>
        <img src="thumbnail.jpg">
        <p>Something about the video</p>
      </article>
    </a>
  </li>
</ul>

Should I use <figure> and <figcaption> instead of <article>?

It is my understanding that I should only use these tags if the text directly describes what is seen in the picture and not in the case depicted above.
But maybe I'm wrong ...

2 Answers 2

2

I wouldn't use figure, as I've always thought figure referred more to content that explains or enhances the main article. It wouldn't appear in a document outline, and could conceivably be moved away as a standalone content without making either itself or the main document unusable. It doesn't seem that either of those conditions really applies in this case, but it may depend on the intent of your main document.

Since the teasers aren't standalone content, and can't really be syndicated individually (the videos themselves are the articles, in other words), I'd use section rather than article.

2
  • "It wouldn't appear in a document outline" <- you sure about that? Jul 25, 2015 at 21:44
  • Not sure, but my interpretation is that it doesn't. figure is a sectioning root (w3.org/html/wg/drafts/html/master/…) which doesn't appear in the main document outline, nor do its subsidiary sectioning element contribute to the main outline.
    – Palpatim
    Jul 26, 2015 at 23:52
2

I don’t think that figure would be a good choice, because

  • you have more than just the main content (i.e., the thumbnail image) and the caption (i.e., the description), namely the title, and
  • the figcaption would have to annotate the content of the figure, which in your case is the thumbnail image, not the video itself, but it doesn’t really make sense to provide a caption for the thumbnail.

But even if figure might be appropriate, I think using article is the better choice:

  • It allows you to use the author link type, should you decide to link to the video author (which in itself is a good indicator that article is appropriate here: because the content could have a different author than the page author).

  • It allows you to use the bookmark link type for the link to the video (again, a sign that article is intended for such a case).

If you’ll use the bookmark type or not, the a should be part of the article:

  <article>
    <a href="" rel="bookmark">
      <h1>Title of Video</h1>
      <img src="thumbnail.jpg" alt="">
      <p>Something about the video</p>
    </a>
  </article>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.