Can a figure tag contain an anchor tag wrapping the image?

html figure
armellini13 picture armellini13 · Feb 23, 2015 · Viewed 16.8k times · Source

I am trying to create a figure tag that has inside an anchor tag wrapping the image. I was wondering if that structure is legal or not. Here is the code showing how I want it to work.

<figure>
   <a href="/my-picture">
       <img src="img/picture.jpg" alt="My picture">
   </a>
   <figcaption>
       My picture
   </figcaption>
</figure>

Answer

Maciej Paprocki picture Maciej Paprocki · Feb 23, 2015

Validator says it's proper structure, so yes.

When it comes to semantic I don't see any problem, however always remember that in HTML5 you can wrap whole figure in a link which might be of use as in most of the case you want to wrap description also.

I used this to validate:

<!DOCTYPE html>
<html>
  <head>
    <title>a</title>
  </head>
  <body>
    <figure>
      <a href="/my-picture">
        <img src="img/picture.jpg" alt="My picture">
      </a>
      <figcaption>
        My picture
      </figcaption>
    </figure>
  </body>
</html>

Related questions

How to import local image using knitr for markdown

I have an externally created png image in a local directory that I'd like to import to a report using knitr. The ultimate target filetype is html. I have no trouble getting my own figures to appear when I create …

Read More
CSS: Stop div and img from overlapping

I have a figure with an img inside it floating to the right and a div. My html is <div> <figure id="fig"> <img src="img.jpg"></img> <figcaption>Caption&…

Read More
what is the usage of HTML5 figure with img

Is there any specific advantage/usage of using HTML5 <figure> over <img>? I think <figure> is useless without <figurecaption>, isn't it? It will be helpful if explain with an example.

Read More