seo Question posted in
Some basic information to get you started with this can be found here.

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

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…

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search