HTML
URLs, rutas relativas y fragmentos
Cómo se resuelven las URLs en HTML, diferencias entre rutas absolutas y relativas, uso de fragmentos y efectos de la URL base del documento.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
HTML
Cómo se resuelven las URLs en HTML, diferencias entre rutas absolutas y relativas, uso de fragmentos y efectos de la URL base del documento.
https://example.com:443/products?id=10#details
└scheme └host └path └query └fragmentNo todos los componentes aparecen en toda URL.
<a href="https://example.com/portfolio">Portfolio</a>Incluye scheme y host.
<a href="/portfolio">Portfolio</a>
<img src="/images/avatar.webp" alt="">Comienza en la raíz del origen actual.
Documento:
https://example.com/blog/html/index.html<a href="forms.html">...</a>se resuelve dentro del directorio actual.
<a href="../css/">...</a>sube un segmento.
/docs
/docs/Pueden representar recursos diferentes para el servidor y cambian cómo se resuelven relativos.
Desde /docs, guide puede resolver como /guide; desde /docs/, como /docs/guide.
Define una política de URLs y redirects coherente.
<a href="/search?q=html&page=2">Página 2</a>Los parámetros deben codificarse correctamente. No concatenes entrada arbitraria sin URL o URLSearchParams en JavaScript.
En HTML, & dentro de atributos puede escribirse como & para evitar ambigüedad:
<a href="/search?q=html&page=2">Página 2</a><a href="#forms">Formularios</a>
<section id="forms">...</section>El fragmento identifica una parte del recurso y no se envía normalmente al servidor en una solicitud HTTP.
Evita espacios y caracteres difíciles en IDs enlazables:
<h2 id="native-validation">Validación nativa</h2>Un ID puede contener más caracteres de los que suelen usarse, pero una convención simple mejora URLs, CSS y mantenimiento.
Los navegadores pueden soportar fragment directives que resaltan texto:
#:~:text=fragmentoEs una capacidad del navegador y URL, no un ID declarado por el autor. No dependas de ella como navegación principal estable.
<base href="https://example.com/app/">Cambia la resolución de todos los relativos posteriores y puede afectar también fragment links:
<a href="#contact">...</a>puede navegar usando la base externa. Revisa con cuidado.
<script src="//cdn.example.com/app.js"></script>Hereda el scheme actual. En sitios HTTPS modernos suele ser más claro escribir https:// y controlar el origen explícitamente.
<img src="data:image/svg+xml,..." alt="">Embeben datos dentro de la URL. Pueden aumentar HTML, dificultar caching separado, CSP y debugging. Úsalas solo cuando el beneficio está medido.
blob:https://example.com/...Se crean en runtime mediante JavaScript y tienen ciclo de vida. HTML puede consumirlas, pero su creación y revocación pertenecen a APIs del navegador.
<a href="mailto:hello@example.com">Correo</a>
<a href="tel:+573001234567">Llamar</a>No siempre producen una navegación web; delegan al handler del dispositivo.
<a href="#main-content">Saltar al contenido</a>Actualiza fragmento e historial según la navegación. CSS :target puede estilizar el destino.
No aceptes una URL externa sin validar el scheme y el origen cuando se utiliza para redirect, iframe o navegación sensible.
javascript:
data:
https:No todos los schemes son equivalentes. href="javascript:..." mezcla código con navegación y debe evitarse.
<nav aria-label="Contenido de la guía">
<ol>
<li><a href="#syntax">Sintaxis</a></li>
<li><a href="#semantics">Semántica</a></li>
<li><a href="#forms">Formularios</a></li>
</ol>
</nav>javascript: en href./path comienza en la raíz del origen.¿Por qué guide.html puede resolver distinto desde /docs y /docs/?
Porque la primera URL puede tratar docs como el último recurso y reemplazarlo; la segunda establece docs/ como directorio base.
Relaciones de enlace, target, download y referrerpolicy configura cómo se navega y qué relación existe entre recursos.