Semantically correct nested anchors
- by Blackie123
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"?
