Saltar al contenido

Enlaces, rutas absolutas y relativas en HTML

21 octubre, 2019
Aprende sobre ‚≠ź ENLACES, rutas ABSOLUTAS y RELATIVAS del HTML ‚úÖ: definici√≥n, estructura y EJEMPLOS ‚≠ź pr√°cticos y f√°ciles. ¬°ENTRA!

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.

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).

Ejemplo de enlace de ruta absoluta en HTML.
Ejemplo de enlace de ruta absoluta en HTML.

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.

Recomendación
Ten mucho cuidado a qué sitios enlazas, ya que Google tiene muy en cuenta esto en el SEO de tu web. Pule tu estrategia de Backlinking antes de realizar movimeintos.

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:

Ejemplo de enlaces de rutas relativas en HTML.
Ejemplo de enlaces de rutas relativas en HTML.

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.