A inside figure or figure inside a? - html

Question

Go down to the HTML part of the code snippet. The first box has a figure that wraps an a with an img tag. The second box has an a that wraps a figure with an img tag.
Which of the boxes is the most correct one?
Should figure wrap a or should a wrap figure?
* {
padding: 0;
margin: 0;
}
body,
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
border: 1px solid #ccc;
max-width: 200px;
margin: .5rem;
}
img {
vertical-align: top;
width: 100%;
}
.text {
padding: 2rem;
}
<!-- A inside figure -->
<div class="box">
<figure>
<a href="#">
<img src="http://placekitten.com/g/500/500">
</a>
</figure>
<div class="text">Text</div>
</div>
<!-- Figure inside a -->
<div class="box">
<a href="#">
<figure>
<img src="http://placekitten.com/g/500/500">
</figure>
</a>
<div class="text">Text</div>
</div>

Answer 1

I have checked and reviewed shared HTML. also, debugged/analyzed in firebug (Firefox add-ons) Box-Model. a properly wrapped to figure.
The second box is correct. a completely properly wrapped to figure.
<!-- Figure inside a -->
<div class="box">
<a href="#">
<figure>
<img src="http://placekitten.com/g/500/500">
</figure>
</a>
<div class="text">Text</div>
</div>
Thanks

Answer 2

I'd argue that both your variations are semantically correct, and they both validate within the HTML5 standards.
Both the <a> and <figure> tags are flow content, and permitted content inside the very same tags is also flow content according to MDN. So wrapping either one of them inside the other would make perfect sense.
If you want to link the figure contents including <img>, <figcaption> or any flow content, I'd wrap everything inside the <a> tag.
If you want to link just the <img> or any other specific element, I'd wrap everything inside the <figure> tag and then the anchor inside.
I'm not sure about accessibility concerns in this case, but I think it depends™ on the content.