Codificación URL en HTML

El charset decide cómo el archivo HTML convierte bytes en letras. La codificación URL (percent-encoding) es otro problema: cómo viajan los caracteres con seguridad dentro de una URL — en enlaces, redirecciones y datos de consulta de formularios — sin romper la propia estructura de la URL. Los espacios, las letras no ASCII y los símbolos reservados a menudo necesitan la forma % + hex para que navegadores y servidores coincidan en el significado.

Qué es la codificación URL

Una URL tiene caracteres reservados que estructuran la dirección: ? inicia una consulta, & separa pares, = une nombres a valores, # inicia un fragmento. Si esos caracteres aparecen como datos dentro de un valor, deben codificarse para no confundirse con la estructura. Los caracteres inseguros como los espacios también se codifican para un transporte fiable.

Respuesta directa

La codificación URL sustituye un carácter por % seguido de dos dígitos hexadecimales. El ejemplo clásico: un espacio se convierte en %20. Muchos navegadores y formularios HTML codifican los valores de consulta automáticamente al enviar. Aun así necesitas la idea cuando escribes cadenas de consulta en href a mano, depuras un enlace roto o lees una barra de direcciones llena de códigos percent.

Codificaciones percent habituales

Consulta codificada en un enlace

Escribir a mano una búsqueda con un espacio es la demo más clara para principiantes. Codifica el espacio en el valor; deja solos los ? y = estructurales.

Lectura del ejemplo

• search.html es la ruta; mantén simples los nombres de archivo de la ruta cuando los controlas
• ?q= inicia un parámetro de consulta llamado q
• html%20links es el valor «html links» con un espacio codificado como %20
• El texto visible del enlace puede seguir siendo legible; la codificación pertenece a la URL

Prefiere nombres de archivo limpios; codifica valores

Codificar un nombre de archivo de página entero que contiene espacios es incómodo para todos. Prefiere my-page.html a my page.html. Usa percent-encoding sobre todo para valores de consulta y caracteres especiales dentro de URLs que debes armar a mano.

Formularios y navegadores suelen ayudar

Cuando un usuario envía un formulario HTML con method="get", los navegadores suelen codificar los valores de los campos en la cadena de consulta por ti. Eso no elimina la necesidad de entender %20 al leer registros, compartir enlaces o escribir href a mano. Conocer el patrón acelera la depuración.

No es lo mismo que las entidades HTML

En el texto HTML, & es una entidad para el carácter ampersand. En una URL, un ampersand que es dato puede aparecer como %26. Herramientas distintas, contextos distintos. Igualmente, el charset de archivo UTF-8 trata de decodificar el archivo .html — no sustituye el percent-encoding dentro de las URLs.

No ASCII en URLs (nota para principiantes)

Las letras fuera del ASCII básico pueden aparecer como secuencias percent más largas en direcciones reales. No necesitas memorizar esas tablas en esta sesión. Recuerda la regla: cuando un carácter es inseguro o reservado como dato, el percent-encoding es cómo lo llevan las URLs. En páginas de aprendizaje, mantén las consultas de demo en latín simple más %20 hasta sentirte cómodo.

Practica en tu editor

1. Crea un enlace cuyo href incluya una consulta como ?q=hello%20world.
2. Abre el enlace y observa la barra de direcciones.
3. Cambia %20 por un espacio en bruto en el código fuente, recarga y compara cómo el navegador normaliza o rompe la URL.
4. Renombra un archivo de práctica con guiones en lugar de espacios y actualiza los enlaces.
5. Escribe un valor de consulta que necesitaría %26 si un ampersand formara parte de los datos — y confirma que no codificaste el & estructural entre parámetros.

Errores fáciles

• Pegar espacios en bruto en URLs del código sin comprobar el resultado
• Codificar por error el esquema https:// o todo el esqueleto estructural
• Confundir entidades HTML (&) con códigos URL (%26)
• Poner espacios en cada nombre de archivo y esperar que la codificación salve la navegación para siempre
• Codificar ? / & / = estructurales que deben seguir siendo sintaxis de URL entre partes

Resumen

• La codificación URL usa % más dos dígitos hex (espacio → %20)
• Los caracteres reservados e inseguros necesitan codificación cuando son datos
• Prefiere nombres de archivo simples; codifica valores de consulta cuando los escribes a mano
• Formularios y navegadores suelen codificar automáticamente al enviar
• El percent-encoding no es el mismo trabajo que las entidades HTML o el charset de archivo