title: How do links around block elements translate in older browsers?
body: <p><a href="http://html5doctor.com/block-level-links-in-html-5/" rel="nofollow noreferrer">HTML5 allows</a> for links to be wrapped around block elements (one or several), but how exactly will it render in older browsers? Let's say to go as far back as IE6.</p>
  
  <p>I haven't found full details yet (but there are <a href="https://stackoverflow.com/questions/5320404/wrap-link-a-around-div">some examples</a>). </p>
  
  <p>The markup would be as follows:</p>
  
  <pre><code>&lt;a href="http://example.com"&gt;
    &lt;section&gt;
      &lt;h3&gt;Heading&lt;/h3&gt;
      &lt;p&gt;Text&lt;/p&gt;
    &lt;/section&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Also, would the most semantic way to make it compatible in older browsers be to wrap the links inside each block element separately? I've seen suggestions to replace the block elements with <code>span</code>, but that'd make it inline and alter the meaning of headings.</p>
  
  <hr>
  
  <p>I've noticed that <strong>even modern browsers</strong> (e.g. Safari on iOS 6) do weird things. For example, try <a href="http://jsfiddle.net/3QqmH/2/embedded/result/" rel="nofollow noreferrer">clicking on the image in this JSFiddle</a> from your mobile brwoser — even though it shares the link with the caption below, the caption doesn't get highlighted for me. Furthermore, when clicking the caption, the image nor caption get highlighted.</p>