Encodage UTF-8
UTF signifie Unicode Transformation Format. Le « 8 » indique qu'il utilise des blocs de 8 bits pour représenter un caractère.
Chaque caractère que vous tapez sur une page web — une simple lettre latine, un é accentué, un π grec, le signe euro € ou un emoji — doit être converti en octets avant de pouvoir être stocké ou transmis sur le réseau. Les règles qui associent les caractères aux octets sont appelées un encodage de caractères. Unicode est le catalogue universel qui attribue un numéro unique à chaque caractère (un point de code), et UTF-8 est l'encodage qui écrit ces points de code sous forme d'octets. En tant qu'auteur HTML, utiliser le bon encodage est ce qui vous sépare du redouté « mojibake » — une sortie illisible comme é là où devrait apparaître un é. Cette page explique ce qu'est UTF-8, comment le déclarer, comment insérer n'importe quel caractère Unicode par son point de code, et inclut un tableau de référence des plages Unicode courantes.
Chapitres connexes : Les Entités HTML liste les raccourcis nommés comme
©et&, et Les Jeux de Caractères HTML explique comment Unicode, UTF-8 et le jeu de caractères du document sont liés.
Qu'est-ce que UTF-8 ?
Le format de transformation Unicode en 8 bits, appelé UTF-8, est un encodage de caractères à largeur variable capable d'encoder les 1 114 112 points de code valides d'Unicode avec un à quatre octets de 8 bits. Le chiffre « 8 » signifie que des blocs de 8 bits sont utilisés par UTF pour représenter un caractère.
Depuis 2009, UTF-8 est l'encodage dominant pour le World Wide Web, et il est aujourd'hui utilisé par l'écrasante majorité de toutes les pages web.
Déclarer l'Encodage en HTML
Un navigateur ne peut pas deviner de manière fiable quel encodage utilisent vos octets, vous devez donc toujours le lui indiquer. En HTML5, cela se fait avec une seule balise <meta>, placée comme premier élément à l'intérieur de <head> (dans les 1024 premiers octets du document) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UTF-8 example</title>
</head>
<body>
<p>Prices: €10 · Greek letter: π · Smiley: 😀</p>
</body>
</html>Enregistrez le fichier en UTF-8 dans votre éditeur et déclarez <meta charset="UTF-8">, et les deux seront en accord. Si <meta charset> est absent, le navigateur tombe en repli sur une supposition (historiquement windows-1252 pour de nombreuses locales occidentales, ou une heuristique), ce qui est exactement la manière dont le texte illisible apparaît. Apprenez-en plus dans le chapitre La balise HTML <meta>.
Pourquoi la Déclaration Doit Apparaître Tôt
Un navigateur n'attend pas que l'intégralité du fichier HTML soit arrivée avant de commencer à travailler — il commence à décoder les octets en caractères dès que le premier fragment est reçu. Pour cela, il doit choisir un encodage avant d'avoir lu l'intégralité du document. La spécification HTML exige donc que <meta charset> apparaisse dans les 1024 premiers octets, afin que le navigateur puisse le trouver lors de cette passe initiale.
Si vous déclarez l'encodage trop tard (par exemple, après un long bloc de commentaires ou de contenu), le navigateur aura déjà décodé les octets précédents en utilisant sa supposition de repli. Ces octets sont mal interprétés, et au moment où la déclaration tardive est trouvée, la page peut nécessiter un re-parsing complet — ou afficher simplement du texte illisible. Garder <meta charset="UTF-8"> comme tout premier enfant de <head> garantit qu'il est vu à temps.
Utiliser les Points de Code Unicode en HTML
Vous n'avez pas besoin de taper directement un caractère exotique pour l'utiliser. Tout point de code Unicode peut être inséré avec une référence de caractère numérique, en décimal (&#NNNN;) ou en hexadécimal (&#xHHHH;). Beaucoup de caractères courants ont également une entité nommée facile à retenir.
Par exemple, le signe euro (point de code U+20AC) peut s'écrire de trois façons équivalentes :
<p>Euro: € € €</p>
<!-- all three render as: € -->La même chose fonctionne pour les lettres de n'importe quel script, comme la lettre majuscule grecque sigma (U+03A3) :
<p>Greek sigma: Σ Σ Σ</p>
<!-- renders as: Σ -->Les références numériques sont utiles pour les caractères difficiles à saisir, ou pour être explicite et éviter toute ambiguïté d'encodage. Pour la liste complète des raccourcis nommés (comme ©, &, <), voir Les Entités HTML.
Références de Caractères Numériques
&#NNN; (décimal) et &#xHHHH; (hexadécimal) désignent tous deux un caractère par son point de code Unicode — le même numéro qu'Unicode lui attribue, simplement écrit dans deux bases différentes. Le x après &# indique que les chiffres sont en hexadécimal. Comme elles référencent directement le point de code, les références numériques fonctionnent pour tous les caractères Unicode, même ceux sans entité nommée.
Par exemple, le cœur noir épais (point de code U+2764, décimal 10084) n'a pas d'entité nommée largement prise en charge, mais vous pouvez quand même l'écrire :
<p>Heart: ❤ and the same in hex: ❤</p>
<!-- both render as: ❤ -->Les zéros en tête sont optionnels, donc ❤ et ❤ sont équivalents. L'hexadécimal est pratique car il correspond à la notation U+.... que l'on voit dans les tableaux Unicode.
Conseil : Pour un aperçu de la façon dont les encodages, les points de code et le jeu de caractères du document s'articulent, voir Les Jeux de Caractères HTML.
Combien d'Octets un Caractère Prend
UTF-8 est à largeur variable : les caractères avec de petits points de code prennent moins d'octets, de sorte que le texte en anglais simple reste compact tout en permettant toute la plage Unicode. La valeur seule du point de code détermine combien d'octets UTF-8 utilise pour lui, selon quatre plages inclusives :
| Plage de points de code | Décimal | Octets | Exemple de caractère |
|---|---|---|---|
| U+0000 – U+007F | 0 – 127 | 1 octet | A (U+0041) |
| U+0080 – U+07FF | 128 – 2047 | 2 octets | é (U+00E9), π (U+03C0) |
| U+0800 – U+FFFF | 2048 – 65535 | 3 octets | € (U+20AC), 中 (U+4E2D) |
| U+10000 – U+10FFFF | 65536 – 1114111 | 4 octets | 😀 (U+1F600) |
- 1 octet (U+0000–U+007F). Ces octets sont identiques aux valeurs ASCII originales, c'est pourquoi tout fichier en ASCII pur est déjà du UTF-8 valide.
- 2 octets (U+0080–U+07FF). Couvre la plupart des lettres latines avec accents, ainsi que le grec, le cyrillique, l'hébreu et l'arabe.
- 3 octets (U+0800–U+FFFF). Inclut la plupart des autres scripts modernes ainsi que de nombreux symboles et caractères CJK (chinois, japonais, coréen). Cette plage va jusqu'à U+FFFF inclus.
- 4 octets (U+10000–U+10FFFF). Contient les scripts moins courants, les caractères historiques et les emojis, jusqu'au point de code Unicode valide le plus élevé, U+10FFFF.
Pourquoi UTF-8 a Conquis le Web
Les anciens encodages tels qu'ASCII, Latin-1 (ISO-8859-1) et Windows-1252 utilisaient chacun un seul octet par caractère, ils ne pouvaient donc représenter que jusqu'à 256 caractères. C'est suffisant pour une langue, mais une page ne peut pas mélanger, par exemple, le français, le russe et le japonais dans un seul fichier. UTF-8 résout ce problème en couvrant chaque caractère Unicode tout en restant rétrocompatible avec ASCII — les 128 premiers points de code correspondent exactement aux mêmes octets uniques. Cette compatibilité, combinée à sa compacité pour le texte anglais, est la raison pour laquelle UTF-8 a supplanté les encodages mono-octet hérités et est devenu la norme du web.
La Marque d'Ordre d'Octet (BOM)
Certains éditeurs ajoutent quelques octets invisibles au tout début d'un fichier UTF-8, appelée une marque d'ordre d'octet (BOM).
Devez-vous Utiliser un BOM en HTML ?
En UTF-8, le BOM est la séquence de trois octets EF BB BF. Il peut servir de signal indiquant qu'un fichier est encodé en UTF-8, mais pour HTML il est inutile et mieux évité : votre déclaration <meta charset="UTF-8"> indique déjà l'encodage, et un BOM parasite peut provoquer des bogues subtils (par exemple, des espaces blancs inattendus avant <!DOCTYPE>, ou des scripts PHP qui émettent une sortie). Si votre éditeur vous offre le choix, enregistrez en « UTF-8 sans BOM ».
Référence des Plages Unicode
La liste ci-dessous présente certains blocs Unicode couramment utilisés, chacun indiqué par sa plage de points de code en décimal et en hexadécimal. La colonne exemple montre un glyphe du bloc.
| Codes de Caractères | Décimal | Hexadécimal | Exemple |
|---|---|---|---|
| C0 Controls and Basic Latin | 0-127 | 0000-007F | A B c 7 ? |
| C1 Controls and Latin-1 Supplement | 128-255 | 0080-00FF | é ñ ü © ÷ |
| Latin Extended-A | 256-383 | 0100-017F | ā Œ ş ž ł |
| Latin Extended-B | 384-591 | 0180-024F | ƀ Ɛ ǎ ǔ |
| Spacing Modifiers | 688-767 | 02B0-02FF | ˆ ˜ ˘ |
| Diacritical Marks | 768-879 | 0300-036F | combining accents |
| Greek and Coptic | 880-1023 | 0370-03FF | α β π Σ Ω |
| Cyrillic Basic | 1024-1279 | 0400-04FF | Д Ж и я ё |
| Cyrillic Supplement | 1280-1327 | 0500-052F | Ҡ ҩ Ӂ |
| Latin Extended Additional | 7680-7935 | 1E00-1EFF | ḅ ẁ ẞ ṩ |
| General Punctuation | 8192-8303 | 2000-206F | — … ‹ › † |
| Currency Symbols | 8352-8399 | 20A0-20CF | € £ ¥ ₽ ₹ |
| Letterlike Symbols | 8448-8527 | 2100-214F | ™ ℃ № ℅ |
| Arrows | 8592-8703 | 2190-21FF | ← ↑ → ↓ ↔ |
| Mathematical Operators | 8704-8959 | 2200-22FF | ∑ √ ∞ ≠ ≤ |
| Box Drawings | 9472-9599 | 2500-257F | ─ │ ┌ ┐ └ |
| Block Elements | 9600-9631 | 2580-259F | ░ ▒ ▓ █ |
| Geometric Shapes | 9632-9727 | 25A0-25FF | ■ ● ▲ ◆ ◇ |
| Miscellaneous Symbols | 9728-9983 | 2600-26FF | ☀ ☂ ★ ☎ ✿ |
| Dingbats | 9984-10175 | 2700-27BF | ✂ ✈ ✉ ✏ ❤ |
| Emoji (Emoticons) | 128512-128591 | 1F600-1F64F | 😀 😂 😍 🙏 😎 |