…

I didn’t agree with you first, but last paragraph makes sense for me…

As you said, replacing the and tags some semantic meaning is lost. The replaced tags degrade worse and are less accessible (specially strong vs h2), so it should be seriously considered.

If you don’t want to sacrifice the page meaning, use a behavioral specification (yeah, javascript ) to link the whole li and achieve any hover effect through the “:hover”:

<ul>
<li>
<h2><a href=”somehwere”>Some headline</a></h2>
<p>Some text…&lt/p>
</li>
</ul>

Notice the missing . It think it should be specified throught CSS’s background-image property (it has no meaning!).

I have been after something like this for a while and so thanks.

Breaking containment rules is an extremly bad habit, even if in cases like that it can be convenient.

I regulary have to fix some co-workers bugs caused by innapropriate tag nesting. In your example browser aren’t too strict, but try to nest a list inside a paragraph and look at the DOM output : your list is rejected from your tag.
There’s no guaranty that upoming versions of browser won’t do the same thing with your code (as this is the correct behaviour), therefore you shouldn’t do that.

A more correct method would be to write your file like that :

<ul>
<li>
<a href=”#”>
<img src=”someimage.gif” border=”0″ />
<strong>Some Headline</strong>
<span>Some text will go here</span>
</a>
</li>
</ul>


li *{
display: block;
}

It may be less specific from a semantic view, but it’s correct and there’s no risk for it to be broked in the future.

@ Country
Yes you are right it can’t pass validation this way, but it works. If you want it that way, you’ll have to make all elements blok and place <a> inside all of them, but then you won’t have hover effect