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>

我收到错误“元素figcaption不允许作为元素a的子元素在此上下文中。（抑制此子树中的其他错误。）“在http://validator.w3.org/中，我已将文档类型更改为HTML5（实验性）”更多选项“，有人可以告诉我为什么我收到这个错误或者我错了？

Answer 1

来自the spec：

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

您正尝试将其用作<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>

现在这个数字被包含在一个标签内，而figcaption是该数字的子项，而不是<a>

尝试将整个<figure>元素作为页面中的链接时，在W3C标记验证中出错</figure>

2 个答案: