I am working on a web applicaton. And what we also create is something that could be described as inline editing. Just to portray thing I am trying to solve I use example of Facebook post.

You have post like.

Steve Jobs added 5 new photos

Steve Jobs is link that redirects to his profile so in HTML, that would be:

<div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p>
</div>

But what I want is the whole post "block" to be clickable although I want only that name to appear to be link. Normally in HTML logic would say to to this:

<a href="stevejobs/" title="#"><div class="post-block">
   <p><a href="stevejobs/" title="#">Steve Jobs</a> added 5 new photos.<p>
</div></a>

But this isn't semantically correct. Quick look to HTML 4.01 or any other standard says something like this:

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

How to create it semantically correct other than using javascript and defining div:hover state for the whole "div anchor"?