Articles

¡Cómo usar el para hacer enlaces y abrirlos donde quieras!

Posted on

Frames obsoletos; usa sólo _blank

El único valor actualmente relevante de target es _blank. Los demás valores de target se utilizaban para especificar marcos concretos. Sin embargo, los marcos han quedado obsoletos en HTML5.

Destino por defecto

Si no se especifica ningún target, el enlace se abrirá en el contexto actual, a menos que el usuario o el navegador especifiquen lo contrario.

a target=»_blank» Open in New Browser Tab (or Window)

El atributo target especifica dónde se abrirá el documento enlazado cuando se haga clic en el enlace. El valor predeterminado es la ventana actual. Si target="_blank", el documento enlazado se abrirá en una nueva pestaña o (en los navegadores más antiguos) en una nueva ventana.

¿Por qué se abre en un nuevo navegador?

La razón más común para utilizar `target=»_blank» es para que los enlaces externos se abran en una pestaña aparte. Esto permite a un usuario hacer clic en una referencia y volver a ella más tarde sin salir de la página actual. Mantiene a los visitantes en tu sitio durante más tiempo y mejora la mayoría de tus métricas: tasa de rebote, conversión, páginas visitadas.

Abre todos los enlaces externos en una nueva pestaña con JavaScript

No necesitas añadir manualmente target="_blank" a cada enlace de tu sitio. Si enlazas mucho hacia fuera (lo que deberías hacer), es fácil añadir algo de código JavaScript a tu sitio y convertir todos los enlaces externos en enlaces _blank automáticamente.


jQuery(document.links) .filter(function() { return this.hostname != window.location.hostname; }) .attr('target', '_blank');

(Puedes ver una forma ligeramente modificada de este código en acción en cada página de este sitio web). Este truco requiere jQuery, pero es muy probable que ya lo estés usando. Se utiliza en los frameworks y sistemas de gestión de contenidos más populares, incluyendo WordPress, Drupal y Twitter Bootstrap. Si necesitas hacerlo sin jQuery, también se puede hacer. Aquí tienes una versión «plain JavaScript»:

function externalLinks() { for(var c = document.getElementsByTagName("a"), a = 0;a < c.length;a++) { var b = c; b.getAttribute("href") && b.hostname !== location.hostname && (b.target = "_blank") } } ; externalLinks(); 

Además de facilitarlo, esto limpia tu marcado considerablemente.

Razones para no usar `target=»_blank»

Algunas personas argumentan que los usuarios no prefieren abrir los enlaces en un nuevo contexto de navegación. Piensan que hacerlo es similar a los anuncios emergentes y otros comportamientos molestos. Con el auge de la navegación por pestañas, este argumento ha desaparecido en gran medida. La mayoría de los usuarios prefieren abrir los enlaces en una nueva pestaña, porque les permite venir a la cola de los enlaces referenciados para leerlos más tarde sin perder su contexto de navegación actual.

Valores del Atributo de destino

Nombre del valor Notas
_blank Abre el documento enlazado en una nueva pestaña o ventana.
_parent Abre el enlace en el marco padre. Los marcos están obsoletos en HTML5.
_self Abre el enlace en el marco actual.
_top Abre el enlace en el marco superior. Los marcos están obsoletos en HTML5.
nombre del marco Abre el enlace en el marco nombrado. Los marcos están obsoletos en HTML5.
Todos los atributos del elemento ancla

Nombre del atributo Valores Notas
hreflang Especifica el idioma del recurso enlazado.
descargar Indica al navegador que descargue el recurso enlazado en lugar de abrirlo.
destino Blanco
Padre
Auto
Nombre del marco
Especifica el contexto en el que se abrirá el recurso enlazado.
título texto Define el título de un enlace, que aparece al usuario como tooltip.
href url Especifica el documento, recurso o ubicación enlazado.
Nombre
Adam es un escritor técnico especializado en documentación y tutoriales para desarrolladores.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *