I know that this isn't allowed:
<li>
<a href="somelink">
<h3>Article title</h3>
<p>Article snippet...</p>
<img src="/news/thumb.jpg" alt="">
</a>
</li>
Yet, browsers support it, and it is being made allowed, according to
HTML5 drafts.
However, it doesn't quite work in the sense of making the entire <li>
element clickable. If that element is wider than the image, clicking on
the right hand side of the image has no effect. The reason is that the
<li> element is not contained in the <a> element. If the <li> element
(which by default occupies 100% of the the available width minus perhaps
left margin) is wider than the image (which by default has its inherent
width), then clicking on the right of the image has no effect. it is the
<li> element's area. The way to overcome this is to introduce an
intermediary element that has 100% width:
<li><a href="somelink"><div><h3> ... </div></a></li>
The main practical problem with this is: how do you convey the idea of a
single link to the user? That is, the idea that there is a link in the
first place and that the heading, the text, and the image are all one
link, pointing to one resource. By default, browsers render the text in
the heading and in the paragraph as underlined and in link color and
(depending on browser) a colored border around the image. This conveys
the link idea, but the elements look like separate links, and there's no
quick way to see that they all point to the same resource.
This problem of course exists independently of the techniques you use,
though the implementation of solutions varies by technique to some
extent. Here's one idea of a solution: remove the underlining (but keep
the link color), remove the image border, but draw a border with link
colors (by state of link) around the entire <li> element, making it look
like a unit. This takes some CSS code and isn't quite trivial when done
right, but surely doable.
Nonetheless I've seen this quite a lot, although I don't know if the
authors were deliberately breaking the rules or just doing it out of
ignorance.
Probably they mostly just don't care about the formal syntax.
Still, it seems to me you can understand why people are doing this
because what are the alternatives? Use Javascript?
Using Javascript is one way, and relatively easy. People often implement
things like this all wrong, making the functionality depend on
Javascript, instead of e.g. making just the heading text a link (<h3><a
href="...">...</a></h3>) and assigning an onclick event handler to the
<li> element so that when Javascript is enabled, the entire element
effectively acts as a link.
An alternative is to use just text-level elements inside the <a>
element, e.g.
<a href="somelink"><span class="h3">Article title</span><br>
<span class="p">Article snippet...</span><br>
<img src="/news/thumb.jpg" alt=""></a>
It's poor markup, but it is formally correct, and you can style the
parts as desired. Search engines won't treat the article title as a
heading, but it is not really known outside their houses how much they
do that to said:
Or how about adding
the link to everything in the li:
To text pieces there, you mean. That would make the markup valid, but
it's a very bad idea for several reasons. Accessibility and usability
guidelines say that there should not be two links with different link
texts pointing to the same resource. Separate links would make it even
more difficult to see that they point to the same resource. Keyboard
navigation would become awkward. And so on.
What do you guys think is the
best approach to this sort of thing?
I think the first question should be whether the idea of making the
entire <li> element a link is a good one. It's surely better than making
the heading, the text, and the image separate links to the same resource
(which is not uncommon), but isn't it simpler to make e.g. just the
heading text a link?
There's a point, though, behind the idea. Normally, if a user becomes
interested either due the heading or the image, he often reads the text
too and then decides he's really interested. It would be natural to
click on some point near the place where his eyes were focused on -
whether it was the heading, the text, or the image.
(There's also a design that does not make the heading, the text, or the
image a link but have a separate link after the text, with link text
like "Read more". That's problematic for several reasons, including the
problem that the page then contains several links with the same link
text "Read more" pointing to different resources, and link texts like
that cannot do good when it comes to search engines.)
