我可以在 <a> 标签内嵌套 <figure> 元素吗？

Question

根据 HTML5 文档，链接标签<a>接受所有内容，但是，这真的正确吗？

对于图形元素，哪一个是有效的？如果不止一个是有效的，那么其中任何一个在客观方面是否比另一个更好？

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

片段 #1 无效（从某种意义上说，它没有通过 Validator.nu 等一致性检查器的验证），因为afigcaption可能不会显示为除 a 之外的任何元素的子元素figure。

片段 #2 和 #3 符合 HTML5，但它们的含义不同。首先，规范中关于元素的说明如下a：

如果该a元素具有href属性，则它表示由其内容标记的超链接（超文本锚点）。

考虑到这一点：

#2中，该图是超链接内容。

在#3中，只有图像是超链接内容。标题不是超链接的一部分。然而，图像和标题都是图的一部分。

因为它们的含义不同，所以从一般意义上讲，两者并不比另一个“更好”。您希望整个图成为超链接吗？然后使用#2。您只想将图像作为超链接吗？然后使用#3。