Codage des caractères HTML : table ISO-8859-1 et UTF-8

Un symbole comme « € » ou « é » peut s’afficher correctement dans un navigateur, ou se transformer en suite de caractères illisibles selon l’encodage utilisé par la page. Ce problème vient presque toujours du même endroit : la page annonce un encodage (ISO-8859-1 ou UTF-8) qui ne correspond pas à la façon dont le caractère a été écrit dans le code source.

Les entités HTML existent justement pour éviter ce genre de souci : plutôt que d’écrire directement un caractère spécial dans le code, on écrit son équivalent sous forme de code, que le navigateur affiche toujours correctement, quel que soit l’encodage déclaré par la page.

ISO-8859-1 ou UTF-8, deux façons d’encoder le texte

L’ISO-8859-1, aussi appelé Latin-1, code chaque caractère sur un seul octet, ce qui limite le jeu de caractères disponibles aux langues d’Europe de l’Ouest. L’UTF-8 code les caractères sur un nombre variable d’octets, ce qui lui permet de couvrir la quasi-totalité des écritures existantes, du cyrillique aux idéogrammes chinois. La quasi-totalité des sites récents utilise l’UTF-8, mais un certain nombre de pages plus anciennes, ou générées par des outils datés, continuent de s’appuyer sur l’ISO-8859-1.

Table des correspondances

Le tableau qui suit reprend, pour chaque caractère courant, le raccourci clavier Windows (le code Alt à taper sur le pavé numérique), le code numérique ISO-8859-1 et l’entité nommée en UTF-8. Ces deux dernières colonnes montrent le code tel qu’il s’écrit dans une page HTML, avec l’esperluette échappée pour qu’il reste lisible ici plutôt que de s’afficher sous sa forme finale. Pour les codes 128 à 158 (guillemets typographiques, tiret cadratin, symbole euro), la norme ISO-8859-1 stricte ne prévoit rien à ces emplacements : ce sont, en théorie, des caractères de contrôle. Dans les faits, les navigateurs appliquent l’encodage Windows-1252 dès qu’une page déclare l’ISO-8859-1, ce qui explique pourquoi ces symboles s’affichent malgré tout correctement.

Symbole	Code clavier	Code ISO-8859-1	Entité UTF-8	Description
espace	Alt+ 0160	&#160 ;	&nbsp ;	Espace insécable
¡	Alt+ 0161	&#161 ;	&iexcl ;	Exclamation inversée
¢	Alt+ 0162	&#162 ;	&cent ;	Symbole centime
£	Alt+ 0163	&#163 ;	&pound ;	Symbole livre
¤	Alt+ 0164	&#164 ;	&curren ;	Symbole monétaire
¥	Alt+ 0165	&#165 ;	&yen ;	Signe Yen
¦	Alt+ 0166	&#166 ;	&brvbar ;	Barre verticale interrompue
§	Alt+ 0167	&#167 ;	&sect ;	Signe section
¨	Alt+ 0168	&#168 ;	&uml ; ou &die ;	Tréma
©	Alt+ 0169	&#169 ;	&copy ;	Copyright
ª	Alt+ 0170	&#170 ;	&ordf ;	Ordinal féminin
«	Alt+ 0171	&#171 ;	&laquo ;	Chevron gauche ou guillemet gauche
¬	Alt+ 0172	&#172 ;	&not ;	Signe non
­	Alt+ 0173	&#173 ;	&shy ;	Tiret conditionnel
®	Alt+ 0174	&#174 ;	&reg ;	Marque déposée
¯	Alt+ 0175	&#175 ;	&macr ;	Macron
°	Alt+ 0176	&#176 ;	&deg ;	Signe degrés
±	Alt+ 0177	&#177 ;	&plusmn ;	Plus ou moins
²	Alt+ 0178	&#178 ;	&sup2 ;	Deux exposant
³	Alt+ 0179	&#179 ;	&sup3 ;	Trois exposant
´	Alt+ 0180	&#180 ;	&acute ;	Accent aigu
µ	Alt+ 0181	&#181 ;	&micro ;	Signe micro
¶	Alt+ 0182	&#182 ;	&para ;	Signe paragraphe
·	Alt+ 0183	&#183 ;	&middot ;	Point milieu
¸	Alt+ 0184	&#184 ;	&cedil ;	Cédille
¹	Alt+ 0185	&#185 ;	&sup1 ;	Un exposant
º	Alt+ 0186	&#186 ;	&ordm ;	Ordinal masculin
»	Alt+ 0187	&#187 ;	&raquo ;	Chevron droit ou guillemet droit
¼	Alt+ 0188	&#188 ;	&frac14 ;	Fraction un quart
½	Alt+ 0189	&#189 ;	&frac12 ;	Fraction un demi
¾	Alt+ 0190	&#190 ;	&frac34 ;	Fraction trois-quarts
¿	Alt+ 0191	&#191 ;	&iquest ;	Point d'interrogation inversé
À	Alt+ 0192	&#192 ;	&Agrave ;	A accent grave majuscule
Á	Alt+ 0193	&#193 ;	&Aacute ;	A accent aigu majuscule
Â	Alt+ 0194	&#194 ;	&Acirc ;	A accent circonflexe majuscule
Ã	Alt+ 0195	&#195 ;	&Atilde ;	A tilde majuscule
Ä	Alt+ 0196	&#196 ;	&Auml ;	A tréma majuscule
Å	Alt+ 0197	&#197 ;	&Aring ;	A anneau majuscule
Æ	Alt+ 0198	&#198 ;	&AElig ;	AE majuscule (digramme soudé ae, lettre)
Ç	Alt+ 0199	&#199 ;	&Ccedil ;	C cédille majuscule
È	Alt+ 0200	&#200 ;	&Egrave ;	E accent grave majuscule
É	Alt+ 0201	&#201 ;	&Eacute ;	E accent aigu majuscule
Ê	Alt+ 0202	&#202 ;	&Ecirc ;	E accent circonflexe majuscule
Ë	Alt+ 0203	&#203 ;	&Euml ;	E tréma majuscule
Ì	Alt+ 0204	&#204 ;	&Igrave ;	I accent grave majuscule
Í	Alt+ 0205	&#205 ;	&Iacute ;	I accent aigu majuscule
Î	Alt+ 0206	&#206 ;	&Icirc ;	I accent circonflexe majuscule
Ï	Alt+ 0207	&#207 ;	&Iuml ;	I tréma majuscule
Ð	Alt+ 0208	&#208 ;	&ETH ;	Eth islandais
Ñ	Alt+ 0209	&#209 ;	&Ntilde ;	N tilde majuscule
Ò	Alt+ 0210	&#210 ;	&Ograve ;	O accent grave majuscule
Ó	Alt+ 0211	&#211 ;	&Oacute ;	O accent aigu majuscule
Ô	Alt+ 0212	&#212 ;	&Ocirc ;	O accent circonflexe majuscule
Õ	Alt+ 0213	&#213 ;	&Otilde ;	O tilde majuscule
Ö	Alt+ 0214	&#214 ;	&Ouml ;	O tréma majuscule
×	Alt+ 0215	&#215 ;	&times ;	Signe de multiplication
Ø	Alt+ 0216	&#216 ;	&Oslash ;	O barré majuscule
Ù	Alt+ 0217	&#217 ;	&Ugrave ;	U accent grave majuscule
Ú	Alt+ 0218	&#218 ;	&Uacute ;	U accent aigu majuscule
Û	Alt+ 0219	&#219 ;	&Ucirc ;	U accent circonflexe majuscule
Ü	Alt+ 0220	&#220 ;	&Uuml ;	U tréma majuscule
Ý	Alt+ 0221	&#221 ;	&Yacute ;	Y accent aigu majuscule
Þ	Alt+ 0222	&#222 ;	&THORN ;	Thorn islandais majuscule
ß	Alt+ 0223	&#223 ;	&szlig ;	s dur allemand (szet)
à	Alt+ 0224	&#224 ;	&agrave ;	a accent grave minuscule
á	Alt+ 0225	&#225 ;	&aacute ;	a accent aigu minuscule
â	Alt+ 0226	&#226 ;	&acirc ;	a accent circonflexe minuscule
ã	Alt+ 0227	&#227 ;	&atilde ;	a tilde minuscule
ä	Alt+ 0228	&#228 ;	&auml ;	a tréma minuscule
å	Alt+ 0229	&#229 ;	&aring ;	a rond minuscule
æ	Alt+ 0230	&#230 ;	&aelig ;	e dans l'a minuscule
ç	Alt+ 0231	&#231 ;	&ccedil ;	c cédille minuscule
è	Alt+ 0232	&#232 ;	&egrave ;	e accent grave minuscule
é	Alt+ 0233	&#233 ;	&eacute ;	e accent aigu minuscule
ê	Alt+ 0234	&#234 ;	&ecirc ;	e accent circonflexe minuscule
ë	Alt+ 0235	&#235 ;	&euml ;	e tréma minuscule
ì	Alt+ 0236	&#236 ;	&igrave ;	i accent grave minuscule
í	Alt+ 0237	&#237 ;	&iacute ;	i accent aigu minuscule
î	Alt+ 0238	&#238 ;	&icirc ;	i accent circonflexe minuscule
ï	Alt+ 0239	&#239 ;	&iuml ;	i tréma minuscule
ð	Alt+ 0240	&#240 ;	&eth ;	eth islandais minuscule
ñ	Alt+ 0241	&#241 ;	&ntilde ;	n tilde minuscule
ò	Alt+ 0242	&#242 ;	&ograve ;	o accent grave minuscule
ó	Alt+ 0243	&#243 ;	&oacute ;	o accent aigu minuscule
ô	Alt+ 0244	&#244 ;	&ocirc ;	o accent circonflexe minuscule
õ	Alt+ 0245	&#245 ;	&otilde ;	o tilde minuscule
ö	Alt+ 0246	&#246 ;	&ouml ;	o tréma minuscule
÷	Alt+ 0247	&#247 ;	&divide ;	Signe division
ø	Alt+ 0248	&#248 ;	&oslash ;	o barré minuscule
ù	Alt+ 0249	&#249 ;	&ugrave ;	u accent grave minuscule
ú	Alt+ 0250	&#250 ;	&uacute ;	u accent aigu minuscule
û	Alt+ 0251	&#251 ;	&ucirc ;	u accent circonflexe minuscule
ü	Alt+ 0252	&#252 ;	&uuml ;	u tréma minuscule
ý	Alt+ 0253	&#253 ;	&yacute ;	y accent aigu minuscule
þ	Alt+ 0254	&#254 ;	&thorn ;	Thorn islandais minuscule
ÿ	Alt+ 0255	&#255 ;	&yuml ;	y tréma minuscule
℗		&#8471 ;		Copyright des enregistrements sonores
« point d’exclamation »	Alt+ 033	&#33 ;		Point d’exclamation
"	Alt+ 034	&#34 ;	&quot ;	Guillemet double
#	Alt+ 035	&#35 ;		# (carré ou dièse)
$	Alt+ 036	&#36 ;		symbole Dollar
%	Alt+ 037	&#37 ;
&amp ;	Alt+ 038	&#38 ;	&amp ;	Et commercial
'	Alt+ 039	&#39 ;		Apostrophe droite (guillemet simple ASCII)
(	Alt+ 040	&#40 ;
)	Alt+ 041	&#41 ;
*	Alt+ 042	&#42 ;
+	Alt+ 043	&#43 ;
,	Alt+ 044	&#44 ;		Virgule
-	Alt+ 045	&#45 ;
.	Alt+ 046	&#46 ;
/	Alt+ 047	&#47 ;		/ (barre oblique) ou "slash"
0	Alt+ 048	&#48 ;
1	Alt+ 049	&#49 ;
2	Alt+ 050	&#50 ;
3	Alt+ 051	&#51 ;
4	Alt+ 052	&#52 ;
5	Alt+ 053	&#53 ;
6	Alt+ 054	&#54 ;
7	Alt+ 055	&#55 ;
8	Alt+ 056	&#56 ;
9	Alt+ 057	&#57 ;
:	Alt+ 058	&#58 ;		Deux points
;	Alt+ 059	&#59 ;		Point-virgule
&lt ;	Alt+ 060	&#60 ;	&lt ;	Signe "inférieur à"
=	Alt+ 061	&#61 ;		Signe "égal"
&gt ;	Alt+ 062	&#62 ;	&gt ;	Supérieur à
?	Alt+ 063	&#63 ;		Point d'interrogation
@	Alt+ 064	&#64 ;		"a" commercial ou "arobase"
A	Alt+ 065	&#65 ;
B	Alt+ 066	&#66 ;
C	Alt+ 067	&#67 ;
D	Alt+ 068	&#68 ;
E	Alt+ 069	&#69 ;
F	Alt+ 070	&#70 ;
G	Alt+ 071	&#71 ;
H	Alt+ 072	&#72 ;
I	Alt+ 073	&#73 ;
J	Alt+ 074	&#74 ;
K	Alt+ 075	&#75 ;
L	Alt+ 076	&#76 ;
M	Alt+ 077	&#77 ;
N	Alt+ 078	&#78 ;
O	Alt+ 079	&#79 ;
P	Alt+ 080	&#80 ;
Q	Alt+ 081	&#81 ;
R	Alt+ 082	&#82 ;
S	Alt+ 083	&#83 ;
T	Alt+ 084	&#84 ;
U	Alt+ 085	&#85 ;
V	Alt+ 086	&#86 ;
W	Alt+ 087	&#87 ;
X	Alt+ 088	&#88 ;
Y	Alt+ 089	&#89 ;
Z	Alt+ 090	&#90 ;
[	Alt+ 091	&#91 ;		Crochet fermant
\	Alt+ 092	&#92 ;		\ (barre oblique inversée) ou "anti-slash"
]	Alt+ 093	&#93 ;		Crochet fermant
^	Alt+ 094	&#94 ;		Accent circonflexe
_	Alt+ 095	&#95 ;		Tiret (signe "moins")
`	Alt+ 096	&#96 ;
a	Alt+ 097	&#97 ;
b	Alt+ 098	&#98 ;
c	Alt+ 099	&#99 ;
d	Alt+ 100	&#100 ;
e	Alt+ 101	&#101 ;
f	Alt+ 102	&#102 ;
g	Alt+ 103	&#103 ;
h	Alt+ 104	&#104 ;
i	Alt+ 105	&#105 ;
j	Alt+ 106	&#106 ;
k	Alt+ 107	&#107 ;
l	Alt+ 108	&#108 ;
m	Alt+ 109	&#109 ;
n	Alt+ 110	&#110 ;
o	Alt+ 111	&#111 ;
p	Alt+ 112	&#112 ;
q	Alt+ 113	&#113 ;
r	Alt+ 114	&#114 ;
s	Alt+ 115	&#115 ;
t	Alt+ 116	&#116 ;
u	Alt+ 117	&#117 ;
v	Alt+ 118	&#118 ;
w	Alt+ 119	&#119 ;
x	Alt+ 120	&#120 ;
y	Alt+ 121	&#121 ;
z	Alt+ 122	&#122 ;
{	Alt+ 123	&#123 ;		Parenthèse ouvrante
|	Alt+ 124	&#124 ;		Barre droite
}	Alt+ 125	&#125 ;		Parenthèse fermante
~	Alt+ 126	&#126 ;		~ (tilde)
	Alt+ 0127
€	Alt+ 0128	&#128 ; ou &#8364 ;	&euro ;	Symbole Euro
	Alt+ 0129
‚	Alt+ 0130	&#130 ;	&sbquo ;	Guillemet simple bas
ƒ	Alt+ 0131	&#131 ;
„	Alt+ 0132	&#132 ;	&bdquo ;	Guillemet bas ouvrant
…	Alt+ 0133	&#133 ;		Trois petits points
†	Alt+ 0134	&#134 ;		Signe de croix
‡	Alt+ 0135	&#135 ;
ˆ	Alt+ 0136	&#136 ;
‰	Alt+ 0137	&#137 ;
Š	Alt+ 0138	&#138 ;
‹	Alt+ 0139	&#139 ;	&lsaquo ;	Guillemet simple chevron gauche
Œ	Alt+ 0140	&#140 ;
Ž	Alt+ 0142	&#142 ;	&Zcaron ;	Z caron majuscule
	Alt+ 0143
	Alt+ 0144
‘	Alt+ 0145	&#145 ;	&lsquo ;	Guillemet simple ouvrant
’	Alt+ 0146	&#146 ;	&rsquo ;	Guillemet simple fermant, apostrophe typographique
“	Alt+ 0147	&#147 ;	&ldquo ;	Guillemet double ouvrant, forme anglaise
”	Alt+ 0148	&#148 ;	&rdquo ;	Guillemet double fermant, forme anglaise
•	Alt+ 0149	&#149 ;
« tiret demi-cadratin »	Alt+ 0150	&#150 ;	&ndash ;	Tiret demi-cadratin
« tiret cadratin »	Alt+ 0151	&#151 ;	&mdash ;	Tiret cadratin
˜	Alt+ 0152	&#152 ;
™	Alt+ 0153	&#153 ;	&trade ;	Marque commerciale
š	Alt+ 0154	&#154 ;
›	Alt+ 0155	&#155 ;	&rsaquo ;	Guillemet simple chevron droit
œ	Alt+ 0156	&#156 ;	&oelig ;
	Alt+ 0157
ž	Alt+ 0158	&#158 ;

Quand utiliser un code plutôt que le caractère lui-même

Pour du texte courant, écrire directement le caractère accentué ou spécial dans le fichier HTML fonctionne sans problème, à condition que la page déclare le bon encodage dans son en-tête et que l’éditeur de texte enregistre le fichier dans ce même encodage. Le recours aux codes garde son intérêt dans des cas précis : afficher un caractère réservé par le langage HTML lui-même, comme le chevron ou l’esperluette, dans un contexte où il serait sinon interprété comme une balise ; ou garantir l’affichage correct d’un symbole rare sur un site dont l’encodage reste incertain.

Les pièges les plus fréquents

Le symbole « & » doit toujours être remplacé par son code d’échappement dès qu’il apparaît dans du texte ou dans un attribut : laissé tel quel, le navigateur tente d’interpréter ce qui suit comme le début d’une entité, avec des résultats imprévisibles. Le chevron ouvrant pose le même type de souci, puisque le navigateur l’interprète comme le début d’une balise. Un texte copié depuis un traitement de texte amène aussi son lot de soucis : les guillemets courbes, les tirets longs et les espaces insécables d’un logiciel de bureautique ne correspondent pas toujours à l’encodage attendu par la page une fois collés tels quels.

À l’inverse, un site qui déclare l’UTF-8 dans son en-tête n’a besoin d’aucune de ces entités pour le texte courant : les lettres accentuées, les guillemets français et les symboles monétaires s’écrivent directement, sans passer par un code. Réserver les entités aux caractères réellement problématiques rend le code source plus simple à relire et à corriger.