En este artículo te explico uno de los elementos más básicos del lenguaje HTML y uno de los pilares de Internet. ¿Quieres saber qué son los enlaces en HTML y qué tipos existen? No te lo pierdas.
¡Despegamos!
Índice de Contenidos
¿Qué son los enlaces HTML?
Los enlaces en HTML (también llamados hipervínculos) son elementos que permiten referenciar desde un documento HTML otros recursos, ya sean otras páginas web, imágenes, vídeos, etc. Los enlaces son la piedra angular de la web, ya que permiten al usuario navegar entre diferentes documentos publicados en servidores web y accesibles a través de Internet.
Etiqueta para definir links en HTML
La etiqueta de enlace en HTML es <a>. Se compone de una etiqueta de apertura que debe llevar el atributo href, un texto ancla y una etiqueta de cierre </a>. El valor del atributo href es la dirección web (URL) del recurso que quieras enlazar, mientras que el texto ancla es el contenido textual que se mostrará en pantalla y que contendrá el enlace.
Por ejemplo, para crear un enlace a la página principal de HTML Masters, se debe programar lo siguiente:
<a href="https://htmlmasters.tech/">HTML Masters<a/>
En función de los atributos y los valores asignados a ellos, se pueden diferenciar una serie de tipos de enlaces HTML, te los explico a continuación. En muchos casos, estas tipologías representan conceptos importantes y muy utilizados en entornos de desarrollo web, por lo que te aconsejo prestar atención a todos ellos.
Enlaces relativos y absolutos
Las rutas relativas y absolutas son un concepto de informática general, no atañe únicamente a la web. Sin embargo, a continuación te explico qué son los enlaces relativos y absolutos en HTML:
Enlaces absolutos en HTML
Son aquellos en los que el atributo href tiene definida una URL completa, en la que se definen todos sus elementos: protocolo, subdominio (opcional), nombre de dominio, subcarpetas (opcional), recurso y parámetros (opcional).
Si no conoces estos conceptos, te recomiendo echarle un vistazo al artículo ¿Qué son las URL y cuáles son sus partes?. En el código anterior se ha utilizado una ruta de este tipo, es decir, es un ejemplo enlace HTML de ruta absoluta:
<a href="https://htmlmasters.tech/que-son-los-enlaces-en-html/">Qué son los enlaces en HTML y qué tipos existen</a>
Enlaces relativos en HTML
Son aquellos en los que se ha definido una ruta relativa como valor del atributo href. Sólo se pueden emplear para crear enlaces internos, ya que las rutas relativas se caracterizan por omitir el protocolo, el subdominio y el nombre de dominio. Por ejemplo, para añadir un enlace relativo hacia este propio artículo, se podría emplear el siguiente código:
<a href="/que-son-los-enlaces-en-html/">Qué son los enlaces en HTML y qué tipos existen</a>
Para más información sobre las rutas relativas y absolutas en informática, te recomiendo el siguiente recurso.
Enlaces internos y externos
Por un lado, los enlaces internos en HTML son aquellos que apuntan a un recurso que pertenece al propio sitio web desde el que se realiza el enlace. Por ejemplo, el siguiente enlace es un hipervínculo interno, ya que enlaza a la página principal de esta web: HTML Masters.
Como he comentado en el punto anterior, para crear enlaces internos es posible emplear rutas relativas. Para apuntar a la home con una ruta relativa, basta con establecer un slash (/) como valor del atributo href:
<a href="/">HTML Masters</a>
Por otro lado, los enlaces externos son aquellos que apuntan a recursos ajenos al sitio web en el que se publican. En estos casos, se deben usar siempre rutas absolutas y, en muchas ocasiones se hace que el enlace HTML se abra en una nueva pestaña. Si no sabes cómo hacerlo, te recomendamos visitar el artículo dedicado a ello.
Además, en muchos casos, los enlaces externos tienen un atributo nofollow. En el punto siguiente te explico de qué se trata y por qué son importantes.
Enlaces Dofollow y Nofollow
Los enlaces HTML pueden llevar un atributo rel, el cual define la relación que une el documento de origen con el de destino. Puede adquirir diferentes valores, aunque los más famosos son dofollow y nofollow.
Se trata de un atributo dirigido a proporcionar información a los bots de motores de búsqueda como Google cuando rastrean la página web. Estos rastreadores analizan cada página y, cuando se encuentran enlaces, su comportamiento por defecto es añadirlos a su cola de rastreo para analizar las páginas de destino a las que están apuntando.
Este comportamiento natural se lleva a cabo siempre y cuando el enlace rastreado sea de tipo dofollow. Al tratarse de la situación por defecto, no es necesario indicar el atributo rel con el valor dofollow para que un enlace sea de este tipo. Los enlaces que no son nofollow, son interpretados automáticamente como dofollow.
Sin embargo, para evitar que los bots de los motores de búsqueda «sigan» los recursos a los que apuntan los enlaces HTML de una determinada página, se emplea el atributo rel con el valor nofollow. Por ejemplo:
<a href="/" rel="nofollow">HTML Masters</a>
Este concepto es importante en el ámbito del posicionamiento SEO. Aunque es un tema muy amplio, se puede resumir que los enlaces dofollow favorecen el posicionamiento en los rankings de Google de la página que se está referenciando, mientras que los enlaces nofollow no lo favorecen.
Espero que te haya sido de ayuda este artículo para entender qué son los enlaces HTML y qué tipos existen. Si quieres saber cómo crear enlaces en HTML, te recomiendo que visites el artículo que hemos destinado a ello.
¡Nos vemos en el próximo viaje!
