Para que, al mover estructuras completas de archivos _HTML_, _CSS_ y _Javascript_, estos no pierdan las referencias se utilizan los llamados **enlaces relativos**.

¿Qué es un enlace relativo?
---------------------------

Es un tipo de enlace que no depende de una estructura predeterminada, sino que a partir del mismo archivo desde el cual es invocado toma la referencia. Es relativo al propio archivo en sí, y no dependiente de una estructura concreta previa.

¿Qué es un enlace absoluto?
---------------------------

En este tipo de enlaces se hace referencia a un lugar concreto de la estructura de archivos, ya sea la raíz de su espacio web, o bien algún directorio (carpeta) o ruta de subdirectorios.

Cómo usar los enlaces relativos
-------------------------------

Antes de nada hay que saber como va a ser la estructura de directorios de nuestro proyecto completo, así como la posición del archivo que va a usar el enlace relativo dentro de esa estructura.

**Ejemplo práctico:**

Imaginemos que tenemos una estructura típica de árbol de directorios de archivos similar a esta:

    /
    /css
    /js
    /img
    /paginas

donde:
- `/` es el directorio donde vamos a colocar los archivos html principales, también llamada comúnmente **raíz**
- `/css` es el directorio donde vamos a colocar los archivos de estilos CSS
- `/js` idem para los archivos de javascript
- `/img` idem para los archivos de imagen
- `/paginas` idem para páginas adicionales _html_ (es un ejemplo, podría ser cualquier cosa que no quisiéramos ubicar en la raíz)

Ahora imaginemos que dentro de esta estructura tenemos los siguientes archivos:

    /index.html
    /sitemap.html
    /js/script.js
    /css/estilos.css
    /img/logo.jpg
    /paginas/pagina1.html
    /paginas/pagina2.html

Como se puede ver, tenemos un archivo llamado **index.html** ubicado en la raíz de esta estructura, de este modo:

    /index.html

que dentro de su código invoca a un archivo _css_, otro _js_, a una _imagen_ y a otro archivo _html_ de este modo (no pongo el codigo entero, solo la parte donde se invocan):

    <link src="/css/estilos.css">
    <script src="/js/script.js">
    <img src="/img/logo.jpg">
    <a href="/sitemap.html">
    <a href="/paginas/pagina1.html">
    <a href="/paginas/pagina2.html">

Este tipo de referencia, cuando empieza por `/`, es uno de los casos de **referencia absoluta**. Es decir, tiene una base bien predefinida de partida para encontrar el resto de archivos, y _en este caso parte de la raiz_ donde el servidor web está sirviendo ese dominio, normalmente, en Apache, estipulado bajo la directiva _DocumentRoot_.

Esta directiva puede estar, por ejemplo, apuntando a `/home/micuenta/public_html/`, pero cuando se está sirviendo desde el servidor web queda representado por `/` (la raiz del documento), y no debe usarse la ruta real (`/home/micuenta/public_html/`) en los enlaces pues el servidor web no la reconoce, pero gracias a la directiva _DocumentRoot_ accede a ella como `/`. 

Otro caso de **referencia absoluta** seria poniendo los enlaces de este modo:

    <link src="//dominio.com/css/estilos.css">
    <script src="//dominio.com/js/script.js">
    <img src="//dominio.com/img/logo.jpg">
    <a href="//dominio.com/sitemap.html">
    <a href="//dominio.com/paginas/pagina1.html">
    <a href="//dominio.com/paginas/pagina2.html">

Donde `dominio.com` es nuestro propio dominio. Aquí estamos en lo mismo, solo que en este caso nuestra referencia absoluta empieza en el nombre de `dominio.com`.

Si intentamos mover toda la estructura de directorios a otro dominio, por ejemplo, `otrodominio.com` los enlaces seguiran apuntando al primer dominio `dominio.com`. Para solucionarlo deberemos realizar una búsqueda de `dominio.com` y sustituirlo por `otrodominio.com`, lo cual siempre es trabajo extra que nos podriamos ahorrar con **referencias relativas**.

**Nota:** He puesto las dos barras inclinadas de forma expresa `//` aunque lo común es encontrarnos con este formato en su lugar:  `http://` o bien `https://`.  Si dejamos tan solo las dos barras se cumplen ambos casos a la vez, es decir, no dará errores tanto si el dominio no está con certificado (el caso de `http://`) como si lo está (el caso de `https://`).

Y ahora por fin vamos a usar las **refencias relativas** en los enlaces anteriores para que cuando necesitemos copiarlo todo a otra parte no sean dependientes ni de su raiz ni de su dominio.

Los **enlaces relativos**, en este ejemplo, podrian quedar asi:

    <link src="./css/estilos.css">
    <script src="./js/script.js">
    <img src="./img/logo.jpg">
    <a href="./sitemap.html">
    <a href="./paginas/pagina1.html">
    <a href="./paginas/pagina2.html">

donde la expresión `./` representa el directorio actual, esté donde esté, que es el tomado por referencia para buscar el resto de archivos enlazados.

Si no usamos `./` y lo ponemos así:

    <link src="css/estilos.css">
    <script src="js/script.js">
    <img src="img/logo.jpg">
    <a href="sitemap.html">
    <a href="paginas/pagina1.html">
    <a href="paginas/pagina2.html">

también nos va a funcionar. Daros cuenta que ya no hay ni la barra inicial `/` que nos condicionaba que la ruta partiera de la raíz, ni tampoco las dos barras con el nombre de dominio `//dominio.com` que indicarian lo mismo pero vinculándolo además a un dominio concreto.

Un último caso a tener en cuenta seria este otro ejemplo, donde desde `paginas/página1.html` se quisiera llamar relativamente a cualquier otro archivo de la estructura situado más atras o en otro directorio.

Por ejemplo, de forma absoluta podriamos encontrarnos con esto dentro de **paginas/pagina1.html**:

    <link src="/css/estilos.css">
    <script src="/js/script.js">
    <img src="/img/logo.jpg">
    <a href="/sitemap.html">
    <a href="/index.html">
    <a href="/paginas/pagina2.html">

Y seguramente funcionaria bien, pero **no** podriamos mover toda la estructura a otro lugar porque nos daria problemas en esa página.

En este caso la solución vuelven a ser **enlaces relativos**, que quedarian de este modo:

    <link src="../css/estilos.css">
    <script src="../js/script.js">
    <img src="../img/logo.jpg">
    <a href="../sitemap.html">
    <a href="../index.html">
    <a href="pagina2.html">

Analicemos los cambios:
1) Se han agregado dos puntos seguidos y una barra `../` que indican **ir atras** en la ruta de directorios (a diferencia de `./` que indica ir adelante desde el directorio actual). Se puede usar tantas veces como sea necesario, por ejemplo, si tuvieramos que ir dos directorios atras seria asi: `../../index.html`, etc.

2) En el enlace absoluto anterior habiamos usado `<a href="/paginas/pagina2.html">` pero ahora usamos `<a href="pagina2.html">` porque tanto `pagina1.html` como `pagina2.html` se encuentran en el mismo directorio, por lo tanto no hace falta ponerles rutas, se encuentran en el mismo nivel. De nuevo, podriamos haber puesto el enlace relativo de este modo: `<a href="./pagina2.html">` (yo prefiero el otro, pues ambos funcionan igual).

De este modo es seguro mover toda una estructura de directorios de un lugar a otro sin que nuestras páginas sufran de enlaces rotos.

**Nota adicional**: En este caso, al tratarse solo de archivos _html_, _css_, _javascript_ y de _imagen_, tambien pueden ser abiertos desde un sistema de archivos directamente, y gracias a las referencias relativas, funcionar correctamente. La URL en estos casos empieza por `file://`. Eso si, en el caso de archivos PHP )u otros que necesitaran de su interprete) éstos dejarian de funcionar porque el sistema de archivos no es un servidor web con su interprete de PHP, y los veriais mal igualmente con o sin referencias relativas.