Getting an error in W3C Markup Validation when trying to get a whole <Figure> element as a link in a page

Question

I am trying to get whole <figure> element as a link so i wrote these line of code :-

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

I am getting an error "Element figcaption not allowed as child of element a in this context. (Suppressing further errors from this subtree.)" in http://validator.w3.org/ ,I have changed my Document Type in to HTML5 (experimental) in "More option", Can anybody tell me why i am getting this error or where i am going wrong?

Answer 1

From the spec:

Contexts in which this element can be used: As the first or last child of a figure element.

You are trying to use it as a child element of an <a> not a <figure>

Answer 2

Better to do this:

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

Now the figure is enclosed within the a tag, and the figcaption is a child of the figure, not the <a>