¿Cuál es la diferencia entre ./dogs.html y /dogs.html?

Ambas son rutas URL . Aunque tienen nombres diferentes.

!-- root-relative --a href="./dogs.html"Dogs/a!-- absolute --a href="/dogs.html"Dogs/a

También hay URL completas que serían como:

!-- fully qualified --a href="https://website.com/dogs.html"Dogs/a

Las URL completas son bastante obvias en lo que hacen: ese enlace te lleva a ese lugar exacto. Entonces, veamos esos dos primeros ejemplos nuevamente.

Digamos que tienes una estructura de directorio como ésta en tu sitio:

public/├── index.html└── animals/    ├── cats.html    └── dogs.html

Si coloca un enlace cats.htmlque enlaza a /dogs.html(una ruta “absoluta”), irá al 404: ¡no hay ningún enlace dogs.htmlen el nivel base/raíz de este sitio! Al /comienzo del camino significa “comenzar en el nivel más bajo y subir desde allí” ( public/siendo el nivel más bajo).

Ese enlace cats.htmldebería escribirse como ./dogs.html(iniciar un directorio hacia atrás y continuar) o /animals/dogs.html(indique explícitamente en qué directorio comenzar).

Las URL absolutas se hacen más largas, naturalmente, cuanto más compleja es la estructura del directorio.

public/├── animals/  └── pets/      ├── c/      |   └── cats.html      └── d/          └── dogs.html

Con una estructura como esta, para dogs.htmlenlazar a cats.html, tendría que ser…

!-- Notice the TWO dots, meaning back up another folder level --a href="../c/cats.html"cats/a!-- Or absolute --a href="/animals/pets/c/cats.html"cats/a

Vale la pena señalar en este escenario que si animals/se cambia el nombre animal/, el vínculo relativo seguirá funcionando, pero el vínculo absoluto no. Esto puede ser una desventaja del uso de enlaces absolutos. Cuando eres tan específico, hacer un cambio en la ruta afectará tus enlaces.

Solo hemos analizado los enlaces HTML a HTML, pero esta idea es universal para la web (y las computadoras, básicamente). Por ejemplo, en un archivo CSS, es posible que tengas:

body {  /* Back up one level from /images and follow this path */  background-image: url(./images/pattern.png);}

…lo que sería correcto en esta situación:

public/├── images/|   └── pattern.png├──index.html└── style.css

Pero si tuvieras que mover el archivo CSS…

public/├── images/|   └── pattern.png├── css/|   └── style.css└── index.html

…entonces eso se vuelve incorrecto porque su archivo CSS ahora está anidado en otro directorio y hace referencia a rutas de un nivel más profundo. Necesitaría hacer una copia de seguridad de otro nivel de carpeta nuevamente con dos puntos, como ../images/pattern.png.

Un formato de URL no es mejor que otro; solo depende de lo que creas que es más útil e intuitivo en ese momento.

Para mí, pienso en lo que es menos probable que cambie. Para algo como un recurso de imagen, me parece muy poco probable que alguna vez lo mueva, por lo que vincularlo con una ruta URL absoluta (p. ej. /images/pattern.png) parece lo más seguro. Pero para vincular documentos que se encuentran todos en el mismo directorio, parece más seguro vincularlos relativamente.