`charset` et gestion d’Unicode : caractères spéciaux
Utilisez UTF-8 et les entités HTML pour afficher correctement n’importe quel caractère.
`charset` et gestion d’Unicode : caractères spéciaux est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
La déclaration charset
Tout document HTML doit déclarer son encodage des caractères. La norme est UTF-8 : <meta charset="utf-8"> comme tout premier élément de <head>. Sans cette déclaration, le navigateur fait une supposition, qui est souvent incorrecte pour le texte non ASCII.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page</title>Pourquoi UTF-8 ?
UTF-8 encode chaque caractère Unicode : toutes les écritures, tous les émojis et tous les symboles. Il est rétrocompatible avec ASCII (a-z et 0-9 restent codés sur un seul octet) et constitue l'encodage dominant sur le Web moderne : plus de 98 % des pages en 2024 utilisent UTF-8.
L'emplacement est essentiel
La balise meta charset doit apparaître dans les 1 024 premiers octets du document, généralement à la première ligne de <head>. Le navigateur déduit l'encodage à partir de ces octets ; déclarer charset plus tard peut n'avoir aucun effet sur le résultat de cette détection.
Enregistrez les fichiers en UTF-8
La balise meta déclare l'encodage ; votre éditeur doit réellement enregistrer le fichier avec cet encodage. VS Code, IntelliJ et Sublime utilisent tous UTF-8 par défaut dans leurs versions modernes. Les fichiers enregistrés en Windows-1252 ou en ISO-8859-1 produisent des caractères illisibles, même si la balise meta est correcte.
Entités HTML
Les caractères spéciaux de HTML (<, >, &, ") doivent être échappés pour éviter toute confusion lors de l'analyse : < pour <, > pour >, & pour & et " pour ". Dans les valeurs d'attributs, " est obligatoire lorsque la valeur est délimitée par des guillemets doubles.
Références de caractères numériques
Tout caractère Unicode peut être référencé par son point de code : ☃ ou ☃ pour le bonhomme de neige (☃). Utilisez cette forme lorsqu'il est peu pratique de saisir directement le caractère (symboles rares, caractères de contrôle), mais préférez le caractère Unicode littéral si l'éditeur le prend en charge.
Émojis et paires de substituts
Les émojis sont des caractères Unicode situés au-dessus de U+FFFF et sont représentés par des paires de substituts en UTF-16 (l'encodage utilisé dans les chaînes JavaScript). UTF-8 les encode sous forme de séquences de 4 octets. Avec charset="utf-8" défini, les émojis s'affichent nativement, sans entités.
Bugs d'encodage courants
Si "Don't" s'affiche sous la forme "Donât", cela signifie que le fichier est interprété comme du Latin-1 alors qu'il a été enregistré en UTF-8. Pour corriger le problème, enregistrez le fichier en UTF-8 et vérifiez que <meta charset="utf-8"> est présent. Les navigateurs modernes utilisent UTF-8 par défaut uniquement lorsque la balise meta est absente ET que le fichier semble vraisemblablement être en UTF-8.
En-tête HTTP Content-Type
Le serveur peut également déclarer l'encodage via l'en-tête de réponse : Content-Type: text/html; charset=utf-8. L'en-tête est prioritaire sur la balise meta ; un serveur mal configuré peut donc provoquer des problèmes d'encodage même avec un HTML parfaitement écrit.
Utilisation des formulaires
Par défaut, les formulaires sont envoyés avec l'encodage de la page. Les pages UTF-8 envoient les données du formulaire en UTF-8, que le serveur doit décoder comme tel. Une discordance entre l'encodage de la page et le décodage du serveur est une cause fréquente de données utilisateur déformées sur les sites multilingues.
Évitez le BOM
Les fichiers UTF-8 peuvent commencer par une marque d'ordre des octets (BOM, 0xEF 0xBB 0xBF). La plupart des navigateurs la tolèrent, mais certains outils et CDN ne la tolèrent pas ; de plus, le BOM apparaît comme un caractère visible dans certains éditeurs de texte. Enregistrez les fichiers en « UTF-8 sans BOM » pour éviter les mauvaises surprises.
Vérification des connaissances
Pourquoi doit-il apparaître dans les 1 024 premiers octets d'un document HTML ?
Résumé
Déclarez <meta charset="utf-8"> comme premier enfant de <head> et enregistrez les fichiers en UTF-8. UTF-8 encode chaque caractère Unicode, y compris les émojis et toutes les écritures. Échappez <, >, & et ") en tant qu'entités ; utilisez des références numériques pour les caractères rares. Méfiez-vous de l'en-tête HTTP Content-Type, qui peut remplacer la balise meta, et du BOM, qui peut apparaître comme un caractère visible dans certains outils.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « `charset` et gestion d’Unicode : caractères spéciaux » est-elle gratuite ?
Oui — le texte complet de « `charset` et gestion d’Unicode : caractères spéciaux » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « `charset` et gestion d’Unicode : caractères spéciaux » ?
Utilisez UTF-8 et les entités HTML pour afficher correctement n’importe quel caractère. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « `charset` et gestion d’Unicode : caractères spéciaux » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Attribut `lang` et lecteurs d’écran
- `dir=rtl` pour le texte de droite à gauche
- Les éléments `bdi` et `bdo`
- `charset` et gestion d’Unicode : caractères spéciaux