Actualización de noviembre de 2020: Creo que la mejor técnica posible para esto es el Método 4 de este artículo. El <div> (o cualquier elemento de envoltura) permanece semántico y accesible, mientras se puede hacer clic en toda el área. No interrumpe la selección de texto y respeta otros elementos interactivos “anidados”.
El <div> El elemento es un elemento genérico sin semántica. Los usamos todo el tiempo en CSS porque nos dan un gancho de estilo sin impartir ningún otro significado. Te brindan todo tipo de fantásticas capacidades de posicionamiento y estructuran tu HTML. Puede poner enlaces dentro de un <div>, por supuesto, pero a veces solo desea que se pueda hacer clic en todo el div como un enlace. No hay problema, así es como se hace:
<div onclick="location.href="https://css-tricks.com/creating-clickable-divs/YOUR-URL-HERE";" style="cursor: pointer;"></div>El parámetro de estilo del cursor cambia el cursor al cursor de puntero predeterminado cuando un visitante pasa el mouse sobre el DIV, lo cual es una buena indicación visual de su capacidad de hacer clic.
Actualización 12 de mayo de 2011
Ver mejor actualización arriba
JavaScript en línea es mucho menos genial que en 2007 (si alguna vez lo fue). Es mucho más semántico y accesible adjuntar funcionalidad a través de controladores de eventos que aplicamos en JavaScript separado. Si usamos jQuery, podríamos hacer algo como:
<div>
<h3>A bunch of</h3>
<a href="http://google.com">stuff in here</a>
</div>$(document).delegate("div", "click", function() {
window.location = $(this).find("a").attr("href");
});