A inside figure 还是 figure inside a?

Question

转到代码段的 HTML 部分。第一个框有一个 figure，它用 img 标签包裹 a。第二个框有一个 a，它用 img 标签包裹 figure。

哪个盒子最正确？

图应该绕a还是应该绕图？

* {
  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

我已经查看并查看了共享 HTML。此外，firebug（Firefox 附加组件）盒模型中的 debugged/analyzed。 a 正确包装到 figure。

第二个框是正确的。 a 完全正确包装到 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>

谢谢

Answer 2

我认为您的两种变体在语义上都是正确的，并且它们都在 HTML5 标准内有效。

<a>和<figure>标签都是流量内容，同一标签允许的内容也是也是流量内容according to MDN .因此，将它们中的任何一个包裹在另一个中是非常有意义的。

如果你想 link 包括 <img>、<figcaption> 或任何流内容在内的图形内容，我会将所有内容包装在 <a> 标签内。

如果您只想 link <img> 或任何其他特定元素，我会将所有内容包装在 <figure> 标签内，然后将锚点包装在其中。

我不确定这种情况下的可访问性问题，但我认为这取决于内容。

A inside figure 还是 figure inside a?

A inside figure or figure inside a?

html

anchor

semantics

figure