Can I nest a <figure> element within <a> tags?

Question

According to the HTML5 docs, the link tag <a> accepts all contents, but, is this really correct?

For figure elements, which one is valid? If more than one is valid, is any one of them better than the other in any objective way?

1. <figure class="box">
     <a href="#">
      <img src="" alt="" />
      <figcaption>Hello!</figcaption>
     </a>
   </figure>
   

2. <a href="#" class="box">
     <figure>
      <img src="" alt="" />
      <figcaption>Hello!</figcaption>
     </figure>
   </a>
   

3. <figure class="box">
     <a href="#">
      <img src="" alt="" />
     </a>
     <figcaption>Hello!</figcaption>
   </figure>
   

Answer 1

Fragment #1 is invalid (in the sense that it does not pass validation by a conformance checker such as Validator.nu), because a figcaption may not appear as a child of any element but a figure.

Fragments #2 and #3 conform to HTML5, but they mean different things. To start, here is what the spec says about a elements:

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.

With this in mind:

In #2, the figure is the hyperlink content.

In #3, only the image is the hyperlink content. The caption is not part of the hyperlink. The image and the caption are both part of the figure, however.

Because they mean different things, neither is "better" than the other in a generic sense. Do you want the entire figure to be a hyperlink? Then use #2. Do you want just the image to be a hyperlink? Then use #3.

Answer 2

In objective terms it is difficult to establish, in technical terms there are the following recommendations of w3c

"The figures element Represents some flow content, optionally with a caption, That is self-contained (like a complete sentence) and is Typically referenced as a single unit from the main flow of the document. Thus the element can be used to annotate illustrations, diagrams, photos, code listings, etc. When a figure is Referred to from the main content of the document by identifying it by its caption (eg by figure number), it Enables such content to be easily moved away from primary That content, eg to the side of the page, to dedicated pages, or to an appendix, without Affecting the flow of the document. "

In these terms the # 1 can be considered a way to easily separate a part from the general context