En este tutorial vamos a ver cómo crear enlaces mediante la etiqueta «a» de HTML. Podríamos decir que esta es la única etiqueta imprescindible de HTML, ya que sin ella jamás habrían existido los hipervínculos y, en consecuencia, tampoco el hipertexto.
La etiqueta «a» se usa para crear enlaces, cuyo destino se define mediante el atributo href. El texto del enlace, también conocido como anchor, se sitúa entre las etiquetas de apertura y de cierre.
Existen dos tipos de destinos o rutas de los enlaces:
- Enlaces absolutos: Los enlaces absolutos incluyen las direcciones o rutas URL completas, incluyendo el dominio y la dirección dentro del dominio.
- Enlaces relativos: Los enlaces relativos no incluyen dominio, siendo relativos al dominio del documento o al propio documento en sí.
Aquí tienes un ejemplo de ruta absoluta:
<a href="https://www.neoguias.com">Haz clic aquí para acceder a neoguias</a>Aquí tienes un ejemplo de ruta relativa relativa al dominio de la página actual:
<a href="/test">Click aquí para iniciar el test</a>El enlace de este ejemplo nos llevará al ruta /test, partiendo del dominio de la página actual.
Aquí tienes un ejemplo de ruta relativa relativa a la página actual:
<a href="test">Click aquí para iniciar el test</a>Como ves, la única diferencia es que hemos omitido la barra inclinada «/» al comienzo del enlace, por lo que el enlace se considerará relativo a la página actual y no al dominio. Para ver las diferencias de un modo más claro, vamos a partir de la página ficticia https://www.neoguias.com/mi-pagina y seguidamente vamos a acceder a los siguientes enlaces:
- /test: Cuando hagamos clic en este enlace, iremos a la página
https://www.neoguias.com/test. - test: Cuando hagamos clic en este enlace, iremos a la página
https://www.neoguias.com/mi-pagina/test.
Los enlace también pueden incluir código HTML entre las etiquetas de apertura y cierre, pudiendo constar de imágenes o de bloques más complejos, a excepción de otras etiquetas de enlace, ya que entrarían en conflicto. En este ejemplo estamos utilizando una imagen como enlace o anchor:
<a href="https://www.neoguias.com">
<img src="imagen.png" alt="Imagen de ejemplo">
</a>Por último, también puedes especificar el destino del enlace en lo que confiere al navegador de usuario, pudiendo abrir el enlace en la misma pestaña, en una pestaña nueva o en una ventana nueva:
- _blank: El enlace se abrirá en una nueva pestaña o, de no existir pestañas, en una nueva ventana.
- _self: El enlace se abrirá en la misma pestaña en la que estás actualmente, siendo esta la opción por defecto.
- _parent: El enlace se abrirá en el frame o marco en el que está contenido el enlace. Ya no se suelen usar frames, por lo que esto equivaldrá a abrir el enlace en la pestaña actual en la mayor parte de los casos.
- _top: Se eliminarán todos los elementos de la página, abriéndose el documento en la pestaña actual. También suele ser equivalente a abrir el enlace en la pestaña actual en la mayor parte de los casos.
- marco: Por último también puedes especificar el marco o frame en el que se abrirá el enlace.
Actualmente ya solo se utilizan las opciones _blank o _self, que es la opción por defecto, por lo que quizás te podrías olvidar de las otras opciones. En el siguiente ejemplo hemos configurado el enlace para que se abra en una nueva pestaña:
<a href="https://www.neoguias.com" target="_blank">Abrir en una nueva pestaña</a>Y esto ha sido todo.
Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.
