Enlaces, vínculos, hipervínculos o anclajes en HTML

Los enlaces, hiperenlaces, vínculos o hipervínculos, también conocidos como anclajes o links, son uno de los elementos más usados en HTML, el código o lenguaje con el que se escriben las páginas de internet.
Enlazan las páginas web. Permiten al cargar una página externa en la red o acceder a otro lugar en la misma página donde se encuentra.
También son usados en ocasiones para ejecutar funciones JavaScript.
En este artículo explicamos cómo usarlos y todo lo que debemos saber, para hacer nuestras páginas más funcionales y seguras.

Estructura de los enlaces o hipervínculos en HTML

Los enlaces o hipervínculos constan del elemento A encerrado entre etiquetas de apertura y cierre, siempre incluyendo el atributo HREF.
Pueden usar un texto como anclaje (donde el hace clic o presionar en un dispositivo móvil) o una imagen.
Un enlace elemental se escribe en HTML de la siguiente forma:

<a href="dirección de destino">Texto o imagen</a>

En la página el navegador muestra el texto del enlace subrayado: Enlace de texto
Al situar el cursor del ratón encima del anclaje, vemos en la barra de estado la dirección URL a la que conduce.

Atributos de los enlaces

El elemento A de HTML puede contener varios atributos, para hacerlo más funcional.
Son los siguientes: A continuación explicamos el uso de los principales de ellos.

El atributo HREF en los enlaces

HREF es un atributo obligatorio en los enlaces.
Contiene la dirección URL de la página de destino.
Esta dirección puede ser relativa (cuando se trata de una dirección dentro del mismo dominio) o absoluta (cuando se trata de una dirección de un sitio externo).
Por ejemplo:
Dirección relativa:

<a href="../index.htm"></a>

Dirección absoluta

<a href="https://norfipc.futbolgratis.org/index.html"></a>

También se puede usar en HREF el identificador de una sección de la misma página, con el carácter almohadilla, para desplazarse hacia ese lugar exacto.
Por ejemplo:

<a href="#inicio">Desplazarse al inicio</a>

Aunque se emplea poco, también es posible usar en HREF una dirección de correo electrónico.
Al usar el enlace se abre el programa de correo predeterminado.
Por ejemplo:

<a href="mailto:@gmail.com">Enviar correo</a>

El atributo TITLE o descripción en los enlaces

El atributo TITLE permite agregarle una descripción a la imagen de anclaje o texto de enlace.
Es un comentario que se muestra solo al situar el cursor del ratón sobre los enlaces.
Este parámetro agrega valor SEO donde se utiliza.
Se usa de la siguiente forma:

<a href="pagina.htm" title="Descripción">Enlace</a>

No es necesario usarlo en enlaces cuyo texto de anclaje es descriptivo, solo cuando se trata de una palabra o de una imagen.
Por ejemplo: más información sobre HTML (sitúa el ratón encima del enlace anterior).
Generalmente se usa en el TITLE el título de la página a la que conduce el enlace o el texto del encabezado si se trata de un enlace interno.

El atributo TARGET en los enlaces

El atributo TARGET especifica el contexto de navegación o marco de destino del recurso.
TARGET _BLANK permite en los navegadores modernos, abrir el enlace en una nueva pestaña del navegador.
El mismo efecto que cuando damos clic en el enlace con la tecla Control presionada.
Se usa de la siguiente forma:

<a href="pagina.htm" target="_blank">Abrir en otra pestaña</a>

El objetivo de emplearlo es lograr que el lector no abandone la página donde está situado y por lo tanto ganar tiempo de estadía, parámetro muy apreciado para el posicionamiento. TARGET _PARENT es usado para que las páginas que sean cargadas en un iframe (marco) o usando los elementos OBJECT o EMBED, abran en una nueva ventana del navegador.

El atributo REL en los enlaces HTML

El atributo REL (tipo de enlace) establece una relación entre la página donde se usa y el recurso referido por el enlace.
Las propiedades más usadas en el atributo REL son:
AUTHOR (para indicarle a Google la autoría de una página)??
ME
NOFOLLOW
NOOPENER
NOREFERRER.
Otros menos usados son: alternate, bookmark, external, help, license, next, prev, search y tag.

El atributo REL NOFOLLOW

El atributo REL con la propiedad NOFOLLOW, fue implementado por Google, para indicar que no se debe trasmitir autoridad hacia la página de destino.
Se usa de la siguiente forma:

<a href="http://sitio.com" rel="nofollow">Enlace a sitio externo</a><br>

Es sumamente importante emplearlo en enlaces a sitios externos, que no gozan de nuestra confianza o si no deseamos transmitirle autoridad.
Imprescindible en enlaces o widgets de publicidad.
No usarlo puede causar una penalización de Google a nuestro sitio, por considerar que puede tratarse de un enlace comprado.
Lee más información: Uso del atributo rel Nofollow en las páginas de internet

Actualización, Cambios en los atributos "nofollow" para identificar los tipos de enlaces

El 10 de septiembre del 2019 Google anunció dos nuevos atributos de enlaces, que proporcionan a los otros métodos para que la Búsqueda de Google pueda identificar de dónde procede cada enlace.
Son rel="sponsored" y rel="ugc"
Leer el artículo completo:
Cambios en los atributos "nofollow" para identificar los tipos de enlaces

Los atributos REL NOOPENER y REL NOREFERRER

El atributo REL con la propiedad NOOPENER se usa en HTML5, si empleamos TARGET _BLANK, con el objetivo de abrir la nueva pestaña en otro proceso del navegador.
Es importantísimo porque agrega seguridad y rendimiento a la página.
A continuación lo explicamos más detalladamente.

Como usar REL NOOPENER en los enlaces

NOOPENER hasta el momento solo lo ite e interpreta los navegadores Google Chrome (desde la versión 49) y Opera (desde la versión 36).
Se usa de la siguiente forma:

<a href="http://sitio.com" target="_blank" rel="noopener">Enlace a sitio externo</a>

Para usar la misma función en el resto de los navegadores, debemos emplear REL NOREFERRER.
NOREFERRER deshabilita el Referer HTTP header y funciones JavaScript que hacen saltar molestos popups.

---

Como usar REL NOFOLLOW, NOOPENER y NOREFERRER en los enlaces

No es posible usar más de un atributo REL en una etiqueta HTML.
Por ese motivo debemos de usar cuando sea necesario, las tres propiedades anteriores de la siguiente forma:

<a href="http://sitio.com" target="_blank" rel="nofollow noopener noreferrer">Enlace a sitio externo</a>

Un enlace de ejemplo: Uso de noopener noreferrer y el SEO

---

El atributo (descargar) en los enlaces

Atributo usado para descargar un archivo.
Al usar el enlace, el archivo especificado en la etiqueta HREF es descargado al requipo.
El atributo "" debe contener el nombre que deseamos darle a dicho archivo (no tiene que ser el nombre original).
Por ejemplo con el siguiente enlace se descarga el logo de nuestro sitio.

<a href="../img/logos/logo-norfipc-500.png" ="Logo NorfiPC.png">Descargar imagen</a>

Descargar imagen
La forma en que se descarga depende del navegador usado.

---

Enlaces para ejecutar JavaScript, ejemplos

Los enlaces o anclajes también son empleado para ejecutar diferentes acciones o tareas, empleando JavaScript. De esa forma también funcionan los Bookmarklets.
Para eso en el atributo HREF en vez de una dirección URL se emplea comúnmente: javascript:FUNCION;
Dos ejemplos:
- El siguiente enlace abre un cuadro de alerta que muestra el título de esta página: Ver título

<a href="javascript:alert(document.title)">Ver título</a>

- El siguiente enlace permite compartir esta página en Google+, en otra pestaña del navegador: Compartir en Google+

<a href="javascript:void(window.open('https://plus.google.com/share?url='+encodeURIComponent(location)));">Compartir en Google+</a>

Void impide salir de la página actual.
Lee más información detallada: Como crear Bookmarklets con JavaScript para usar en el navegador

Crear enlace que conduzca a un bloque de texto en una pagina

Google implementó en el navegador Chrome la funcion de Fragmentos de texto
Nos permite enlazar a un bloque de texto en una página, que será resaltado automáticamente para facilitar su lectura.
Solo es necesario agregarle a la dirección URL el siguiente atributo:

#content:~:text=TEXTO

Ejemplo.
Al hacer clic en el siguiente enlace, el navegador nos conduce al texto "Como cambiar el estilo de los botones con CSS" del articulo: Como crear y usar botones en las páginas con HTML5.
Como cambiar el estilo de los botones con CSS
Al revisar el código fuente se puede verificar lo anterior.

Enlazar solo un bloque de texto

Otra opción es enlazar un bloque completo de texto, especificando dos términos separados por una coma, el de comienzo y el de terminación.
Usa el siguiente formato:

#content:~:text=TextodeInicio,TextoFinal

Abrir direcciones de correo electrónico o email en un enlace

Podemos usar el esquema mailto: de HTML para abrir con el enlace el cliente de correo predeterminado en el equipo o dispositivo, de la siguiente forma.

<a href="mailto:[email protected]">o</a>

Por ejemplo: o
También podemos enviar un mensaje a distintas direcciones de email, así como especificar en el código el asunto (Subject) y el contenido del mensaje (Body), además enviar la notificación a otras direcciones.

<a href="mailto:[email protected],[email protected]
?subject=Ayuda
&body=Necesito informacion
&[email protected]
&[email protected]"
>Email</a>

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales