El atributo ‘TARGET’ en HTML es una herramienta poderosa para personalizar y mejorar la navegación en tu sitio web. En este artículo, exploraremos en detalle cómo aprovechar al máximo esta característica para crear enlaces efectivos y ofrecer una experiencia de usuario óptima.

  • El atributo “target” en un enlace especifica dónde abrir la página vinculada.
  • Las opciones incluyen: la misma pestaña, una nueva pestaña, una nueva ventana o en un iframe.
  • Los elementos que aceptan este atributo incluyen <a>, <area>, <form> y <base>.

Ejemplo

Un atributo “target” en una etiqueta <a>. La página vinculada se mostrará en una nueva pestaña del navegador.

HTML
Ir a <a target="_blank"
      href="https://htmldesdecero.es/">HTMLdesdecero</a>

Usando Target

El atributo target especifica la pestaña o ventana en la que se abrirá la página vinculada o la respuesta de un formulario.

Una página vinculada puede abrirse en la misma pestaña, en una nueva pestaña, en una nueva ventana o en un iframe.

Si no se establece el atributo target, el enlace se abrirá en la misma pestaña o ventana que la página actual.

Sintaxis

HTML
<tagname target="_self | _blank | _parent | _top | framename" />

Valores

ValorDescripción
_selfAbre la página en la misma pestaña o ventana. Este es el valor predeterminado.
_blankAbre la página en una nueva pestaña.
_parentAbre la página en el iframe padre. En el mismo iframe si no hay un iframe padre.
_topAbre la página en el marco de nivel superior, que siempre es la pestaña o ventana completa del navegador.
framenameAbre la página en un iframe con nombre específico.

Elementos que Aceptan el Atributo target

Estos elementos aceptan el atributo target.

ELEMENTSDESCRIPCIÓN
<a>Especifica un enlace de anclaje; consulta el ejemplo anterior.
<area>Crea un área clickable dentro de un mapa de imágenes.
<form>specifica un formulario HTML.
<base>Establece la URL base para todas las URL relativas en una página o sitio.

<area> con target

Un atributo de destino en un elemento <area>. Al hacer clic en el área del monitor, se abrirá una página vinculada en una nueva pestaña del navegador.

HTML
<img src="https://htmldesdecero.es/medios/2023/09/computer-mapa.png" alt="Computer" usemap="#computermap">

<map name="computermap">
  <area target="_blank" shape="rect" coords="253,142,16,2"
        alt="monitor" href="https://google.com/search?q=monitor">
</map>

See the Pen Ejemplo Target – area map by Alex (@htmldesdecero) on CodePen.

<form> con target

Un atributo de destino en un elemento <form>. Enviar el formulario abrirá una nueva pestaña del navegador.

HTML
<form action="/html/action.html" target="_blank">

  <input type="text" name="firstname" placeholder="Nombres">
  <input type="text" name="lastname" placeholder="Apellidos">
 
  <button type="submit">Enviar</button>
</form>

<base> con target

Un atributo de destino en un elemento <base>. Con este elemento base, todos los enlaces en la página se abrirán en una nueva pestaña del navegador.

HTML
<head>
  <base target="_blank" href="https://es.wikipedia.org/wiki/">
</head>

<nav>
  <a href="Vincent_van_Gogh">Vincent Van Gogh</a> <br />
  <a href="Henri_Matisse">Henri Matisse</a> <br />
  <a href="Paul_Cézanne">Paul Cézanne</a>
</nav>
5/5 - (1 voto)