A inside figure or figure inside a?

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