[whatwg] Proposal for a link attribute to replace <a href>

[Kristof Zelechovski]

The anchor customarily encompasses just the key phrase, not the whole text.
The problem here is that the advertisements are not cooperative; they
aggressively try to get in the reader's way.  In your example, it would be
more consistent to wrap the header text only.
As an alternative, you can put a clickable empty transparency over the
teaser.  Is that what you meant by CSS tricks?
Chris

-----Original Message-----
From: whatwg-bounces at lists.whatwg.org
[mailto:whatwg-bounces at lists.whatwg.org] On Behalf Of Frank Hellenkamp
Sent: Thursday, May 29, 2008 10:23 AM
To: whatwg at whatwg.org
Subject: Re: [whatwg] Proposal for a link attribute to replace <a href>

> I agree that this is an unconvincing example, but consider instead 
> banner ads that are created from a bunch of HTML markup rather than a 
> single image; they generally want the entire banner rectangle to be 
> "clickable" but make use of tables and all sorts of other strange things.

I also think, that the banner is not a convincing example.

But I step over different kinds of teaser (news- and article-teasers)
during my work, that are made out of images, text and headlines.

Now, you have to do this (without javascript):

<div class="teaser">
	<a href="link.html"><img src="image.png"></a>
	<h3><a href="link.html">newsteaser</a></h3>
	<p><a href="link.html">Text</a></p>
	<p><a href="link.html">Text</a></p>
</div>

If you are good, you also set the a-elements to "display: block" so that
the whole area is clickable, not only the text.

It would be *much* more simple/useful to have something like this:

<div class="teaser" href="link.html">
	<img src="image.png">
	<h3>newsteaser</h3>
	<p>Text</p>
	<p>Text</p>
</div>

Or this:

<a href="link.html">
	<div class="teaser">
		<img src="image.png">
		<h3>newsteaser</h3>
		<p>Text</p>
		<p>Text</p>
	</div>
</a>

By the way:
It would be more accessible with the mouse in this case, because the
clicking-area is much bigger (without css-tricks).


best regards

frank