How to implement a caption and photographer credit with <figure>

Question

I would like to create a standard way to provide an image with an alt tag for accessibility and SEO, a descriptive caption, and a separate element for a photographer credit. It appears that only one <figcaption> is allowed per <figure> and it must be the first or last element, so that rules out doing this:

<figure>
    <img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
    <figcaption class="caption">George, the doggo</figcaption>
    <figcaption class="photo-credit">Photo: Jane Doe</figcaption>
</figure>

Which of these is best, and why?

1

<figure>
    <img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
    <div class="photo-credit">Photo: Jane Doe</div>
    <figcaption class="caption">George, the doggo</figcaption>
</figure>

2

<figure>
    <img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
    <figcaption>
        <span class="caption">George, the doggo</span>
        <span class="photo-credit">Photo: Jane Doe</span>
    </figcaption>
</figure>

3

Something else...

Lionfish

Answer 1

I would go with a variation of option 2, where you add punctuation to the contents of the inline elements to make them read better as sentences.

<figure>
  <img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
  <figcaption>
    <span class="caption">George, the doggo.</span>
    <i class="photo-credit">Photo by Jane Doe.</i>
  </figcaption>
</figure>

The MDN Web Docs spec describes the <figure> element as follows (emphasis mine):

The HTML <figure> (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (<figcaption>) element. The figure, its caption, and its contents are referenced as a single unit.

Placing the photo credit outside of the <figure> (as another answer suggests) would make it no longer "self-contained", as the credit is an integral part of the photograph. The <figcaption> element is the most appropriate place for the credit, as long as you word it in such a way that readers won't confuse it with part of the caption.

Using an <i> element for the credit can further separate it (both visually and semantically) from the caption, as:

The HTML <i> element represents a range of text that is set off from the normal text for some reason.

Cameroncameroon

Answer 2

I think this is a very personal choice and all your proposals are correct. However, I guess thefigure component should only accept two children: img and figcaption. I also think figcaption must only do one thing: show the figure caption. If I need a space to credits, so, I need to implement it.

Below my implementation:

.photo {
  display: flex;
  flex-flow: column;
  align-items: center;
  max-width: 300px;
  background: #f1f1f1;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 6px;
  box-shadow: 1px 2px 3px rgba(0,0,0,0.3);
}

figure {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin: 0;
}

figure img {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 4px;
}

figure figcaption {
  color: #333;
  font-size: 16px;
  font-family: 'Verdana';
}

.photo-credit {
  padding-top: 10px;
  color: #333;
  font-size: 14px;
  font-style: italic;
  font-family: 'Verdana';
}

.photo-credit:before {
  content: 'Photo: ';
}

<div class="photo">
  <figure>
    <img src="https://placedog.net/500/280" alt="a handsome pooch stares at the camera">
    <figcaption class="caption">George, the doggo</figcaption>
   </figure>
  <span class="photo-credit">Jane Doe</span>
</div>

Performative

Ok, that's an interesting way to do it... feels like a lot of markup for what's being accomplished. I guess it is a personal choice at some point, like you said. I was just curious if there was an industry standard for this kind of thing, but I guess not. – Lionfish

Hi @squarecandy, well, I worked in a lot of companies developing front end interfaces and I never have seen any specific standard for that. Sometimes is better to have more code and be clear and consistent. Cheers – Performative

@PabloDarde "However, I guess the figure component should only accept two children: img and figcaption." This is not true. A figure can have as many elements with in it as necessary. The only restriction is on the number and placement of the figcaption—there can only be one, and it must be first or last. – Cameroncameroon

Answer 3

I'd probably go with <cite /> since MDN describes it as follows:

The HTML Citation element (<cite>) is used to describe a reference to a cited creative work, and must include the title of that work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata.

Daron

I believe <cite> is intended for citing external works, not for crediting the creator of the current item. See developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote – Lionfish

How do you define "external works"? If the photographer is neither the site owner nor staff, they are somewhat external, aren't they? – Daron

It's to cite a work, not an author - so if you have a blog post that is discussing "Brave New World" and then you put a quote from the book in, blockquote goes around the quote and cite goes around "Brave New World", not "Aldous Huxley". In this case, the book is not the blog post - the book is a work being quoted/referenced - that's what I mean by external. And the author is not the work - note that the Mozilla example puts cite around the title only. – Lionfish

It says it right in the MDN quote you posted: "<cite> is used to describe a reference to a cited creative work, and must include the title of that work" – Lionfish

You're right. Sorry, I misread the emphasis of your answer. Maybe you can use a microformat like hCard or microdata like schema.org instead. – Daron

Yeah, schema.org is actually a great idea. I guess it would matter less if you use <span> vs <em> vs <figcaption> if you just mark it up with itemprop="author" or itemprop="creator"within a https://schema.org/Photograph on the <figure> – Lionfish