Esta es una pequeña guía sobre cómo poner enlaces correctamente y no perderte en las direcciones.
Enlaces Absolutos: La Dirección Completa
Un enlace absoluto es la dirección completa de un recurso. Normalmente, estos enlaces se usan para recursos externos y se espera que la dirección no cambie.
Por ejemplo:
https://htmldesdecero.es/https://htmldesdecero.es/blog/plantilla-sitio-web-simple-htmlNo olvides: si usas enlaces absolutos en tu sitio web, si cambias la estructura de las carpetas o mueves los archivos, la mayoría de los enlaces pueden dejar de funcionar.
Enlaces Relativos ¡Como un mapa del tesoro!
A dónde apuntan los enlaces relativos depende de la ubicación de la página actual. Veámoslo con un ejemplo:
Supongamos que cargamos una página con la siguiente dirección:
https://htmldesdecero.es/blog/index.htmlEn todos los ejemplos a continuación se muestra un enlace relativo y la ruta completa a la que el navegador traduce el enlace.
- Enlace a un archivo en la misma carpeta:
1.htmlhttps://htmldesdecero.es/blog/1.htmlEl archivo está en la misma carpeta que la página actual. Se escribe sin caracteres adicionales.
- Enlace a un archivo en una carpeta inferior a la actual:
carpeta/3.htmlhttps://htmldesdecero.es/blog/carpeta/3.htmlEl archivo está en una subcarpeta de la actual. Antes del nombre del archivo, se escribe el nombre de la carpeta con una “/”.
carpeta1/carpeta2/5.htmlhttps://htmldesdecero.es/blog/carpeta1/carpeta2/5.htmlLa página está dos carpetas debajo de la actual.
- Enlace relativo a la raíz del sitio:
/2.htmlhttps://htmldesdecero.es/2.htmlEl archivo está ubicado en la carpeta raíz del sitio. Para un enlace relativo a la raíz se usa “/”. Este enlace funcionará solo en un servidor web, no funcionará con archivos locales en la computadora.
/dir1/dir2/4.pnghttps://htmldesdecero.es/dir1/dir2/4.pngEl archivo está a dos niveles debajo de la raíz del sitio.
- Enlace a una carpeta superior a la actual:
Supongamos que nuestra URL base es https://htmldesdecero.es/blog/carpeta1/carpeta2/index.html.
../6.htmlhttps://htmldesdecero.es/blog/carpeta1/6.htmlUna carpeta “arriba” relativa a la actual. Para “subir” se usa la sintaxis “../”.
../../7.htmlhttps://htmldesdecero.es/blog/7.htmlDos carpetas arriba. La sintaxis “../” puede repetirse tantas veces como sea necesario, lo importante es que todas las carpetas “en el camino” existan.
- Enlace combinado:
Supongamos que nuestra URL base es https://htmldesdecero.es/blog/carpeta1/carpeta2/index.html.
../../../dir1/dir2/8.htmlhttps://htmldesdecero.es/dir1/dir2/8.htmlTres carpetas arriba y dos carpetas abajo en relación con la actual: se sube a la raíz y luego se baja consecutivamente a las carpetas dir1 y dir2.
Todos los ejemplos anteriores en una sola imagen:
Enlaces de ID (Enlaces de Anclaje)
Los enlaces de anclaje son útiles si necesitas hacer referencia a un lugar específico de un documento, por ejemplo, a un título. Para esto, el título debe tener un atributo id específico, y en el enlace, después de #, debe agregarse este atributo al final.
Marcando el título:
<article id="part1">Contenido del primer capítulo</article>Poner un enlace de anclaje en la misma página:
<a href="#part1">Capítulo 1</a>Poner un enlace de anclaje en otra página:
<a href="/index.html#part1">Capítulo 1</a>Realiza el simulador interactivo de enlaces de anclaje para aprender con seguridad cómo se hace.
Qué Pasa si te Equivocas
El archivo al que estás enlazando no se cargará, aparecerá un error 404. Si esto sucede, puedes verificar la dirección a través de Chrome DevTools.
También puedes poner un enlace a un archivo en tu computadora sin saberlo y luego preguntarte por qué las imágenes no se cargan. Esto sucedió en 1998 en el sitio web de Microsoft Game Studios. Los desarrolladores dejaron un enlace a un archivo en el disco H:/.
Claro que ahora nadie en grandes empresas permitiría esto, pero si primero haces la página en tu computadora, puede haber matices. Por lo tanto, utiliza nuestra guía para evitar errores.
