Is there a way to include block elements in an inline tag with valid code?

Unfortunately not, you cannot put block-level elements inside inline elements and validate. You need to use the three anchors.

W3C validator gives this message:

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

You can but only in HTML5. The idea of block and linline elements has been removed from the HTML5 spec (n.b. it remains in the CSS spec) and now elements are defined as phrasing or flow - check the working draft. Some elements are flexible - they can be phrasing content or flow content - and the a element is one of those.

Your other choice is to use inline elements (strong etc.) inside the block level element and then in your CSS define them as block level.

Change the <a> to a block level element with display:block in the CSS. It is valid code although the w3 validator will still flag it because the validator only validates the HTML and does not take into account any changes in the CSS.

There's a nice way of doing what you're looking for with jQuery.

a simple class on the outside box and jQuery will make it clickable.

see: http://www.trovster.com/lab/plugins/fitted/

I used it here on all the big boxes: Black Country Living Museum

You could probably do something like this:

<li><img src="..." /><h5>title</h5><p><a>some text</a></p></li>

Then simply set the appropriate padding on the anchor so as to emulate enclosing everything within it. In reality the anchor will be separate and valid, but enclose the other elements in a "bubble" so to speak. Of course this will take a bit of work to accomplish via positioning the other elements according to your desired layout (negative margins, floats, etc.).

This has the benefit of making the whole thing feel as though it's one giant link, and even more importantly, functioning as such.

I've done something similar before on my company's homepage for our 3 main options (3 large blue boxes below the main head entitled Add a property, search recentSales, search businesses) you can view the example here: http://www.loopnet.com/

On our site we actually split the anchor up into two (one anchor for the <h2> tag, one for the <p> tag), however you might be able to get away with just one anchor, depending on how you intend to format everything. You'll want to play around with it and see for yourself.

Due to the complexity of our site and the way .net shoots out code we don't validate, so use the site example more as a rough guide.

Hope this helps!

If you'd like to emulate the look of the whole thing being one <a>, you could write some css such as;

li a img, li:hover a img { border: 1px solid red; }
li h5 a, li:hover h5 a { color: red; }
li p a, li:hover p a { color: red; }

This will then activate your hover states for each individual element by hovering on their containing <li>.

This will gracefully degradate, or if you'd like to accomodate for ie6, you could use;

<script src="/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
        $('li').hover(function(){
               $(this).addClass('over');
        }, function() {
               $(this).removeClass('over');
        });
});
</script>

And then use;

li a img, li:hover a img, li.over a img { border: 1px solid red; }
li h5 a, li:hover h5 a, li.over h5 a { color: red; }
li p a, li:hover p a, li.over p a { color: red; }

Quick answer is you are not supposed to wrap block elements inside of inline elements. If you are worried about SEO then you could use a combination of the "strong" tag and the "title" attribute to help w/ SEO. Using an H5 (although a header) is not going to give you a big boost in terms of SEO. In terms of SEO it is recommended to use H1-H3. If you still insist on using those block elements then I would suggest using something like Tony suggested, using a jQuery plugin.

If validation isn't a complete necessity, I'd suggest writing code which works, not code which passes a validation test. If you can get it to work in your target browsers without it validating - go for it.