Charset HTML

Les liens favicon indiquent au navigateur quelle petite image afficher dans l’onglet. Le charset répond à une question plus fondamentale : comment le navigateur doit-il transformer les octets de votre fichier HTML en lettres lisibles par des humains ? Quand l’encodage est faux, le persan, l’arabe, le latin accentué, le chinois et les emoji deviennent souvent du mojibake — des séquences illisibles qui semblent cassées alors que le reste du balisage est correct.

Ce que signifie charset

Un jeu de caractères (et son encodage) fait correspondre des octets sur le disque à des caractères. Les fichiers HTML sont des flux d’octets. Sans règle de décodage correcte, le navigateur peut se tromper. Déclarer UTF-8 dans head est l’habitude moderne du web qui rend le texte multilingue et les symboles fiables entre éditeurs, serveurs et navigateurs.

Réponse directe

Placez <meta charset="UTF-8"> près du haut de head — idéalement dans les 1024 premiers octets du fichier pour que le navigateur apprenne l’encodage tôt. UTF-8 est l’encodage à utiliser pour presque toutes les pages nouvelles. Enregistrez aussi le fichier HTML lui-même en UTF-8 dans votre éditeur. La déclaration et l’enregistrement du fichier doivent être d’accord ; l’un sans l’autre produit encore des caractères cassés.

Déclarer, enregistrer et langue — des rôles différents

Une démo UTF-8 multilingue

Un document court montre le charset en action. La meta vient en premier dans head, puis un titre, puis du texte de body qui mélange des écritures.

Lecture de l’exemple

• <meta charset="UTF-8"> est tôt dans head, avant la plupart du reste du contenu
• lang="en" nomme une langue principale pour les outils ; cela ne remplace pas charset
• Le paragraphe inclut du latin, du persan, de l’arabe, du chinois et un emoji — tout va bien sous UTF-8 quand le fichier est enregistré correctement
• Si ces caractères cassent, vérifiez l’encodage à l’enregistrement avant de réécrire la structure HTML

Pourquoi placer charset tôt

Les navigateurs commencent à lire le fichier depuis le haut. Si charset n’apparaît qu’après un gros bloc de texte ou de scripts, certains caractères peuvent déjà avoir été interprétés avec une mauvaise hypothèse. Gardez la meta près de l’ouverture de head. Dans les head de départ des sessions précédentes, charset était volontairement en premier pour cette raison.

Mojibake : le symptôme d’un désaccord

Le mojibake ressemble à de la ponctuation aléatoire, à des restes latins, ou à des caractères de remplacement là où de vrais mots devraient apparaître. Causes courantes : déclarer UTF-8 alors que le fichier a été enregistré dans un encodage ancien, ou omettre charset et espérer que le navigateur devine juste. Corrigez la paire d’encodage — meta plus enregistrement fichier — plutôt que de « réparer » les lettres en retapant sans fin.

lang n’est pas charset

L’attribut lang sur html (et parfois sur des éléments précis) aide les lecteurs d’écran, la coupure de mots et les outils de recherche à comprendre la langue. Charset gère le décodage des octets. Vous voulez en général les deux : lang pour l’identité de langue, charset pour l’encodage. Ne retirez pas charset parce que vous avez déjà mis lang="fa" ou lang="ar".

Serveurs et déploiements réels (note débutant)

Les serveurs de production peuvent aussi envoyer un charset Content-Type dans les en-têtes HTTP. Pour ce cours, maîtrisez d’abord la meta HTML et l’habitude d’enregistrer en UTF-8. Quand un site en ligne contredit votre meta, demandez à un mentor de vérifier les en-têtes — mais la plupart des problèmes en pratique locale viennent de l’encodage à l’enregistrement dans l’éditeur ou d’une meta manquante.

Pratiquer dans votre éditeur

1. Créez une page avec <meta charset="UTF-8"> en haut de head.
2. Ajoutez une phrase qui inclut des lettres non anglaises et un emoji.
3. Confirmez que la barre d’état de l’éditeur indique UTF-8, puis enregistrez.
4. Ouvrez la page dans un navigateur et confirmez que les caractères s’affichent correctement.
5. (Optionnel, avec précaution) Enregistrez une copie dans un encodage ancien, rouvrez, et observez le mojibake — puis restaurez UTF-8 pour reconnaître ce mode d’échec.

Erreurs faciles

• Oublier meta charset et compter sur la chance du navigateur
• Enregistrer le fichier dans un encodage ancien tout en déclarant UTF-8
• Placer charset meta très tard dans un head énorme
• Confondre charset avec le titre visible de la page ou avec lang
• Supposer que les problèmes d’emoji sont toujours des « bugs HTML » alors que l’encodage est la vraie cause
• « Réparer » le mojibake en supprimant lang au lieu de corriger l’enregistrement UTF-8 + la meta

Résumé

• Charset déclare comment décoder les octets du fichier HTML en caractères
• Utilisez UTF-8 pour presque toutes les pages nouvelles et placez meta charset tôt dans head
• Enregistrez le fichier en UTF-8 pour que déclaration et encodage sur disque correspondent
• lang nomme la langue ; charset nomme l’encodage — des rôles différents
• Le mojibake signifie en général un désaccord d’encodage, pas une balise mystérieuse défaillante