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

Ellos dos Rutas de URL. Sin embargo, tienen diferentes nombres.

<!-- root-relative -->
<a href="https://css-tricks.com/whats-the-difference-between-dogs-html-and-dogs-html/./dogs.html">Dogs</a>

<!-- absolute -->
<a href="http://css-tricks.com/dogs.html">Dogs</a>

También hay URL completamente calificadas que serían como:

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

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

Supongamos que tiene una estructura de directorio como esta en su sitio:

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

Si pones un enlace en cats.html que enlaza con /dogs.html (una ruta “absoluta”), va a 404; no hay dogs.html en el nivel base / raíz de este sitio! El / al principio de la ruta significa “empezar en el muy abajo nivel y subir desde allí ”(con public/ siendo el nivel más bajo).

Ese enlace en cats.html tendría que escribirse como ./dogs.html (iniciar un directorio de nuevo y trabajar) o /animals/dogs.html (indique explícitamente en qué directorio comenzar).

Las URL absolutas se alargan, 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.html para enlazar a cats.html, tendría que ser …

<!-- Notice the TWO dots, meaning back up another folder level -->
<a href="https://css-tricks.com/whats-the-difference-between-dogs-html-and-dogs-html/c/cats.html">cats</a>

<!-- Or absolute -->
<a href="http://css-tricks.com/animals/pets/c/cats.html">cats</a>

Vale la pena señalar en este escenario que si animals/ fue renombrado animal/, entonces el vínculo relativo seguiría funcionando, pero el vínculo absoluto no. Eso puede ser una desventaja de usar 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 tenga:

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

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

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

Pero si tuviera 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 desde un nivel más profundo. Debería volver a hacer una copia de seguridad de otro nivel de carpeta con dos puntos, como ../images/pattern.png.

Un formato de URL no es mejor que otro, solo depende de lo que crea 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 activo de imagen, me parece muy poco probable que lo mueva alguna vez, por lo que vincularlo con una ruta de URL absoluta (p. Ej. /images/pattern.png) parece el más seguro. Pero para vincular documentos que están todos en el mismo directorio, parece más seguro vincularlos relativamente.