HTML target: Guía completa para controlar el destino de los enlaces
El atributo target en HTML es una herramienta esencial para controlar dónde se abrirá un documento vinculado, ya sea en la misma ventana o en una nueva. Se aplica a las etiquetas <a>, <area>, <base> y <form>, brindando una flexibilidad crucial para la navegación y el manejo de la experiencia del usuario. En esta guía exhaustiva, exploraremos en detalle el funcionamiento del atributo target, sus valores posibles y ejemplos prácticos para cada uno de ellos.
El poder de target en HTML
En esencia, target determina el destino de la acción o el enlace. Es decir, especifica dónde se abrirá el contenido al hacer clic en un enlace o al enviar un formulario. Este atributo ofrece un control preciso sobre la navegación, lo que permite a los desarrolladores web crear experiencias más personalizadas y eficientes.
Valores del atributo target
El atributo target acepta varios valores que definen el comportamiento de apertura del enlace:
_blank: Este valor abre el enlace en una nueva ventana o pestaña. Es la opción más común para enlaces que llevan a sitios externos o recursos que no deben interrumpir la navegación actual del usuario.
_self: Este es el valor predeterminado de target y abre el enlace en el mismo marco. Es decir, el contenido se carga en la misma ventana o pestaña donde se encuentra el enlace.
_parent: Este valor abre el enlace en el marco padre. Si el enlace se encuentra dentro de un marco (iframe), el contenido se abrirá en el marco que lo contiene.
_top: Este valor abre el enlace en el cuerpo completo de la ventana. Si el enlace se encuentra dentro de un marco, este valor elimina el marco y carga el contenido en la ventana principal.
framename: Este valor abre el enlace en el marco con el nombre especificado. Para utilizarlo, se debe definir un marco con un nombre específico usando el atributo name en la etiqueta <iframe>.
Ejemplos de uso del atributo target
A continuación, se presentan ejemplos de cómo utilizar target con cada una de las etiquetas mencionadas, mostrando el comportamiento del enlace al ejecutar el código:
Enlaces con <a>
_blank:
html
<a href="https://www.example.com" target="_blank">Ir a Example.com</a>
Este código abre el enlace a https://www.example.com en una nueva ventana o pestaña.
_self:
html
<a href="pagina.html" target="_self">Ir a la página interna</a>
Este código abre el enlace a pagina.html en la misma ventana o pestaña.
_parent:
«`html
Ir a la página interna
«
Este código abre el enlace aen el marcomarco`.
_top:
«`html
Ir a la página interna
«
Este código abre el enlace a
framename:
«`html
Ir a la página interna
«
Este código abre el enlace aen el marcomarco`.
Áreas de imagen con <area>
_blank:
html
<img src="imagen.jpg" alt="Imagen" usemap="#mapa">
<map name="mapa">
<area shape="rect" coords="0,0,100,100" href="enlace.html" target="_blank" alt="Enlace">
</map>
Este código abre el enlace a enlace.html en una nueva ventana o pestaña al hacer clic en el área rectangular de la imagen.
_self:
html
<img src="imagen.jpg" alt="Imagen" usemap="#mapa">
<map name="mapa">
<area shape="rect" coords="0,0,100,100" href="enlace.html" target="_self" alt="Enlace">
</map>
Este código abre el enlace a enlace.html en la misma ventana o pestaña al hacer clic en el área rectangular de la imagen.
_parent:
«`html
«
Este código abre el enlace aen el marcomarco` al hacer clic en el área rectangular de la imagen.
_top:
«`html
«
Este código abre el enlace a
framename:
«`html
«
Este código abre el enlace aen el marcomarco` al hacer clic en el área rectangular de la imagen.
Formularios con <form>
_blank:
«`html
«
Este código envía el formulario a
_self:
«`html
«
Este código envía el formulario a
_parent:
«`html
«
Este código envía el formulario aen el marcomarco`.
_top:
«`html
«
Este código envía el formulario a
framename:
«`html
«
Este código envía el formulario aen el marcomarco`.
Consideraciones para el uso de target
Es importante tener en cuenta que el uso de target puede tener implicaciones para la experiencia del usuario y el comportamiento del navegador. Por ejemplo:
- El uso de
target="_blank"puede generar ventanas emergentes no deseadas si el usuario tiene configurado su navegador para bloquearlas. - El uso de
target="_parent"otarget="_top"puede generar un comportamiento inesperado si el enlace se encuentra dentro de un marco con una estructura compleja. - El uso de
target="framename"requiere un conocimiento preciso de la estructura del marco para evitar errores.
Mejor prácticas para el uso de target
Para garantizar una experiencia de usuario óptima, se recomienda seguir las siguientes mejores prácticas:
- Utilice
target="_blank"solo cuando sea necesario, por ejemplo, para enlaces a sitios externos o recursos que no deben interrumpir la navegación actual. - Evite utilizar
target="_parent"otarget="_top"si no es absolutamente necesario. - Utilice
target="framename"con precaución y asegúrese de que el nombre del marco sea correcto. - Siempre proporcione información clara al usuario sobre dónde se abrirá el enlace, por ejemplo, usando un texto como «Abrir en una nueva ventana».
Conclusiones
El atributo target es una herramienta esencial para controlar el destino de los enlaces y formularios en HTML. Su uso adecuado permite a los desarrolladores web crear experiencias de usuario más personalizadas y eficientes. Es importante tener en cuenta las consideraciones y mejores prácticas para garantizar una experiencia óptima para los usuarios.