XHTML Strict alternative to putting block elements inside an anchor

Question

I'm trying to make a couple of DIVs clickable in its entirety. I tried this...

<div id="features" class="threeSplit">
    <div id="box1">
        <a href="javascript:;">
            <h3>Watch TV anywhere</h3>
            <p>While you're out of town, you can still watch live television.</p>
        </a>
    </div>
    <div id="box2">
        <a href="install">
            <h3>No subscription</h3>
            <p>Save your money. VRT and RTBF channels are available at no cost.</p>
        </a>
    </div>
    <div id="box3">
        <a href="coverage">
            <h3>Picking up channels</h3>
            <p>Television channels can be picked up from antennas near you.</p>
        </a>
    </div>
</div>

Click here for live version. Now, XHTML 1.0 Strict does not like that I put block elements inside an anchor tag. Is there a better way that does comply with XHTML Strict? I know the page still contains lots of validation errors, but this is only a quick 'n dirty mockup.

Answer 1

You could use an onclick event within the div elements...

<div id="box2" onclick='window.location = "install"'>
    <h3>No subscription</h3>
    <p>Save your money. VRT and RTBF channels are available at no cost.</p>
</div>

Answer 2

You could either

• Put span tags inside of your a tags, instead of h3 and p, and style them accordingly
• Use javascript to catch the click and follow the link, doing away with the a tag

The last option, I would say, is more elegant.