¿Cómo abrir un hipervínculo en otra ventana o pestaña en HTML?

Existen varios métodos para abrir un hipervínculo en otra ventana o pestaña, como usar JavaScript, jQuery o HTML. Para abrir un hipervínculo en otra pestaña usando HTML, use el atributo de destino y proporcione el valor _blank en la pestaña de anclaje.

Sintaxis: 
 

<a target="target_name" rel="relation_name" href="link">Link Name</a>

Aquí, el atributo rel se usa para describir la relación entre el documento actual y el documento vinculado y el atributo de destino se usa para especificar el enlace de destino.

Ejemplo 1: este ejemplo abre un hipervínculo en una nueva ventana o pestaña. 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Open hyperlink in a
        new tab
    </title>
</head>
 
<body>
     
     
<p>A computer science portal for geeks
        <a target="_blank"
            href="https://www.geeksforgeeks.org/">
            GeeksforGeeks
        </a>
    </p>
 
 
</body>
 
</html>

Producción: 

 

Explicación: Aquí, target=”_blank” se usa para abrir un hipervínculo en una nueva pestaña.

Ejemplo 2: Abrir un hipervínculo en una nueva ventana o pestaña utilizando una medida de seguridad. 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Open hyperlink in a
        new tab
    </title>
</head>
 
<body>
     
     
<p>A computer science portal for geeks
        <a target="_blank" rel="noopener noreferrer"
            href="https://www.geeksforgeeks.org/">
            GeeksforGeeks
        </a>
    </p>
 
 
</body>
 
</html>

Producción: 

 

Explicación: Aquí, rel=”noopener noreferrer” se usa como medida de seguridad.

Ejemplo 3: Abriendo un hipervínculo de imagen en una nueva pestaña. 

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Open hyperlink in a
        new tab
    </title>
</head>
 
<body>
     
     
<p>
          A computer science portal for geeks
    </p>
 
   
      <a target="_blank" rel="noopener noreferrer"
       href="https://www.geeksforgeeks.org/">
                 
          <img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png"
             alt="" class="aligncenter" />
      </a>
 
</body>
 
</html>

Producción:

 

HTML es la base de las páginas web y se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .

JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .

Publicación traducida automáticamente

Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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