<h1> and <p> inside <a> in HTML 4.01 Strict

how to make a banner-style link validate?

[wizpl]

I try to get a banner-style link, containing both a picture and the whole text area. Alas it does not validate even if I css the <a> as a block element.
OTOH if I copy a link inside the <img> <h1> and <p> tags, it validates, but the clickable area is not solid anymore, there are gaps, not one solid banner.

<div class="blocknews">
<hr>
<a href="/podcast">
<img src="podcaster.jpg" alt="Podcasting logo" width="100" height="113">
<h1>a header</h1>
<p>some description...</p>
</a>
</div>

Thanks for help.

[KenB]

The <A> tag must ALWAYS go inside of <P><Hx><DIV> and other block level tags, not outside. To do what you want you need to use multiple <A> tags inside of each of the block level tags you want to link. For instance:

<div class="blocknews">
<hr>
<a href="/podcast">
<img src="podcaster.jpg" alt="Podcasting logo" width="100" height="113"></a>
<h1><a href="/podcast">a header</a></h1>
<p><a href="/podcast">some description...</a></p>
</div> 

This is the only way it will validate.

[kaled]

On the other hand, you can use <span> and <br> within <a></a> so that you can achieve the visual effect you desire. However, if you wish to use <h1> for SEO purposes then this of no help to you.

Kaled.

[penders]

What about using the

onclick

and

onmouseover

events to simulate a link. Instead of your <a href...

<div class="blocknews" onclick="location.href='/podcast';" onmouseover="this.style.cursor='pointer';">

Should look how you want and should validate(?), but maybe not as search engine friendly or as accessible - but for a banner does it need to be?

[KenB]

What about using the onclick and onmouseover events to simulate a link.

This would make the ad completely dependant on JavaScript making inaccessible to anyone who did not or could not support JavaScript. Furthermore this would lose any backlink value for the ad.

[penders]

Yeah, valid point on the JavaScript/accessibility issue... but if adding the links around the different parts of the banner is causing... "the clickable area is not solid anymore", then maybe a combination of both JS and links? Seems a bit overkill, but hey?

[DrDoc]

<div class="blocknews">
<hr>
<a href="/podcast" style="display: block;">
<img src="podcaster.jpg" alt="Podcasting logo" width="100" height="113"><br>
<span style="font-size: 2em; padding: .5em 0;">a header</span><br>
some description...
</a>
</div>

[wizpl]

yeah, this one's probably the cleanest solution. I only need to decide if I want to get rid of <h1> tag, for sake of structural accessibility.