Es cierto que con HTML5 se ha ido avanzando y solucionado algunos de los problemas que se han presentando en el diseño web. El paso hacia la validación de formularios es un claro ejemplo de ese avance, sin embargo el supuesto avance en cuanto a los llamados enlaces de bloque (block-level links) no lo es tanto.

Hasta la implantación de HTML5 no era posible enlazar elementos de bloque, siendo un enlace un elemento en línea, únicamente era posible enlazar otro elemento en línea. Con HTML5 esto cambia, y ahora es posible enlazar por ejemplo, un div, algo muy práctico para conseguir que una región de una web sea enteramente clickable. El problema es que no todo lo que reluce es oro y hay pequeñas lagunas e inconvenientes que aconsejan no realizar este tipo de prácticas.

Empecé a jugar con la posibilidad de enlazar un div, que HTML5 ahora permite, cuando me dio por retocar el aspecto del blog, sobre todo en su index, e intenté hacer que cada resumen que aparece en la página principal fuese enteramente clickable. El resultado, un fracaso mayúsculo.

Al principio no entendí muy bien que estaba ocurriendo, hasta que rebuscando por la red (no hay nada que no se pueda encontrar) di con el problema. En HTML hay una regla fundamental que no se debe romper, los enlaces no se pueden anidar. Ese era el gran problema, como mis resúmenes contenían enlaces, al enlazar el resumen completo se producía un error en el HTML (cierto que podría haberlo obviado) y algo aún más importante, el enlace se cerraba antes de lo esperado, justamente cuando se encontraba con el primer enlace del resumen.

Podría haber pensado en retocar los resúmenes para que no tuviesen ningún tipo de enlace, y evidentemente hubiese funcionado. Sin embargo, me pareció demasiado restrictivo. En la mayoría de los CMS el resumen se genera a partir de un número x de caracteres del post o en caso de blogger (como es mi caso) a partir de donde se haya colocado "el salto". ¿Por qué ceñirme a escribir de una forma tan concreta?. Es más, lo normal es que un resumen lleve alguna imagen para ilustrarlo, y en múltiples ocasiones esta también va enlazada hacia una versión mas pesada de esa misma imagen, con lo cual el problema persiste.

Además de todo esto, hay un problema más, y es que Google aconseja no usar los enlaces de bloque, ya que a fin de cuentas el texto de anclaje del enlace es el que determina el significado del propio enlace. Es un texto descriptivo que nos dice de que va el enlace y lo que podemos encontrarnos si hacemos click, además que los buscadores lo tienen muy en cuenta (de ahí el consejo de Google) y por lo general este debe ser un texto corto y descriptivo. Por contra si enlazamos un resumen de un post, el número de palabras que llevará ese texto puede ser de unas 150 palabras (un resumen nada extenso), cosa que hace muy difícil a un buscador determinar la naturaleza del enlace, demasiada información nunca es buena.

Así que como yo seguía emperrado en conseguir que mis resúmenes fuesen áreas enteramente clickables cuando me pica el niki no hay quien me pare), no tuve más remedio que recurrir a una solución CSS. Al final no fue tan complicado: una posición absoluta, ajustar el enlace al tamaño del div y poco más. El código, el que sigue:

<div id="resumen">
  <a href="#" id="enlace"></a>
  <img src="#" alt="una imagen">
  <p>texto</p>
  <p>más texto</p>
</div>

#resumen {
  position: relative;
}

#enlace {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

Como puedes ver sólo hay una condición indispensable, y es que la región que queremos que sea clickable debe contener el enlace, que puede tener o no texto de anclaje, en este caso no se lo he puesto. El resto consiste en ajustar el enlace al tamaño de su contenedor. Para ello posicionamos el contenedor (la región clickable) de forma relativa y el enlace de forma absoluta, así conseguimos que el enlace se salga del flujo pero quede posicionado dentro del contenedor. Luego lo posicionamos y le damos el tamaño de su contenedor, height y width al 100%. Por último le damos un z-index para asegurarnos que esté por encima del resto de elementos. Con esto ya tenemos nuestra región 100% clickable.