Abrir en pestaña nueva, contacto y buen texto

Ya sabés crear enlaces a páginas externas, a páginas del mismo sitio y a secciones internas. Esta lección agrega tres refinamientos: controlar en qué pestaña se abre el enlace, usar href con protocolos especiales (mailto:, tel:), y reforzar la pauta de buen texto de enlace con ejemplos concretos.

`target="_blank"` — abrir en pestaña nueva

Por defecto, un enlace abre en la misma pestaña. El atributo target controla dónde se abre el destino.

target="_blank" abre el enlace en una pestaña nueva:

<!-- Abre example.com en una pestaña nueva -->
<a href="https://www.example.com" target="_blank">Visitar Example</a>

¿Cuándo usarlo? Solo para enlaces externos cuando el contexto lo justifica — el usuario está leyendo algo en la página actual y no debe perder su lugar. No se abusa: abrir en pestaña nueva sin contexto resulta confuso, especialmente para lectores de pantalla.

`rel="noopener noreferrer"` — la protección necesaria

Cuando un enlace abre en pestaña nueva, por defecto (en navegadores más viejos) la nueva pestaña puede acceder a la pestaña original a través de la propiedad window.opener. Una página externa maliciosa podría usar eso para redirigir la pestaña original a otro sitio — un ataque conocido como reverse tabnapping.

La solución es agregar rel="noopener noreferrer" siempre que uses target="_blank":

<!-- ✅ BIEN: enlace externo seguro -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Visitar Example (abre en nueva pestaña)
</a>

noopener — corta el acceso de la nueva pestaña a window.opener.
noreferrer — además de noopener, evita que el navegador envíe la URL de tu página como encabezado Referer al sitio externo.

¿No lo hace ya el navegador por defecto? Los navegadores modernos (Chrome 88+, Firefox 79+, Safari 12.1+) aplican noopener implícitamente con target="_blank". Pero escribirlo explícitamente sigue siendo buena práctica porque:

noreferrer aporta privacidad adicional (no está en el default implícito).
La intención queda visible para cualquiera que lea el código.
Es un hábito defensivo para entornos donde el navegador puede ser más viejo.

Orden exacto: escribí siempre rel="noopener noreferrer" (noopener primero). El check de esta lección verifica el valor carácter por carácter — rel="noreferrer noopener" falla.

<!-- ❌ MAL: sin rel, deja abierta la vulnerabilidad de window.opener -->
<a href="https://www.example.com" target="_blank">Example</a>

<!-- ✅ BIEN: target + rel juntos, siempre -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Example (nueva pestaña)
</a>

`mailto:` y `tel:` — otros tipos de destino

El atributo href no solo acepta URLs de páginas web — también acepta otros protocolos.

mailto: — abrir el cliente de correo:

<!-- Al clicar, abre el cliente de correo con este destinatario cargado -->
<a href="mailto:info@ejemplo.com">Enviarnos un mensaje</a>

El navegador abre la aplicación de correo del sistema (Gmail, Outlook, la app de Mail del móvil) con el destinatario ya cargado. Si el usuario no tiene ningún cliente configurado, el link no hace nada visible — aunque el href sea correcto.

<!-- ❌ MAL: espacio en el email dentro del href -->
<a href="mailto: info@ejemplo.com">Contacto</a>

<!-- ✅ BIEN: sin espacios, sin decoración en el href -->
<a href="mailto:info@ejemplo.com">Enviarnos un mensaje</a>

tel: — iniciar una llamada:

<!-- En móviles: abre el marcador. En desktop: depende del sistema -->
<a href="tel:+541100000000">Llamarnos: +54 11 0000-0000</a>

El número en tel: va sin espacios ni guiones — los separadores visuales van solo en el texto del enlace, no en el href:

<!-- ❌ MAL: guiones en el href pueden causar problemas -->
<a href="tel:+54-11-0000-0000">Llamar</a>

<!-- ✅ BIEN: href limpio, texto con formato visual -->
<a href="tel:+541100000000">+54 11 0000-0000</a>

En el sandbox ninguno de estos protocolos abre una aplicación real — el iframe está aislado. El check valida que el href tenga el valor correcto para que funcione en un navegador real.

Buen texto de enlace — la pauta completa

Ya lo viste en las lecciones anteriores; acá lo consolidamos con los patrones de esta lección:

<!-- ❌ MAL: "click aquí" no describe el destino fuera de contexto -->
<p>Para contactarnos, <a href="mailto:info@ejemplo.com">click aquí</a>.</p>

<!-- ❌ MAL: "ver más" no describe nada -->
<a href="https://www.example.com">Ver más</a>

<!-- ✅ BIEN: el texto describe la acción y el destino -->
<a href="mailto:info@ejemplo.com">Enviarnos un mensaje de contacto</a>

<!-- ✅ BIEN: incluye el contexto de "nueva pestaña" cuando corresponde -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
  Visitar Example (nueva pestaña)
</a>

<!-- ✅ BIEN: el número en el texto tiene formato visual legible -->
<a href="tel:+541100000000">Llamarnos al +54 11 0000-0000</a>

La regla: el texto del enlace, leído solo sin el párrafo que lo rodea, debe responder a ¿adónde llevo? o ¿qué hago?

Los mailto: y tel: merecen especial atención: como dependen del dispositivo del usuario (cliente de correo configurado, app de llamadas), el texto debe dejar claro qué va a ocurrir al clicar.

Adelanto: cuando aprendas <img> en CAT-07, vas a poder envolver una imagen dentro de un <a> para hacer que la imagen sea el enlace: <a href="..."><img src="..." alt="..."></a>. El <a> ya lo tenés dominado; solo suma el elemento de imagen.

Tu turno: el starter tiene los dos bloques de comentarios como guía. Creá exactamente 2 enlaces con los atributos y textos exactos indicados. Recordá que rel="noopener noreferrer" va en ese orden. Luego hacé clic en “Comprobar”.