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

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

Solution

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.