Codificação URL em HTML

O charset decide como o arquivo HTML transforma bytes em letras. A codificação URL (percent-encoding) é outro problema: como os caracteres viajam com segurança dentro de uma URL — em links, redirecionamentos e dados de consulta de formulário — sem quebrar a própria estrutura da URL. Espaços, letras não ASCII e símbolos reservados muitas vezes precisam da forma % + hex para que navegadores e servidores concordem no significado.

O que é codificação URL

Uma URL tem caracteres reservados que estruturam o endereço: ? inicia uma consulta, & separa pares, = une nomes a valores, # inicia um fragmento. Se esses caracteres aparecerem como dados dentro de um valor, devem ser codificados para não serem confundidos com estrutura. Caracteres inseguros como espaços também são codificados para transporte confiável.

Resposta direta

A codificação URL substitui um caractere por % seguido de dois dígitos hexadecimais. O exemplo clássico: um espaço vira %20. Muitos navegadores e formulários HTML codificam valores de consulta automaticamente no envio. Você ainda precisa da ideia ao escrever query strings em href à mão, depurar um link quebrado ou ler uma barra de endereço cheia de códigos percent.

Codificações percent comuns

Consulta codificada em um link

Escrever à mão uma consulta de busca com um espaço é a demo mais clara para iniciantes. Codifique o espaço no valor; deixe os ? e = estruturais em paz.

Lendo o exemplo

• search.html é o caminho; mantenha nomes de arquivo de caminho simples quando você os controla
• ?q= inicia um parâmetro de consulta chamado q
• html%20links é o valor “html links” com um espaço codificado como %20
• O texto visível do link pode permanecer legível; a codificação pertence à URL

Prefira nomes de arquivo limpos; codifique valores

Codificar um nome de arquivo de página inteiro que contém espaços é desajeitado para todos. Prefira my-page.html a my page.html. Use percent-encoding principalmente para valores de consulta e caracteres especiais em URLs que você precisa montar à mão.

Formulários e navegadores muitas vezes ajudam

Quando um usuário envia um formulário HTML com method="get", os navegadores tipicamente codificam os valores dos campos na query string por você. Isso não remove a necessidade de entender %20 ao ler logs, compartilhar links ou escrever href à mão. Conhecer o padrão torna a depuração mais rápida.

Não é o mesmo que entidades HTML

No texto HTML, & é uma entidade para o caractere e comercial. Em uma URL, um e comercial que é dado pode aparecer como %26. Ferramentas diferentes, contextos diferentes. Da mesma forma, o charset UTF-8 do arquivo é sobre decodificar o arquivo .html — não substitui o percent-encoding dentro de URLs.

Não ASCII em URLs (nota para iniciantes)

Letras fora do ASCII básico podem aparecer como sequências percent mais longas em endereços reais. Você não precisa memorizar essas tabelas nesta sessão. Lembre a regra: quando um caractere é inseguro ou reservado como dado, o percent-encoding é como as URLs o carregam. Em páginas de aprendizado, mantenha consultas de demo em latim simples mais %20 até se sentir confortável.

Pratique no seu editor

1. Crie um link cujo href inclua uma consulta como ?q=hello%20world.
2. Abra o link e observe a barra de endereço.
3. Troque %20 por um espaço bruto no código-fonte, recarregue e compare como o navegador normaliza ou quebra a URL.
4. Renomeie um arquivo de prática para usar hífens em vez de espaços e atualize os links conforme isso.
5. Escreva um valor de consulta que precisaria de %26 se um e comercial fizesse parte dos dados — depois confirme que você não codificou o & estrutural entre parâmetros.

Erros fáceis

• Colar espaços brutos em URLs no código sem verificar o resultado
• Percent-codificar o esquema https:// ou todo o esqueleto estrutural por engano
• Confundir entidades HTML (&) com códigos URL (%26)
• Colocar espaços em todo nome de arquivo e esperar que a codificação salve a navegação para sempre
• Codificar ? / & / = estruturais que devem permanecer como sintaxe URL entre as partes

Resumo

• A codificação URL usa % mais dois dígitos hex (espaço → %20)
• Caracteres reservados e inseguros precisam de codificação quando são dados
• Prefira nomes de arquivo simples; codifique valores de consulta quando os escrever à mão
• Formulários e navegadores muitas vezes codificam automaticamente no envio
• Percent-encoding não é o mesmo trabalho que entidades HTML ou charset de arquivo