title: Wrapping <a> around <div>, <figcaption> is invalid
body: <p>I have a grid with grid items and I wrapped them in &lt; a > tags so that the entire element leads to  the link. I really want valid html. </p>
  
  <pre><code>          &lt;!--Grid Item--&gt;
            &lt;figure class="grid-item"&gt;
                &lt;span&gt;
                  &lt;a href="#"&gt;
                    &lt;img src="images/image.jpg"&gt;
                    &lt;figcaption&gt;
                        &lt;h1&gt;Title&lt;/h1&gt;
                        &lt;p&gt;Description&lt;/p&gt;
                    &lt;/figcaption&gt;
                    &lt;div class="item-background"&gt;&lt;/div&gt;
                  &lt;/a&gt;
                &lt;/span&gt;
            &lt;/figure&gt;
            &lt;!--End Grid Item--&gt;
  </code></pre>
  
  <p>In certain hover effects the item background and ficaption are over the image with a lot of the image being exposed and left without the link.
  I have created a lot of hover effects with this structure. I know this is valid in html5 but I want to come up error free in html4 validator. Plus, I hear it's bad practice. I don't want to add any javascript if possible.</p>
  
  <p>Should I keep it the way I have it now or is there a valid way that doesn't interfere with the design.</p>