Preguntas frecuentes5 min de lectura

Codificación de espacios en URL: %20 vs + (cuándo usar cada uno)

%20 es la codificación porcentual estándar de RFC 3986 para el carácter de espacio y debe usarse en las rutas de URL y en la mayoría de los contextos. El signo + representa un espacio únicamente en el formato application/x-www-form-urlencoded, empleado en el envío de formularios HTML y en algunas cadenas de consulta.

¿Qué significa %20?

%20 es la representación con codificación porcentual del carácter de espacio (código ASCII 32, hexadecimal 0x20) tal como lo define RFC 3986. Es la forma estándar de representar espacios en cualquier parte de un URI, incluidos los segmentos de ruta, las cadenas de consulta y los identificadores de fragmento.

Cuando ves %20 en una URL, significa simplemente "aquí hay un espacio". Por ejemplo, https://example.com/my%20file.pdf hace referencia a un recurso llamado "my file.pdf". El %20 es comprendido de forma universal por todos los servidores web, navegadores y librerías HTTP.

¿Qué significa + en una URL?

El signo + que representa un espacio proviene del tipo de contenido application/x-www-form-urlencoded, definido en la especificación HTML para codificar datos de formularios. Cuando se envía un formulario HTML mediante el método GET, el navegador codifica los espacios como + en la cadena de consulta resultante.

Por ejemplo, si escribes "hello world" en un formulario de búsqueda y lo envías, el navegador genera una URL como https://example.com/search?q=hello+world. Aquí el + significa "espacio", pero solo porque la cadena de consulta usa el formato form-urlencoded.

Es importante señalar que el + no tiene ningún significado especial fuera del formato application/x-www-form-urlencoded. En una ruta de URL como /files/my+file.pdf, el + es un signo más literal, no un espacio. El archivo al que se hace referencia se llama literalmente "my+file.pdf".

La diferencia clave

La diferencia fundamental es la especificación a la que pertenece cada uno. %20 está definido por RFC 3986 (URIs) y funciona en cualquier parte de una URL. La convención de + como espacio está definida por la especificación HTML/WHATWG para datos de formularios y solo funciona en cadenas de consulta que se tratan explícitamente como datos form-urlencoded.

  • %20 funciona en rutas, cadenas de consulta, fragmentos y en todos los contextos de un URI
  • + solo significa "espacio" en cadenas de consulta application/x-www-form-urlencoded
  • En las rutas de URL, + es un signo más literal, no un espacio
  • %20 siempre es seguro; + depende del contexto
  • Si codificas un + literal en datos de formulario, se convierte en %2B

¿Cuál deberías usar?

Usa %20 al construir URLs mediante código, al crear peticiones a una API REST, al codificar segmentos de ruta o siempre que tengas dudas. Es la codificación universalmente correcta para los espacios en un URI.

Usa + únicamente cuando produzcas de forma intencionada datos application/x-www-form-urlencoded, como al construir cadenas de consulta que imitan el envío de formularios HTML, o cuando una API requiera explícitamente este formato.

La mayoría de las APIs y frameworks modernos aceptan tanto %20 como + en las cadenas de consulta. Sin embargo, usar %20 es más portable y evita ambigüedades, sobre todo cuando la cadena de consulta puede utilizarse en contextos ajenos al envío de formularios.

Cómo manejan los espacios los distintos lenguajes

Los distintos lenguajes de programación y sus librerías estándar pueden usar de forma predeterminada %20 o + para codificar espacios. Conocer el comportamiento por defecto de tu lenguaje te ayuda a evitar sorpresas.

// JavaScript
encodeURIComponent('hello world');  // "hello%20world" (%20)
new URLSearchParams({q: 'hello world'}).toString();  // "q=hello+world" (+)

// Para forzar %20 en las cadenas de consulta:
new URLSearchParams({q: 'hello world'}).toString().replace(/\+/g, '%20');
# Python
from urllib.parse import quote, quote_plus, urlencode

quote('hello world', safe='')    # "hello%20world" (%20)
quote_plus('hello world')        # "hello+world" (+)
urlencode({'q': 'hello world'})  # "q=hello+world" (+ por defecto)

# Para forzar %20:
urlencode({'q': 'hello world'}, quote_via=quote)  # "q=hello%20world"
// PHP
rawurlencode('hello world');  // "hello%20world" (%20)
urlencode('hello world');     // "hello+world" (+)

// rawurlencode sigue RFC 3986
// urlencode sigue application/x-www-form-urlencoded

Artículos relacionados

Prueba nuestras herramientas gratuitas