El Atributo TARGET

El atributo target en HTML se utiliza para especificar dónde se abrirá un recurso vinculado, ya sea un enlace o el resultado de un formulario.

El atributo target en HTML se utiliza para especificar dónde se abrirá un recurso vinculado (como un enlace o el resultado de un formulario). Es fundamental para controlar la navegación del usuario, especialmente en casos como enlaces externos o aplicaciones con estructuras complejas. Aquí te explicamos cómo usarlo correctamente.

1. ¿Qué es el Atributo target?

  • Propósito: Definir el contexto de apertura de un recurso al hacer clic en un enlace (<a>) o enviar un formulario (<form>).

  • Elementos compatibles:

    • <a> (enlaces).

    • <form> (formularios).

    • <area> (mapas de imágenes).

2. Valores del Atributo target

Valor Descripción
_self Abre el recurso en la misma pestaña/ventana (valor predeterminado).
_blank Abre el recurso en una nueva pestaña o ventana.
_parent Abre el recurso en el marco padre (útil en estructuras con frames obsoletos).
_top Abre el recurso en toda la ventana, ignorando marcos anidados.
nombre Abre el recurso en un marco o ventana con el nombre especificado.

3. Ejemplos Prácticos

3.1. target="_self" (Valor Predeterminado)

html
Copy
<a href="https://ejemplo.com" target="_self">Abrir en la misma pestaña</a>
 
Run HTML

Resultado: El enlace se carga en la pestaña actual.

3.2. target="_blank" (Abrir en Nueva Pestaña)

html
Copy
<a 
  href="https://ejemplo.com" 
  target="_blank"
  rel="noopener noreferrer" <!-- Mejora seguridad -->
>
  Abrir en nueva pestaña
</a>
 
Run HTML

Notas:

  • Siempre incluye rel="noopener noreferrer" para evitar vulnerabilidades de seguridad (tabnabbing).

  • Los navegadores modernos abren el enlace en una nueva pestaña, pero algunos usuarios pueden configurarlo para abrir en una ventana nueva.

3.3. target="_parent" y target="_top" (Marcos)

Estos valores son relevantes en estructuras con marcos (<frameset>), aunque actualmente son poco usados (en su lugar, se emplean <iframe>).

Ejemplo con iframe:

html
Copy
<!-- Supongamos que hay un iframe en la página -->
<iframe name="miFrame" src="inicio.html"></iframe>

<!-- Enlace que carga contenido en el iframe -->
<a href="contacto.html" target="miFrame">Cargar contacto en el iframe</a>
 
Run HTML

3.4. target="nombrePersonalizado"

Abre el recurso en una ventana o marco con el nombre especificado. Si no existe, se abre en una nueva pestaña.

html
Copy
<a href="https://ejemplo.com" target="ventanaEjemplo">Abrir en "ventanaEjemplo"</a>
 
Run HTML

Comportamiento:

  • Si ya hay una pestaña/ventana con name="ventanaEjemplo", el enlace se carga allí.

  • Si no existe, se abre una nueva pestaña y se le asigna el nombre.

4. Uso en Formularios

El atributo target también puede aplicarse a formularios para definir dónde se mostrará la respuesta del servidor:

html
Copy
<form action="/procesar" method="post" target="_blank">
  <input type="text" name="dato">
  <button type="submit">Enviar</button>
</form>
 
Run HTML

Resultado: La respuesta del formulario se abrirá en una nueva pestaña.

5. Buenas Prácticas

  1. Usa _blank con moderación:
    Abrir muchas pestañas puede molestar al usuario. Recomendado para enlaces externos.

  2. Evita _parent y _top:
    Las estructuras con marcos (<frameset>) están obsoletas en HTML5. Prefiere <iframe> si es necesario.

  3. Nombra ventanas con cuidado:
    Si usas target="nombre", asegúrate de que el nombre sea único y descriptivo.

  4. Accesibilidad:
    Informa al usuario si un enlace se abre en una nueva pestaña (ej.: añade un ícono ???? o un texto).

6. Ejemplo Integrado

html
Copy
<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo de target</title>
  <style>
    .warning { color: red; }
  </style>
</head>
<body>
  <!-- Enlace interno -->
  <a href="/contacto" target="_self">Contacto (misma pestaña)</a>

  <!-- Enlace externo seguro -->
  <a 
    href="https://sitio-externo.com" 
    target="_blank"
    rel="noopener noreferrer"
  >
    Sitio externo <span class="warning">(se abre en nueva pestaña)</span>
  </a>

  <!-- Formulario con respuesta en nueva pestaña -->
  <form action="/submit" target="_blank">
    <input type="email" placeholder="Correo" required>
    <button type="submit">Suscribirse</button>
  </form>
</body>
</html>
 
Run HTML

7. Errores Comunes

  • Olvidar rel="noopener noreferrer":
    Sin esto, la nueva pestaña podría acceder a window.opener, lo que supone un riesgo de seguridad.

  • Usar target="_blank" para enlaces internos:
    Es innecesario y afecta la experiencia del usuario.

  • Nombres de marco ambiguos:
    Usar nombres como target="ventana1" sin una lógica clara.

Conclusión

El atributo target es útil para:

  • Controlar la navegación del usuario en enlaces y formularios.

  • Mejorar la experiencia en casos como enlaces externos o aplicaciones con iframes.

  • ¡Recuerda!

    • Prioriza la seguridad con rel="noopener noreferrer".

    • Usa _blank solo cuando sea necesario.

    • Prueba en diferentes navegadores y dispositivos.

Con este tutorial, podrás implementar una navegación eficiente y segura en tus proyectos web. ????