HTML. Enlaces en etiqueta link

Me pidieron ayuda para el uso de la etiqueta link de HTML. Espero que esto sirva para esa persona y para cuantos lo necesiten.

La etiqueta link es muy útil en las páginas web, ya que nos permite indicar archivos que tienen alguna relación con la página actual (como puede ser el ícono de la página, una hoja de estilos, la referencia a una página anterior o siguiente, etc.). Más información en W3Schools.

Por ejemplo, para enlazar una hoja de estilos escribimos esto:

<link rel="stylesheet" type="text/css" href="style.css" />

O para enlazar un ícono:

<link rel="shortcut icon" type="image/x-icon" href="style.css" />

Cabe hacer la aclaración de que en el caso de íconos, es preferible usar únicamente archivos de ese tipo (con extensión .ico). Algunos navegadores soportan usar una imagen, pero no todos, ni en todas sus versiones.

La etiqueta link puede ir únicamente dentro de la etiqueta head de nuestra página, y podemos tener tantas como necesitemos.

Rutas absolutas y relativas

Algo muy importante a tomar en cuenta al relacionar archivos (sea en una etiqueta link, a, script, object, img, etc.), es que debemos ser cuidadosos con la ruta donde se encuentra el archivo enlazado. Para las explicaciones usaré el siguiente ejemplo:

Ruta absoluta

Es la ruta desde la raíz del sitio hasta el archivo. En este ejemplo sería www.misitio.com/. Aquí le indicamos al navegador un punto inicial (que sería la carpeta principal de nuestro sitio) hacia el archivo que necesitamos enlazar.

Se puede indicar la raíz de un sitio de dos maneras:

• http://www.misitio.com/ Indicando la dirección completa, incluyendo http://. Útil cuando hacemos referencia a un elemento fuera de nuestro sitio:

  <a href="http://www.google.com/intl/en/about/corporate/index.html">Acerca de Google</a>

  Se puede usar también para enlazar archivos dentro de nuestro mismo sitio, pero es más común utilizar las otras opciones explicadas en este artículo.

• / Una diagonal antes de una ruta hace referencia a la raíz. Útil cuando vamos a enlazar a un archivo en nuestro sitio:

  <link rel="stylesheet" href="/recursos/estilos1.css"/>

  Independientemente de dónde se encuentre la página que lleva esta etiqueta link, siempre la referencia se hará al archivo estilos1.css de la carpeta recursos del sitio.

Ruta relativa

Su nombre se refiere a que la ruta hacia el archivo enlazado será relativa al archivo que lo está enlazando. Es decirle al navegador que vaya del punto A (la página actual) al punto B (el archivo enlazado).

La ruta relativa se define usando los símbolos / para indicar una carpeta dentro de una ubicación, y .. para indicar una carpeta anterior a la actual.

Si a pagina.html le quiero indicar el ícono icono.ico, hago lo siguiente:

<link rel="shortcut icon" type="image/x-icon" href="icono.ico"/>

El ícono está en la misma carpeta de la página, así que únicamente le digo el nombre del archivo.

La complejidad (y no es que sea mucha) viene cuando el archivo enlazado no está en la misma carpeta. Si a pagina.html quiero enlazarle la hoja de estilos estilos2.css, debo indicarle que ésta se encuentra en otra carpeta:

<link rel="stylesheet" href="recursos2/estilos2.css"/>

pagina.html y recursos2 están dentro de una misma carpeta, así que indico el nombre de la carpeta como lo hice con el ícono. Dentro de recursos2 está mi hoja de estilos, así que los separo con una diagonal para indicarle que la primera era una carpeta.

Ahora bien, si quiero enlazar la hoja de estilos estilos1.css a mi página usando una ruta relativa (en vez de la ruta absoluta que ya vimos anteriormente), uso la siguiente línea:

<link rel="stylesheet" href="../recursos/estilos2.css"/>

pagina.html está dentro de una carpeta paginas. Junto a esta carpeta está la llamada recursos, ambas dentro de mi carpeta raíz. Y dentro de la carpeta de recursos se encuentra la hoja de estilos. Usando .., como ya lo expliqué, le indico al navegador que debe buscar una carpeta antes, es decir, en la carpeta padre de paginas. Dentro esa carpeta padre, debe buscar la carpeta recursos, dentro de la cual está finalmente mi hoja de estilos.