Encodage URL en HTML

Le charset décide comment le fichier HTML transforme les octets en lettres. L’encodage URL (percent-encoding) est un autre problème : comment les caractères circulent en sécurité à l’intérieur d’une URL — dans les liens, les redirections et les données de requête de formulaire — sans casser la structure propre de l’URL. Espaces, lettres non ASCII et symboles réservés exigent souvent une forme % + hex pour que navigateurs et serveurs s’accordent sur le sens.

Ce qu’est l’encodage URL

Une URL a des caractères réservés qui structurent l’adresse : ? démarre une requête, & sépare les paires, = relie noms et valeurs, # démarre un fragment. Si ces caractères apparaissent comme données dans une valeur, ils doivent être encodés pour ne pas être pris pour de la structure. Les caractères peu sûrs comme les espaces sont aussi encodés pour un transport fiable.

Réponse directe

L’encodage URL remplace un caractère par % suivi de deux chiffres hexadécimaux. L’exemple classique : un espace devient %20. Beaucoup de navigateurs et de formulaires HTML encodent automatiquement les valeurs de requête à l’envoi. Vous avez quand même besoin de l’idée quand vous écrivez à la main des query strings dans href, déboguez un lien cassé, ou lisez une barre d’adresse pleine de codes percent.

Encodages percent courants

Requête encodée dans un lien

Écrire à la main une requête de recherche avec un espace est la démo débutant la plus claire. Encodez l’espace dans la valeur ; laissez seuls les ? et = structurels.

Lire l’exemple

• search.html est le chemin ; gardez des noms de fichiers de chemin simples quand vous les contrôlez
• ?q= démarre un paramètre de requête nommé q
• html%20links est la valeur « html links » avec un espace encodé en %20
• Le texte visible du lien peut rester lisible ; l’encodage appartient à l’URL

Préférez des noms de fichiers propres ; encodez les valeurs

Encoder un nom de fichier de page entier qui contient des espaces est maladroit pour tout le monde. Préférez my-page.html à my page.html. Utilisez le percent-encoding surtout pour les valeurs de requête et les caractères spéciaux dans les URL que vous devez assembler à la main.

Formulaires et navigateurs aident souvent

Quand un utilisateur envoie un formulaire HTML avec method="get", les navigateurs encodent en général les valeurs des champs dans la query string pour vous. Cela n’enlève pas le besoin de comprendre %20 quand vous lisez des journaux, partagez des liens ou écrivez href à la main. Connaître le motif accélère le débogage.

Pas la même chose que les entités HTML

Dans le texte HTML, & est une entité pour le caractère esperluette. Dans une URL, une esperluette qui est donnée peut apparaître comme %26. Outils différents, contextes différents. De même, le charset UTF-8 du fichier concerne le décodage du fichier .html — il ne remplace pas le percent-encoding à l’intérieur des URL.

Non-ASCII dans les URL (note débutant)

Les lettres hors ASCII de base peuvent apparaître comme de plus longues séquences percent dans de vraies adresses. Vous n’avez pas besoin de mémoriser ces tableaux dans cette session. Retenez la règle : quand un caractère est peu sûr ou réservé en tant que donnée, le percent-encoding est la façon dont les URL le portent. Pour les pages d’apprentissage, gardez les requêtes de démo en latin simple plus %20 jusqu’à être à l’aise.

Pratiquer dans votre éditeur

1. Créez un lien dont le href inclut une requête comme ?q=hello%20world.
2. Ouvrez le lien et observez la barre d’adresse.
3. Remplacez %20 par un espace brut dans le source, rechargez, et comparez comment le navigateur normalise ou casse l’URL.
4. Renommez un fichier d’exercice pour utiliser des tirets au lieu d’espaces et mettez à jour les liens en conséquence.
5. Écrivez une valeur de requête qui aurait besoin de %26 si une esperluette faisait partie des données — puis confirmez que vous n’avez pas encodé le & structurel entre les paramètres.

Erreurs fréquentes

• Coller des espaces bruts dans des URL en code sans vérifier le résultat
• Percent-encoder le schéma https:// ou tout le squelette structurel par erreur
• Confondre les entités HTML (&) avec les codes URL (%26)
• Mettre des espaces dans chaque nom de fichier et espérer que l’encodage sauvera la navigation pour toujours
• Encoder les ? / & / = structurels qui doivent rester la syntaxe URL entre les parties

Résumé

• L’encodage URL utilise % plus deux chiffres hex (espace → %20)
• Les caractères réservés et peu sûrs ont besoin d’encodage quand ils sont données
• Préférez des noms de fichiers simples ; encodez les valeurs de requête quand vous les écrivez à la main
• Formulaires et navigateurs encodent souvent automatiquement à l’envoi
• Le percent-encoding n’est pas le même travail que les entités HTML ou le charset de fichier