Anchor link containing multiple headings?

Question

According to the W3C wrapping multiple elements in 1 anchor tag is invalid.

I was wondering is there is a neat CSS solution for combining multiple heading and image tags into 1 valid clickable anchor?

I'm building a property listing site, and I want my 'mini listing boxes' to only have 1 anchor. Here's my invalid code:

<a href="listings.html">
  <h4>FOR SALE</h4>
  <h2>Listing Title</h2>
  <h4>$1,000,000</h4>
</a>

Answer 1

Actually no, it's not invalid, as long as it's inline elements (spans, images...).

And in HTML5 it's also valid to use block elements (divs, or, like your examples, headings). Firefox doesn't like this too much, though, sometimes.

So, if you want to stick to old HTML 4/XHTML 1 you need to turn those headings into spans (and style them accordingly), while if you use HTML5 and Firefox behaves, your code is formally okay (note: it doesn't make much sense to use headings like that, anyway).