Issues with nesting elements in <a>

Question

Hi all,

So the quick background is that I have a page listing a set of results and for each I display a thumbnail (image tag), short description (paragraph tag) and title (header tag). The result item links to it's brochure.

I want each result (about 100px in height and full width) to be a single link rather than have the image and title being seperate links. This is for both design reasons and SEO (to have 1 link rather than two for a given result with help control internal linking and the number of links on the given page etc.)

The issue is that html4 and xhtml don't allow nesting of headers or paragraphs in links.

I have managed this before by using spans for the header and p but this time I need the header in the result item.

What I'd like to know is if anyone has a way around this and if not what are the issues with not meeting the standards in this scenario?

Thanks Denis

Edit: Aplogies if this wasn't clear, hopefully it is now.

Answer 1

All items: span, a, img header, conforms xhtml! You must write closing '/' for tags without inners. for example:

<img src="..." /> <!-- closing image -->

Using a:

<a href="..."><img src="..."/></a>

Answer 2

Short: No.

Links are inline elements (they flow like words unlike block elements which get their own line). The HTML standard says: Inline elements can't contain block elements.

This makes sense. Think of this example: word1 BLOCK word2. How should the browser layout the BLOCK? When it encounters the element, it's trying to wrap words into as little vertical space as possible. Should it break out of the word wrap and then return later? Or treat BLOCK as a word (breaking the contract that block elements get 100% width by default)?

That said, most browser will still display this more or less correctly. But you can't depend on it.