[whatwg] href on any element

[Matthew Raymond]

Kornel Lesinski wrote:
> On Tue, 29 Aug 2006 17:02:22 +0100, Francisco Monteiro  
> Having data table representing list of items where large clickable area is  
> useful - i.e. inbox in a webmail, list of contacts, forum threads listing,  
> etc.
> 
> I've ran into this problem many times and seen many questions about this  
> on forums/usenet.
> 
> My current solution is:
> <tr onclick="this.getElementsByTagName('a')[0].click()">

   This can be accomplished by having <a> elements in each individual
cell...

| <tr>
|   <td><a href="[...]">Content for Cell 1</a></td>
|   <td><a href="[...]">Content for Cell 2</a></td>
|   <td><a href="[...]">Content for Cell 3</a></td>
| </tr>

   ...where you just style the <a> element to be a block that takes up
the entire cell. It's not as convenient for hand-coded pages, but I
don't see a lot of use cases where you would need this for hand-coded
pages anyways.

   Now, it does make cell borders and padding a bit sticky, which is
something to consider, but that can be largely circumvented by some
clever styling. Furthermore, it represents only a small amount of the
click area that's unlikely to be clicked in the first place.

> Another situation where I wanted href on any element was advertisement:
> 
> <div href="/buy">
> <p>My product is:</p>
> <ul>
> <li>Cool</li>
> <li>Great</li>
> <li>And soo semantic</li>
> </ul>
> </div>

   People don't typically don't initiate a purchase in a user interface
by clicking on the product description. For instance, they may simply be
clicking on the individual list items as they're reading them. (In fact,
this was an argument used against supporting label focus passing for all
types of <input> elements.) Simply put, what you're suggesting above is
bad UI design.