Ejercicio práctico 18: Enlaces Absolutos y Relativos
Descubre la diferencia entre enlaces absolutos y relativos en HTML con este ejercicio práctico. Aprende cuándo y cómo usar cada tipo de enlace para construir sitios web bien estructurados y fáciles de navegar.
Actividad
Crea un documento HTML que contenga enlaces absolutos y relativos. Para este ejercicio vas a necesitar crear dos archivos HTML diferentes. Puedes nombrarlos como index.html y page.html.
Solución interactiva
Solución con el código HTML completo
Crea un archivo index.html con el siguiente código.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Enlaces Absolutos y Relativos</title>
</head>
<body>
<h1>Enlace Absoluto</h1>
<a href="https://div.zone" target="_blank">Ir a DivZone</a>
<h2>Enlace Relativo</h2>
<a href="page.html">Ir a Página Interna</a>
</body>
</html>
Dentro de la misma carpeta, crea otro archivo llamado page.html para utilizar como página interna.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Enlaces Absolutos y Relativos - Página interna</title>
</head>
<body>
<h1>Mi página interna de ejemplo.</h1>
</body>
</html>
Variantes del mismo ejercicio
Variante 1: Rutas relativas a la raíz vs relativas al documento
HTML ofrece varias formas de escribir rutas relativas. Entender la diferencia entre ../, ./ y / es clave para no romper enlaces al mover archivos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Tipos de Rutas</title>
</head>
<body>
<h1>Comparativa de Rutas Relativas</h1>
<h2>Relativas al documento actual</h2>
<ul>
<li><a href="page.html">Misma carpeta</a></li>
<li><a href="./page.html">Misma carpeta (explícito)</a></li>
<li><a href="paginas/contacto.html">Subcarpeta</a></li>
</ul>
<h2>Relativas a la raíz del sitio (comienzan con /)</h2>
<ul>
<li><a href="/paginas/contacto.html">Desde la raíz</a></li>
<li><a href="/css/estilos.css">Archivo CSS desde raíz</a></li>
<li><a href="/img/logo.png">Imagen desde raíz</a></li>
</ul>
<h2>Subiendo niveles (../)</h2>
<ul>
<li><a href="../index.html">Un nivel arriba</a></li>
<li><a href="../../proyecto/index.html">Dos niveles arriba</a></li>
</ul>
<h2>Enlaces absolutos</h2>
<ul>
<li><a href="https://div.zone" target="_blank" rel="noopener noreferrer">DivZone (HTTPS)</a></li>
<li><a href="//cdn.ejemplo.com/lib.js">Protocolo implícito</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Contacto</title>
</head>
<body>
<h1>Página de Contacto</h1>
<!-- Volver atrás con ruta relativa al documento -->
<p><a href="../index.html">← Volver al inicio (../)</a></p>
<!-- Volver atrás con ruta absoluta desde la raíz -->
<p><a href="/index.html">← Volver al inicio (/)</a></p>
</body>
</html>
Regla nemotécnica:
./= "en esta misma carpeta" (opcional, se asume)../= "subir un nivel" (tantas veces como niveles quieras subir)/= "desde la raíz del sitio" (no depende de dónde esté el archivo)//= "usa el mismo protocolo que la página actual" (HTTP o HTTPS)
Variante 2: Estructura de carpetas realista
Así se organiza normalmente un proyecto web. Un archivo en una subcarpeta profunda necesita rutas relativas para acceder a imágenes, CSS y otras páginas.
proyecto/
├── index.html
├── css/
│ └── estilos.css
├── img/
│ ├── logo.png
│ └── fondo.jpg
├── paginas/
│ ├── servicios.html
│ └── contacto.html
└── blog/
├── index.html
└── articulos/
└── post-1.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Servicios</title>
<!-- CSS: subo un nivel y entro a css/ -->
<link rel="stylesheet" href="../css/estilos.css" />
</head>
<body>
<h1>Servicios</h1>
<!-- Navegación: subo un nivel para ir al index -->
<nav>
<a href="../index.html">Inicio</a> |
<a href="contacto.html">Contacto (misma carpeta)</a> |
<a href="../blog/index.html">Blog</a>
</nav>
<!-- Imagen: subo un nivel y entro a img/ -->
<img src="../img/logo.png" alt="Logo" width="200" />
<!-- Enlace al post específico del blog -->
<p>
Leé nuestro artículo:
<a href="../blog/articulos/post-1.html">Post 1</a>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Post 1</title>
<!-- CSS: subo dos niveles (hasta raíz) y entro a css/ -->
<link rel="stylesheet" href="../../css/estilos.css" />
</head>
<body>
<h1>Artículo del Blog</h1>
<!-- Navegación: subo dos niveles -->
<nav>
<a href="../../index.html">Inicio</a> |
<a href="../../paginas/servicios.html">Servicios</a> |
<a href="../index.html">Blog</a>
</nav>
<!-- Imagen desde raíz (más fácil de mantener) -->
<img src="/img/logo.png" alt="Logo" width="200" />
</body>
</html>
Cuando la estructura de carpetas es profunda, usar rutas desde la raíz (/img/logo.png) es más mantenible que andar subiendo niveles (../../../img/logo.png).
Variante 3: Uso de <base href=""> en el <head>
La etiqueta <base> define una URL base para todos los enlaces relativos de la página. Es útil cuando tu sitio está en un subdirectorio o cuando hacés un deploy en diferentes entornos.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Base Href</title>
<!-- Todos los enlaces relativos se resuelven desde esta URL base -->
<base href="https://misitio.com/mi-proyecto/" />
</head>
<body>
<h1>Sitio con Base Href</h1>
<!-- Este enlace relativo se convierte en:
https://misitio.com/mi-proyecto/paginas/contacto.html -->
<a href="paginas/contacto.html">Contacto</a>
<!-- Este img se convierte en:
https://misitio.com/mi-proyecto/img/logo.png -->
<img src="img/logo.png" alt="Logo" width="200" />
<!-- Los enlaces absolutos IGNORAN la base -->
<a href="https://div.zone" target="_blank">DivZone (absoluto)</a>
</body>
</html>
⚠️ Precaución: <base> solo puede aparecer una vez en el documento y debe estar antes de cualquier elemento que use URLs relativas. Si te olvidás de <base> al mover archivos, todos los enlaces se romperán.
Variante 4: Enlaces con protocolo implícito (//)
Cuando escribís //cdn.ejemplo.com/archivo.js sin https: ni http:, el navegador usa automáticamente el mismo protocolo de la página actual.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Protocolo Implícito</title>
<!-- Si la página se carga por HTTPS, esto será HTTPS.
Si se carga por HTTP, será HTTP. -->
<link rel="stylesheet" href="//cdn.ejemplo.com/bootstrap.min.css" />
</head>
<body>
<h1>Recursos con Protocolo Adaptable</h1>
<p>Este sitio carga recursos que se adaptan automáticamente al protocolo.</p>
<!-- jQuery desde CDN con protocolo implícito -->
<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Imagen desde CDN -->
<img src="//cdn.ejemplo.com/img/banner.jpg" alt="Banner" width="600" />
<p>
<strong>Ventaja:</strong> evitás mixed content warnings (advertencias de
contenido mixto) cuando tu sitio usa HTTPS pero los recursos están en HTTP.
</p>
</body>
</html>
Esta técnica era muy común antes de que la web migrara completamente a HTTPS. Hoy, prácticamente todos los CDNs soportan HTTPS, por lo que podés (y deberías) usar https:// directamente.
Buenas y Malas Prácticas
| ✅ Buena práctica | ❌ Mala práctica |
|---|---|
Usar rutas desde raíz (/) para recursos compartidos (CSS, imágenes, JS) | Usar rutas con ../../../ complejas y frágiles |
Usar ./ o ../ solo para páginas dentro del mismo proyecto | Usar rutas absolutas locales (C:\Users\...) — solo funcionan en tu PC |
| Mantener una estructura de carpetas plana (2-3 niveles máximo) | Crear estructuras con 5+ niveles de profundidad |
Usar https:// explícito para recursos externos | Usar http:// (mixed content bloqueado en HTTPS) |
Agregar rel="noopener noreferrer" con target="_blank" | Dejar target="_blank" sin protección de seguridad |
Preguntas Frecuentes (FAQ)
¿Qué ruta es más portable, absoluta o relativa?
Depende del contexto. Las rutas absolutas (https://div.zone/pagina) son 100% portables (funcionan desde cualquier lugar) pero atan el enlace a un dominio específico. Las rutas relativas a la raíz (/paginas/contacto.html) son portables dentro del mismo dominio (si cambiás de dominio o movés el proyecto de /dev/ a producción, pueden romperse). Las rutas relativas al documento (../contacto.html) son las más frágiles, pero las más portables si movés todo el proyecto de carpeta.
¿Por qué mis enlaces relativos funcionan en local pero no en el servidor?
Las rutas desde raíz (/css/estilos.css) dependen de dónde esté ubicada la carpeta del proyecto en el servidor. Si en local abrís el archivo directamente (file://), la raíz es la unidad de disco (C:/). En un servidor, la raíz es la carpeta public_html o htdocs. Para desarrollo local, usá un servidor local (Live Server en VS Code, npx serve, o XAMPP) en lugar de abrir el archivo directamente.
¿Qué es un enlace roto y cómo evitarlo?
Un enlace roto es un <a href="..."> que apunta a una URL que no existe (error 404). Para evitarlo: 1) verificá los enlaces antes de publicar, 2) usá rutas relativas con cuidado cuando movás archivos, 3) implementá redirecciones 301 en el servidor para URLs que cambiaron, y 4) usá herramientas como Google Search Console que detectan enlaces rotos automáticamente.
🔗 ¿Querés saber más sobre enlaces y navegación? Profundizá en Elementos y etiquetas en HTML y aprendé todos los atributos disponibles para la etiqueta <a>.