Best way to make image+caption link

Get Help HTML
,
#1

Hi!
During my work on off-platform project “The Tea Cozy” I ran on a design/structural problem.
What is the best and most appropriate way to make link consisting of an image followed by the caption?

I came up with something like this having semathic good practise in my mind:

<a href="...">
     <figure>
          <img src="..." alt="...">
          <figcaption>Some text</figcaption>
     </figure>
</a>

Or is it better to stick with just div’s and spans?

<a href="...">
     <div class="..">
          <img src="..." alt="...">
          <span>Some text</span>
     </div>
</a>

What’s your thoughts on this topic? What way would be the best?
Thanks in advance for help :slight_smile:

#2

I like the first one better, but not fond of wrapping a block with an inline element. Perhaps write the link inside the figure and just wrap the IMG and caption. That way the outer block is easier to spot and read and looks more organized.

Also, since the link won’t have official link text, apart from what is in the caption, I would add a title attribute that describes the target of the link.

<a href="#" title="Wikipedia page for 'brown bear'"> ... </a>

as an example.

#3

Thanks for the advice. Much appreciated! I unnecesarily made it more complex (nested) than it should :wink:

1 Like