Question

I have often wrapped block level elements with <a> tags in order to make the whole group clickable. For example, say I have a list of events:

<ul>
    <li>
        <a href="#" style="display: block;">
            <div style="float: left; display: inline;">12/12/2010</div>
            <div style="float: left; display: inline;">Some event information</div>
        </a>
    </li>
    <!-- etc... -->
</ul>

NOTE: inline styles applied for example only.

This way, the whole thing is clickable rather than only the text within the elements.

Ofcourse, the (x)html validator at validator.w3.org doesn’t like this because I’ve placed a block level element (<div>) insider an inline level element (<a>). Even though, I am using CSS to define the <a> tags as block level, and the <div> tags as inline.

I’ve always coded by the rule of thumb that you should always strive to author valid code; however, if your code doesn’t validate, and you understand why it doesn’t validate, and you have a valid reason for it not validating, then don’t worry about it.

So my question is tri-fold:

1. Is this a valid reason for this not to validate?
2. Is the usability gain (by having a larger clickable area) worth it not validating?
3. Is there a better way?

Answer 1

Using span as below is perfectly valid and you can achieve the same effect.

<a href="#" style="display: block;">
    <span style="float: left;">12/12/2010</span>
    <span style="float: left;">Some event information</span>
</a>