Saltar al contenido
Programer

Lección 2 de 159 min

Anatomía de una URL

Esquema, host, puerto, ruta, consulta y fragmento: aprende a desmontar cualquier dirección web.

Una URL (Uniform Resource Locator, «localizador uniforme de recursos») es la dirección de algo en la web. En una sola línea de texto le dice al navegador tres cosas: cómo pedirlo, a quién y qué pedir.

Interactivo

Explorador de URLs

Escribe o pega cualquier URL. Pasa el cursor por las partes para ver qué hace cada una.

https://Esquemablog.ejemplo.comHost:8080Puerto/articulos/fundamentosRuta?tema=dns&pagina=2Consulta#comentariosFragmento
Esquemahttps
Indica cómo hablar con el servidor. https es HTTP cifrado con TLS: nadie en el camino puede leer ni modificar los datos.
Hostblog.ejemplo.com
Nombre de la máquina que sirve el recurso; el DNS lo traduce a una IP. Se lee de derecha a izquierda: blog (subdominio) · ejemplo (dominio) · com (dominio de nivel superior, TLD).
Puerto8080
La «puerta» del servidor a la que llamar. Aparece porque no es el puerto por defecto de https (443).
Ruta/articulos/fundamentos
Qué recurso quieres dentro del servidor. Parece una ruta de carpetas, pero es el servidor quien decide qué significa. Segmentos: articulos › fundamentos.
Consulta?tema=dns&pagina=2
Parámetros extra en pares clave=valor, separados por &.
clavevalor (decodificado)
temadns
pagina2
Fragmento#comentarios
Señala una parte del documento, normalmente el id de una sección. Lo usa solo el navegador: nunca se envía al servidor.

Las partes, una a una

  • Esquema (https://): el protocolo que se usará. En la web verás sobre todo https y, cada vez menos, http.
  • Host (blog.ejemplo.com): la máquina a la que preguntar. Puede ser un nombre de dominio o directamente una dirección IP.
  • Puerto (:8080): opcional. Si no aparece, se usa el del esquema, 443 para https y 80 para http.
  • Ruta (/articulos/fundamentos): qué recurso quieres dentro del servidor.
  • Consulta (?tema=dns&pagina=2): parámetros extra en pares clave=valor. Se usa para búsquedas, filtros o paginación.
  • Fragmento (#comentarios): un punto concreto dentro del documento.

Atención

El fragmento no viaja al servidor. El navegador lo guarda para sí y lo usa, por ejemplo, para desplazarse hasta el elemento con id="comentarios". Por eso cambiar solo el fragmento no recarga la página.

Caracteres especiales: la codificación por porcentaje

Una URL solo admite un conjunto limitado de caracteres. Los espacios, las tildes o la ñ se convierten en secuencias %XX con los bytes de su codificación UTF-8. Así, cómo funciona pasa a ser c%C3%B3mo%20funciona.

Prueba el ejemplo «Con espacios y tildes» del explorador de arriba para verlo. En las consultas que envían los formularios verás a veces + en lugar de %20 para los espacios: es otra codificación, propia de los formularios.

URLs absolutas y relativas

Todo lo que has visto hasta ahora son URLs absolutas: contienen toda la información necesaria. Dentro de una página, sin embargo, los enlaces suelen ser relativos, como /precios o ../contacto. El navegador los completa usando como base la URL de la página en la que estás.

Interactivo

Resolvedor de URLs relativas

Así resuelve el navegador los enlaces relativos de una página.

El navegador irá a

https://ejemplo.com/contacto

Relativa al directorio actual (/blog/); cada ../ sube un nivel.

Pruébalo

En la consola del navegador (F12 → Consola) puedes usar el mismo analizador que este explorador: new URL("../contacto", location.href). Prueba también new URL(location.href).searchParams.

Comprueba lo aprendido

Cuestionario

Responde las 4 preguntas para completar la lección.

  1. 1.En https://tienda.ejemplo.com/zapatos?talla=42#opiniones, ¿cuál es el host?

  2. 2.¿Qué parte de una URL nunca se envía al servidor?

  3. 3.¿A qué puerto se conecta el navegador al abrir https://ejemplo.com?

  4. 4.Estás en https://ejemplo.com/blog/post-1 y pulsas un enlace con href="../contacto". ¿Adónde vas?