0Pricing
HTML Academy · Lección

URL absolutas frente a relativas

Comprenda la diferencia entre rutas absolutas y relativas.

URL absolutas frente a relativas es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué es una URL?

Una URL (Uniform Resource Locator) es la dirección completa de un recurso en la web.

Una URL consta de estas partes:

https://example.com:443/products/widget?color=red#reviews
│     │           │   │               │          │
│     │           │   │               │          └─ Fragment
│     │           │   │               └─ Query string
│     │           │   └─ Path
│     │           └─ Port
│     └─ Domain
└─ Protocol

URL absolutas

Una URL absoluta contiene la dirección completa: protocolo, dominio y ruta:

<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">

<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->

URL relativas

Una URL relativa es relativa a la ubicación de la página actual; no necesita protocolo ni dominio:

<!-- Current page: https://example.com/blog/post.html -->

<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->

<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->

<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->

Tres tipos de URL relativas

Las URL relativas tienen tres formas:

<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>

<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>

<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">

Navegación con ../ --

Utilice ../ para subir un nivel de directorio:

<!-- File structure:
/
├── index.html
├── about.html
└── blog/
    ├── post1.html
    └── post2.html
-->

<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a>          <!-- same folder -->
<a href="../">Home</a>                   <!-- up one level -->
<a href="../about.html">About</a>        <!-- up then file -->

Cuándo usar URL absolutas o relativas

Regla general:

  • Recursos externos: siempre absolutos: https://...
  • Recursos de CDN: absolutos o relativos al protocolo
  • Navegación interna: las URL relativas a la raíz (/page) son la opción más segura
  • Mismo directorio: las URL relativas (page.html) son prácticas

Las URL relativas a la raíz son portables

Las URL relativas a la raíz (/path) siguen funcionando aunque se muevan las páginas:

<!-- If this page moves from /blog/post.html to /articles/post.html -->

<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a>  <!-- always → example.com/contact -->

<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a>  <!-- different result in new location -->

El elemento base

El elemento <base> de <head> establece la URL base de todos los enlaces relativos:

<head>
  <base href="https://example.com/docs/">
</head>
<body>
  <!-- This resolves to: https://example.com/docs/guide.html -->
  <a href="guide.html">Guide</a>
</body>

Codificación de URL

Los caracteres especiales de las URL deben estar codificados como porcentajes:

<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>

<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>

<!-- Common encodings:
  space → %20
  & → %26
  = → %3D
  # → %23
-->

URL canónicas

Cuando se puede acceder a una página mediante varias URL, utilice una etiqueta canónica para declarar cuál es la preferida:

<head>
  <!-- Prevents duplicate content SEO penalty -->
  <link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->

Buenas prácticas para las URL

Siga estas convenciones para las URL:

  • Utilice solo letras minúsculas
  • Utilice guiones, no guiones bajos, para separar palabras
  • Mantenga las URL cortas y descriptivas
  • Evite los caracteres especiales; codifíquelos
  • Utilice URL relativas a la raíz para los enlaces internos

Comprobación rápida

Tiene un archivo en /blog/post.html y quiere enlazarlo con /about.html. ¿Cuál es la URL relativa más segura?

Resumen: URL absolutas y relativas

Resumen de los tipos de URL:

  • Absoluta: URL completa que incluye el protocolo y el dominio
  • Relativa a la raíz: comienza con / y es relativa a la raíz del dominio
  • Relativa: es relativa a la ubicación del archivo actual
  • ../: sube un nivel de directorio
  • <base href>: establece la base de todas las URL relativas

Preguntas frecuentes

¿La lección «URL absolutas frente a relativas» es gratis?

Sí — el texto completo de «URL absolutas frente a relativas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «URL absolutas frente a relativas»?

Comprenda la diferencia entre rutas absolutas y relativas. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «URL absolutas frente a relativas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. El elemento anchor y el atributo href
  2. URL absolutas frente a relativas
  3. Abrir enlaces en pestañas nuevas y el atributo download
  4. Enlaces a secciones e identificadores de fragmento
← Volver a HTML Academy