html - 尝试获取整体时在 W3C 标记验证中出错元素作为页面中的链接

Question

我正在尝试将整个<figure>元素作为链接，所以我编写了这些代码行：-

   <figure>
   <a href="#">
    <img src="images/product-image.jpg" alt="image  " />
    <span class="label"><span class="rotate">40%</span></span>
    <span class="curle-label_bg"></span>
    <figcaption><span class="product-brand">Brand of product</span>
    Main Caption here 
   <span class="save-money">Save 395.05</span>
   <span class="product-price">€169.30</span>
   </figcaption>
   </a>
   </figure>

我在 http://validator.w3.org/ 中收到错误“不允许将元素 figcaption 作为元素 a 的子元素。（抑制来自该子树的进一步错误。）”，我已将文档类型更改为 HTML5 （实验性）在“更多选项”中，谁能告诉我为什么我会收到这个错误或者我哪里出错了？

Answer 1

从规格：

可以使用此元素的上下文：作为图形元素的第一个或最后一个子元素。

您正在尝试将其用作<a>not a的子元素<figure>

Answer 2

最好这样做：

   <a href="#">
     <figure>
        <img src="images/product-image.jpg" alt="image  " />
        <span class="label"><span class="rotate">40%</span></span>
        <span class="curle-label_bg"></span>
        <figcaption><span class="product-brand">Brand of product</span>
          Main Caption here 
         <span class="save-money">Save 395.05</span>
         <span class="product-price">€169.30</span>
       </figcaption>
     </figure>
   </a>

现在图形包含在 a 标签内，而 figcaption 是图形的子对象，而不是<a>