En este post te enseñaremos todo lo que necesitas saber acerca de los enlaces, rutas absolutas y relativas del HTML: definición, estructura y ejemplos prácticos. ¡ENTRA!
INICIAMOS:
Bienvenidos a otro post.
Gracias a los enlaces es que puedes ir de página web a página web investigando e indicando acerca de cualquier tema, y existen prácticamente desde los inicios de internet.
Comúnmente también se les llama hipervínculos, ambos tienen el mismo significado y denotan la misma función. La estructura de un enlace es la siguiente:
- Texto: también se le conoce como «anchor text» y es el texto el cuál contendrá el enlace o hipervínculo hacia otro destino de página web.
- Hipervínculo: es el destino el cuál se coloca en el anchor text. Aquí se debe especificar el destino de página web.
A continuación, te enseñaremos cómo puedes llevar a la práctica la inserción de enlaces (con sus respectivas rutas relativas y absolutas) en HTML.
Índice del artículo
Enlaces en HTML
Los enlaces HTML por defecto tienen una pinta azul, que si pasas el mouse sobre él, se convertirá en una mano señalando el anchor text. La longitud del anchor text viene delimitada por la cantidad de palabras que cubra ese enlace.
Si deseas crear un enlace, deberás seguir la siguiente estructura:
<a href="https://blog.mastercoria.com">Este es un enlace que dirige a El Blog de Master Coria</a>
La etiqueta HTML «<a>» es la que rige por defecto la creación de enlaces, y es el estándar que Google oficialmente usa cuando es de temas SEO para tu sitio web.
El atributo «href» es aquel que designa el enlace destinatario adonde será llevado el usuario, y el anchor text es básicamente el texto que está entre las etiquetas, es decir, el valor de la etiqueta «<a>».
Mencionar que, para efectuar el cierre de esa etiqueta, se deberá emplear su contra etiqueta que es «</a>», de lo contrario, el anchor text tomará la longitud de todos los caracteres escritos después de la apertura del enlace.
Rutas absolutas
Son todos aquellos enlaces que dirigen a una dirección web o URL, también es conocido cotidianamente como «link». Este enlace es el más común en internet, y el que aconsejamos usar SIEMPRE, ya que entre las buenas prácticas SEO, se aconseja usarlo.
Estos enlaces de rutas absolutas en HTML pueden ser tanto externas (enlaces de tu propio sitio web), o enlaces externos (enlaces a otros sitios web).
Ejemplos de rutas absolutas en HTML
A continuación te daremos algunos ejemplos claros los cuales explicarán al 100% el uso de las rutas absolutas dentro de tu documento HTML. Presta atención a cada tipo de ejemplo, ya que describe bien distintos tipos de rutas absolutas.
<a href="https://www.blog.mastercoria.com/">Ruta absoluta a página principal de El Blog de Master Coria.</a>
<a href="https://blog.mastercoria.com/html/">Ruta absoluta a sitio principal, incluyendo una petición hacia una determinada sección.</a>
<a href="https://www.youtube.com/watch?v=pUGi1W4Pots">Ruta absoluta a YouTube, incluyendo una petición de un determinado video.</a>
Como puedes observar, todos los enlaces vienen dentro del atributo «href» de la etiqueta HTML «<a>», y pueden ser de distintos tipos de direcciones web. Tan sólo basta con poner ese enlace directamente entre las comillas de ese atributo.
Rutas relativas
Son enlaces HTML locales que buscan algún contenido dentro del ordenador o servidor. Recomendamos usar lo menos posible las rutas relativas en tu documento HTML puesto que podrían ocasionarte confusiones futuras debido a su estructura.
Esta estructura funciona de la misma forma que una ruta absoluta, pero las relativas tienen diferente forma de trabajo o empleo en el documento HTML.
Primeramente, veamos un ejemplo concreto de una ruta relativa de HTML para que podamos entender de qué trata esta cuestión:
<a href="C:\\Usuarios\MasterCoria\Escritorio\leon.png">Ruta relativa (dirección interna o local del PC o servidor) hacia una imagen determinada.</a>
Generalmente, las rutas relativas son empleadas bajo lenguajes de programación que corren detrás del servidor, porque exponer este tipo de direcciones internas de un servidor puede conllevar riesgos. Sin embargo, existen otro tipo de rutas relativas dentro del HTML que pueden usarse:
Ejemplos de rutas relativas en HTML
<a href="/contacto">Ruta relativa que dirige a la sección /contacto del sitio en cuestión.</a>
Estos enlaces HTML de ruta relativa dirige a la sección de contacto del sitio web en donde se coloque este hipervínculo. Si el sitio es Facebook, entonces dirigiría a «facebook.com/contacto».
Otro ejemplo es el empleo de estas rutas para ir a otras secciones determinadas, empleando la navegación por puntos:
<a href="../index.html">Ir a la página principal.</a>
La navegación por puntos indica que irá a un directorio atrás, y buscará el archivo HTML índice de ese sitio. Si por ejemplo, se encontrase el usuario en «secciones/ejemplo.html», la navegación indica que deberá ir a «/index.html», saliendo del directorio «secciones».
Puede trabajarse en más niveles de directorio, tal y como se explica a continuación:
<a href="../../../index.html">Salir de 3 directorios, ir al archivo índice HTML.</a>
Esperamos que en este artículo informativo hayas aprendido bastante acerca de los enlaces (tanto de rutas relativas como absolutas) en HTML. Quizá estos enlaces te resulten de interés:
¿Entendiste a los temas abordados? ¡Comenta tus dudas en los comentarios!
Nos vemos en otro post.