Encodage (charset)

Définition technique

Déclaration de l’encodage des caractères du document, en général dans le <head> : <meta charset="utf-8">. UTF-8 permet de représenter tous les caractères Unicode (accents, symboles, écritures multiples). Le charset doit apparaître tôt dans le document (idéalement dans les 1024 premiers octets) pour que le navigateur interprète correctement le reste. En HTML5, cette meta est la seule suffisante ; en XHTML/HTML4 on pouvait aussi utiliser l’en-tête HTTP Content-Type. Une incohérence entre la déclaration (UTF-8) et l’encodage réel du fichier (ex. Latin-1) provoque des caractères incorrects. Les fichiers doivent être sauvegardés en UTF-8 (sans BOM pour le HTML) et servis avec Content-Type: text/html; charset=utf-8 si possible.

Comment ça fonctionne ?

Une balise <meta charset="utf-8"> placée tôt dans le <head> (idéalement dans les 1024 premiers octets) indique au navigateur comment interpréter les octets du document. Les fichiers doivent être sauvegardés en UTF-8 pour correspondre à cette déclaration.

L'erreur classique à éviter

Déclarer UTF-8 alors que les fichiers sont en Latin-1 (ou l'inverse), ce qui produit des caractères cassés. Oublier la meta charset sur des pages générées dynamiquement ou des templates.

Impact business : pourquoi s'en soucier ?

Un mauvais encodage ou une déclaration absente provoque des caractères cassés (é au lieu de é, etc.). Problème fréquent sur des vieux CMS ou des exports mal configurés. Pour un site en français ou multilingue, UTF-8 est la norme ; toute déviation dégrade la crédibilité et l’accessibilité. Les erreurs d’affichage nuisent à la confiance et peuvent faire douter de la qualité technique du site. Vérifier le charset est une des premières étapes en cas de bug d’affichage.

La règle d'or

Toujours mettre <meta charset="utf-8"> en tête du <head>. Enregistrer tous les fichiers (HTML, CSS, JS) en UTF-8 sans BOM. Vérifier les en-têtes HTTP du serveur si les problèmes persistent.

La théorie c'est bien, la pratique c'est mieux. Découvrez comment j'applique le Encodage (charset) dans mes projets.

Découvrir l'expertise Création de site web

Le Prompt Expert (Copier-Coller dans Claude / Cursor)

Contexte : problème d’affichage [exemple : é au lieu de é], stack [CMS / framework]. Liste les causes possibles (meta charset absente ou incorrecte, fichier sauvegardé en Latin-1, double encodage, BOM). Pour chaque cause, donne la correction (HTML, en-têtes HTTP, export/sauvegarde). Donne la ligne <meta> exacte et, si applicable, l’en-tête HTTP à configurer.

FAQ

Ne vous perdez pas dans le code. Je m'occupe de la technique, concentrez-vous sur vos clients.

En parler ensemble