Cómo abrir un enlace HTML en una nueva pestaña

En muchas ocasiones, es muy útil que cuando el usuario hace clic en un enlace del sitio, la página web a la que apunta se abra en una nueva pestaña, de forma que la web de origen permanece abierta. Si quieres lograrlo, en este artículo te explico cómo debes programar en HTML para abrir un enlace en una nueva pestaña.

Código HTML para abrir un link en una nueva pestaña

Para los que deseen obtener una respuesta rápida, aquí tienen un ejemplo de código HTML para abrir un enlace en una nueva pestaña:

<a href="https://htmlmasters.tech" target="_blank">HtmlMasters</a>

Diseccionando el código anterior, nos encontramos con lo siguiente:

• Etiqueta <a>: es la etiqueta HTML encargada de definir enlaces en una página web. La etiqueta de apertura contiene siempre el atributo href y, opcionalmente, el atributo target que se explican a continuación.
• Atributo href: su valor define la URL a la que dirige el enlace.

• Atributo target: define dónde se va a mostrar la URL establecida en el atributo href. Para abrir un enlace HTML en una nueva pestaña, hay que definir el valor _blank en el atributo target.
• Anchor text: es el texto que se muestra en pantalla del usuario y que contiene el enlace. En este caso, el anchor text es HtmlMasters.

Abrir un enlace HTML en otra pestaña usando JavaScript

Aunque la forma más sencilla de abrir un link en una nueva pestaña es empleando el atributo target con el valor _blank, en ocasiones no podrás modificar el código HTML de una determinada web.

La razón de ello es que, frecuentemente, el código HTML de una web no ha sido programado directamente en HTML, sino que ha sido creado a través de PHP.

Habitualmente, se dice que este tipo de código ha sido creado dinámicamente. En estos casos, es posible que no puedas acceder al código de un enlace para añadirle un atributo target. Es por ello que, a continuación, te muestro un pequeño script que permite abrir un enlace HTML en otra pestaña usando JavaScript.

<a id="miEnlace" href="#">HtmlMasters</a>
<script>
     const enlace = document.getElementById("miEnlace");
     enlace.href="#";
     enlace.addEventListener('click', function(){
        window.open('https://htmlmasters.tech','_blank');
     });
</script>        

En este artículo no voy a desgranar todos los puntos del código anterior, ya que se trata de aspectos sobre JavaScript un poco más avanzados. Lo que tienes que tener en cuenta para aplicar el código anterior a tus proyectos es lo siguiente:

• La función document.getElementById sirve para señalar un elemento concreto del documento HTML. Deberás sustituir «miEnlace» por el ID que tenga tu link. Si no tiene ID, deberás usar otras funciones.
• Debes sustituir ‘https://htmlmasters.tech’ por la URL que quieres que abra el enlace en una nueva pestaña.

¿Se puede abrir un enlace HTML en una nueva ventana?

Muchas personas confunden los términos pestañas y ventanas de un navegador. La diferencia es que las pestañas se agrupan dentro de una ventana del navegador, siendo posible que una ventana esté compuesta de entré una y múltiples pestañas.

Los ejemplos anteriores se centran en abrir enlaces HTML en nuevas pestañas, pero existe la posibilidad de definir un enlace HTML que se abra en una nueva ventana?

No es posible realizar esta acción empleando HTML, pero sí se puede simular esta funcionalidad creando un popup mediante JavaScript. Con el siguiente código, similar al explicado en el punto anterior, podrás conseguir abrir un enlace HTML en una nueva ventana:

<a id="miEnlace" href="https://htmlmasters.tech">HtmlMasters</a>
<script>
   const enlace = document.getElementById("miEnlace");
   enlace.href="#";
   enlace.addEventListener('click', function(){
       enlace.href="#";
       window.open('https://htmlmasters.tech','popup', 'width=2000,height=1000');
   });
</script>

Conclusión

Como ves, definir un enlace HTML que se abra en una nueva ventana es sencillo en un principio, basta con crear el atributo target con el valor _blank. En caso de que no tengas acceso al código HTML para añadir el atributo, se puede hacer mediante JavaScript.

Por otro lado, si necesitas que el enlace se abra en una nueva ventana, puedes simular esa funcionalidad empleando el script que te ha mostrado en el punto anterior.

Espero que este artículo te haya sido de ayuda.

Si tienes cualquier duda, házmelo saber en los comentarios.

¡Hasta la próxima!