Localizadores Uniformes de Recursos HTML
Un Localizador Uniforme de Recursos (URL) es una referencia a un recurso web. Aprende sobre URL, su sintaxis y codificación.
Un Localizador Uniforme de Recursos (URL), comúnmente llamado dirección web, es una referencia a un recurso web que especifica su ubicación en la red informática y un mecanismo para recuperarlo. Una URL es un tipo especial de Identificador Uniforme de Recursos (URI), aunque a veces estos dos términos se usan de forma intercambiable. En la mayoría de los navegadores web, la URL de una página web se muestra sobre la página en una barra de direcciones.
Una URL puede estar compuesta de palabras o de una dirección de Protocolo de Internet (IP). En general, los usuarios escriben el nombre porque es más fácil de recordar que los números.
Esta página explica la anatomía de una URL, cómo se comportan las URL absolutas y relativas dentro de los atributos HTML, cómo funcionan las partes de consulta y fragmento, la codificación de URL y los esquemas que encontrarás con más frecuencia.
Sintaxis de URL
La sintaxis general de una dirección web completa es:
scheme://host:port/path?query#fragmentAnatomía de una URL
Según RFC 3986 — la especificación que define las URL — una URL tiene los componentes que se muestran a continuación. No existe un componente separado para "nombre de archivo": el nombre de archivo es simplemente el último segmento de la ruta.
| Componente | Lo que especifica |
|---|---|
| scheme | El protocolo o tipo de servicio a utilizar, como http, https o mailto. |
| host | El nombre de dominio (por ejemplo www.w3docs.com) o la dirección IP del servidor. |
| port | El número de puerto en el host. Es opcional; 80 es el predeterminado para http y 443 para https. |
| path | La ubicación del recurso en el servidor, incluidas las carpetas y el nombre de archivo. Si se omite, se utiliza la raíz del servidor (/). |
| query | Parámetros opcionales pasados al recurso, escritos como pares key=value. |
| fragment | Un identificador opcional (ancla) que apunta a una parte específica del recurso. |
Una URL completa, desglosada
Considera esta dirección:
https://www.w3docs.com:443/learn-html/page.html?tab=1#introEstá compuesta por estas partes:
| Parte | Valor | Significado |
|---|---|---|
| scheme | https | Usar el protocolo HTTP seguro. |
| host | www.w3docs.com | El servidor al que conectarse. |
| port | 443 | El puerto en el servidor (443 es el predeterminado para https, por lo que normalmente se omite). |
| path | /learn-html/page.html | La carpeta y el archivo a solicitar. |
| query | tab=1 | Un parámetro enviado al recurso. |
| fragment | intro | Desplazarse al elemento con id="intro" después de que se cargue la página. |
URL Absolutas vs. Relativas
En HTML, una URL puede escribirse de forma completa (absoluta) o en forma parcial (relativa). Para una URL relativa, el navegador completa las partes que faltan — esquema, host y el directorio base — a partir de la URL de la página actual.
Esto importa en cualquier lugar donde hagas referencia a otro recurso: en enlaces <a href>, imágenes <img src> y hojas de estilo <link href>.
Supón que la página actual es https://example.com/learn-html/page.html:
| En el documento | Se resuelve en | Tipo |
|---|---|---|
href="https://example.com/page" | https://example.com/page | Absoluta |
href="/path/page" | https://example.com/path/page | Relativa a la raíz (comienza en la raíz del host) |
href="../sibling" | https://example.com/sibling | Relativa (sube una carpeta) |
href="page2.html" | https://example.com/learn-html/page2.html | Relativa (misma carpeta) |
<!-- Absolute URL: includes the scheme and host -->
<a href="https://example.com/page">External page</a>
<!-- Root-relative: starts at the site root -->
<img src="/images/logo.png" alt="Logo" />
<!-- Relative: relative to the current page's folder -->
<link rel="stylesheet" href="../css/style.css" />Usa URL relativas para enlazar dentro de tu propio sitio (siguen funcionando si el sitio se mueve a un nuevo dominio) y URL absolutas para apuntar a recursos externos. Consulta HTML Links para más información sobre los enlaces.
El Componente de Consulta
La cadena de consulta viene después de un ? y lleva datos al recurso como pares key=value. Varios parámetros se unen con &:
https://www.w3docs.com/search?q=html&page=2Aquí q=html y page=2 son dos parámetros separados. Los servidores (y JavaScript) leen estos valores para decidir qué devolver — por ejemplo, un término de búsqueda y un número de página.
El Fragmento (Ancla)
El fragmento viene después de un # y apunta a una parte específica de una página. El navegador se desplaza al elemento cuyo id coincide con el fragmento. Es gestionado completamente por el navegador y nunca se envía al servidor.
<!-- Links to the element with id="section2" on the same page -->
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">Section 2</h2>Codificación de URL
Las URL solo pueden transmitirse por Internet utilizando el conjunto de caracteres ASCII. Si una URL contiene caracteres fuera de ese conjunto — o caracteres que tienen un significado especial en una URL — esos caracteres deben codificarse.
En la codificación de URL (también llamada codificación porcentual) un carácter se reemplaza por un % seguido de su valor hexadecimal de dos dígitos. Las URL no pueden contener espacios, por lo que un espacio se convierte en %20 (o, en cadenas de consulta, un signo +):
Before: https://www.w3docs.com/search?q=hello world
After: https://www.w3docs.com/search?q=hello%20worldLos caracteres reservados como ?, &, =, # y / tienen un significado estructural en una URL, por lo que cuando aparecen dentro de un valor también deben codificarse en porcentaje (por ejemplo, & se convierte en %26). Algunos reemplazos comunes:
| Carácter | Codificado |
|---|---|
| espacio | %20 |
& | %26 |
# | %23 |
? | %3F |
= | %3D |
Esquemas Comunes
El esquema indica al navegador qué protocolo o servicio utilizar. Los más comunes se muestran a continuación.
| Esquema | Usado para |
|---|---|
http | Páginas web comunes (sin cifrado). |
https | Páginas web seguras (cifradas). El estándar para la web moderna. |
mailto: | Abre el cliente de correo electrónico del usuario, p. ej. mailto:[email protected]. |
tel: | Inicia una llamada telefónica en dispositivos compatibles, p. ej. tel:+15551234567. |
data: | Incorpora recursos en línea pequeños, p. ej. una imagen en base64. |
ftp | Descarga o carga de archivos. |
file | Un archivo en el equipo local. |
<a href="mailto:[email protected]">Email us</a>
<a href="tel:+15551234567">Call us</a>Por razones de seguridad, los navegadores modernos restringen los esquemas ftp: y file:: la compatibilidad con ftp: se ha eliminado de la mayoría de los navegadores, y los enlaces file: a archivos locales generalmente no funcionan desde una página servida a través de http/https.