Les caractères spéciaux (X)HTML

Qui n'est jamais arrivé sur une page web où des symboles bizarres remplacent un certain nombre de caractères et rendent la lecture de la dite page difficile, voire impossible ?

La raison est que le concepteur de la page et le lecteur n'utilisent pas un encodage compatible. Pour remédier à cela, on peut modifier l'encodage de la page en choisissant un encodage universel du type UTF-8 mais si l'on n'a pas la maîtrise de l'encodage, le W3C a prévu une autre solution : le remplacement des "caractères spéciaux" (caractères accentués pas exemple) par des codes HTML destinés à rendre l'affichage du caractère correct. Ceci n'est bien sûr valable que si la police choisie accepte le caractère.

Cet article recense de manière non exhaustive, bon nombre de ces caractères spéciaux.

Article lu fois.

L'auteur

Dumas Grégory

L'article

Publié le 19 février 2009

Version PDF Version hors-ligne

ePub, Azw et Mobi

Liens sociaux

I. Caractères Web particuliers▲

Afin de préserver la structure des pages Web, il est nécessaire de remplacer certains caractères réguliers qui deviennent spéciaux en (X)HTML.

Caractère	Code numérique	Code HTML	Description
"	"	"	Guillemets
&	&	&	Esperluette
<	<	<	Inférieur à
>	>	>	Supérieur à

II. Signes diacritiques▲

Un signe diacritique est un signe graphique qui sert à différencier des mots homographes ou des prononciations différentes d'une même lettre.

Caractère	Code numérique	Code HTML	Description	Mot-clé	Caractère	Code numérique	Code HTML	Description	Mot -clé
`	`		Accent grave	grave	´	´	´	Accent aigu	acute
ˆ	ˆ	&circ;	Accent circonflexe	circ	¨	¨	¨	Tréma	uml
?	ˇ		Chevron		?	˘		Brêve
?	˚		Rond en chef	ring	?	˙		Point en chef
?	̉		Crochet en chef		?	ˉ		Macron
?	˛		Ogonek		˜	˜	&tilde;	Tilde	tilde
?	˝		Double accent aigu		¸	¸	¸	Cédille	cedil

III. Alphabet latin modifié▲

III-A. Règles▲

Compte tenu du nombre de lettres concernées et de la réelle difficulté à retenir tous les codes numériques correspondants, des codes HTML mnémotechniques ont été mis en place pour les combinaisons avec les signes diacritiques les plus courants.
Elles concernent essentiellement les caractères dits accentués.
La règle commence comme tout code HTML par une esperluette, suivie de la lettre à modifier dans la casse (minuscule / majuscule) voulue, suivie d'un mot-clé du signe diacritique voulu et enfin un point virgule terminant le code HTML.

& + lettre + mot-clé + ;
( Exemple : À donnera À )

Sur le même modèle, d'autres mots-clés mnémotechniques ont été créés comme lig pour les lettres ligaturées.

III-B. Liste des caractères latins modifiés▲

C D E F G H I J K L N O R S T U W Y Z

Majuscule			Minuscule
Caractère	Code numérique	Code HTML	Caractère	Code numérique	Code HTML
À	À	À	à	à	à
Á	Á	Á	á	á	á
Â	Â	Â	â	â	â
Ä	Ã	Ä	ä	ã	ä
Å	Ä	Å	å	ä	å
?	Ā		?	ā
?	Ă		?	ă
?	Ą		?	ą
?	Ǻ		?	ǻ
?	Ά
?	Ạ		?	ạ
?	Ả		?	ả
?	Ấ		?	ấ
?	Ầ		?	ầ
?	Ẩ		?	ẩ
?	Ẫ		?	ẫ
?	Ậ		?	ậ
?	Ắ		?	ắ
?	Ằ		?	ằ
?	Ẳ		?	ẳ
?	Ẵ		?	ẵ
?	Ặ		?	ặ
Æ	Æ	Æ	æ	æ	æ
\x{01fc}	Ǽ		\x{01fd}	ǽ
?	Ć		?	ć
?	Ĉ		?	ĉ
?	Ċ		?	ċ
?	Č		?	č
Ç	&192;	Ç	ç	&192;	ç
?	Ď		?	ď
?	Đ		?	đ
Ð	Ð	Ð	ð	ð	ð
È	È	È	è	è	è
É	É	É	é	é	é
Ê	Ê	Ê	ê	ê	ê
Ë	Ë	Ë	ë	ë	ë
?	Ē		?	ē
?	Ĕ		?	ĕ
?	Ė		?	ė
?	Ę		?	ę
?	Ě		?	ě
?	Έ
?	Ẹ		?	ẹ
?	Ẻ		?	ẻ
?	Ẽ		?	ẽ
?	Ế		?	ế
?	Ề		?	ề
?	Ể		?	ể
?	Ễ		?	ễ
?	Ệ		?	ệ
?	₣
	Ĝ		?	ĝ
?	Ğ		?	ğ
?	Ġ		?	ġ
?	Ģ		?	ģ
?	Ĥ		?	ĥ
?	Ħ		?	ħ
?	Ή
Ì	Ì	Ì	ì	ì	ì
Í	Í	Í	í	í	í
Î	Î	Î	î	î	î
Ï	Ï	Ï	ï	ï	ï
?	Ĩ		?	ĩ
?	Ī		?	ī
?	Ĭ		?	ĭ
?	Į		?	į
?	İ		?	ı
?	Ί
?	Ỉ		?	ỉ
?	Ị		?	ị
?	Ĳ		?	ĳ
?	Ĵ		?	ĵ
?	Ķ		?	ķ
?	ĸ
?	Ĺ		?	ĺ
?	Ļ		?	ļ
?	Ľ		?	ľ
?	Ŀ		?	ŀ
?	Ł		?	ł
Ñ	Ñ	Ñ	ñ	ñ	ñ
?	Ń		?	ń
?	Ņ		?	ņ
?	Ň		?	ň
?	ŉ
?	Ŋ		?	ŋ
Ò	Ò	Ò	ò	ò	ò
Ó	Ó	Ó	ó	ó	ó
Ô	Ô	Ô	ô	ô	ô
Õ	Õ	Õ	õ	õ	õ
Ö	Ö	Ö	ö	ö	ö
Ø	Ø	Ø	ø	ø	ø
?	Ō		?	ō
?	Ŏ		?	ŏ
?	Ő		?	ő
?	Ơ		?	ơ
\x{01fe}	Ǿ		\x{01ff}	ǿ
?	Ό
?	Ỏ		?	ỏ
?	Ố		?	ố
?	Ồ		?	ồ
?	Ổ		?	ổ
?	Ỗ		?	ỗ
?	Ộ		?	ộ
?	Ớ		?	ớ
?	Ờ		?	ờ
?	Ở		?	ở
?	Ỡ		?	ỡ
?	Ợ		?	ợ
Œ		&OElig;	œ		&oelig;
?	Ŕ		?	ŕ
?	Ŗ		?	ŗ
?	Ř		?	ř
?	Ś		?	ś
?	Ŝ		?	ŝ
?	Ş		?	ş
Š	Š	&Scaron;	š	š	&scaron;
			ß	ß	ß
Þ	Þ	Þ	þ	þ	þ
?	Ţ		?	ţ
?	Ť		?	ť
?	Ŧ		?	ŧ
Ù	Ù	Ù	ù	ù	ù
Ú	Ú	Ú	ú	ú	ú
Û	Û	Û	û	û	û
Ü	Ü	Ü	ü	ü	ü
?	Ũ		?	ũ
?	Ū		?	ū
?	Ŭ		?	ŭ
?	Ů		?	ů
?	Ű		?	ű
?	Ų		?	ų
?	Ư		?	ư
?	Ụ		?	ụ
?	Ủ		?	ủ
?	Ứ		?	ứ
?	Ừ		?	ừ
?	Ử		?	ử
?	Ữ		?	ữ
?	Ự		?	ự
?	Ŵ		?	ŵ
?	Ẅ		?	ẅ
Ý	Ý	Ý	ý	ý	ý
Ÿ		&Yuml;	ÿ	ÿ	ÿ
?	Ŷ		?	ŷ
?	Ύ
?	Ź		?	ź
?	Ż		?	ż
Ž	Ž		ž	ž

IV. Alphabet grec▲

IV-A. Règles▲

Comme pour les lettres transformées, les lettres grecques font l'objet de codes HTML mnémotechniques.
La règle commence comme tout code HTML par une esperluette, suivie du nom de la lettre grecque et termine par un point-virgule. La casse de la première lettre du nom de la lettre grecque détermine la casse de la lettre affichée.

& + nom de la lettre grecque + ;
( Exemple : Γ donnera ? )

IV-B. Liste des caractères grecs▲

Majuscule			Minuscule
Caractère	Code numérique	Code HTML	Caractère	Code numérique	Code HTML
?	Α	Α	?	α	α
?	Β	Β	?	β	β
?	Γ	Γ	?	γ	γ
?	Δ	Δ	?	δ	δ
?	Ε	Ε	?	ε	ε
?	Ζ	Ζ	?	ζ	ζ
?	Η	Η	?	η	η
?	Θ	Θ	?	θ	θ
?	Ι	Ι	?	ι	ι
?	Κ	Κ	?	κ	κ
?	Λ	Λ	?	λ	λ
?	Μ	Μ	?	μ	μ
?	Ν	Ν	?	ν	ν
?	Ξ	Ξ	?	ξ	ξ
?	Ο	Ο	?	ο	ο
?	Π	Π	?	π	π
?	Ρ	Ρ	?	ρ	ρ
?	Σ	Σ	?	σ	σ
?	Τ	Τ	?	τ	τ
?	Υ	Υ	?	υ	υ
?	Φ	Φ	?	φ	φ
?	Χ	Χ	?	χ	χ
?	Ψ	Ψ	?	ψ	ψ
?	Ω	Ω	?	ω	ω

IV-C. Liste des caractères grecs modifiés▲

Caractère	Code numérique	Caractère	Code numérique	Caractère	Code numérique
?	Ώ	?	ΐ	?	Ϊ
?	Ϋ	?	ά	?	έ
?	ή	?	ί	?	έ
?	ή	?	ί	?	ΰ
?	ϊ	?	ϋ	?	ό
?	ύ	?	ώ

V. Autres caractères généraux▲

V-A. Ponctuation▲

Caractère	Code numérique	Code HTML	Description	Caractère	Code numérique	Code HTML	Description
‘		‘	guillemet simple ouvrant	'		’	guillemet simple fermant
“		“	guillemet double ouvrant	”		”	guillemet double fermant
‹		&lsaquo;	guillemet français simple ouvrant	›		&rsaquo;	guillemet français simple fermant
«	«	«	guillemet français ouvrant	»	»	»	guillemet français fermant
‚	‚	&sbquo;	guillemet simple fermant bas	„	„	&bdquo;	guillemet double fermant bas
…		…	points de suspension	¿	¿	¿	point d'interrogation inversé
¡	¡	¡	point d'exclamation inversé	?	‼		double point d'exclamation
?	‑		petit tiret	-		–	tiret demi-cadratin
-		—	tiret cadratin	?	―		tiret long
§	§	§	paragraphe	¶	¶	¶	pied de mouche
†		&dagger	obèle	‡		&Dagger	double obèle

V-B. Monnaies▲

Caractère	Code numérique	Code HTML	Description	Caractère	Code numérique	Code HTML	Description
¤	¤	¤	symbole monétaire	¢	¢	¢	cent
€		€	euro	£	£	£	livre sterling
¥	¥	¥	yen	ƒ	ƒ	&fnof;	florin

V-C. Marques▲

Symbole	Code numérique	Code HTML	Description	Symbole	Code numérique	Code HTML	Description
©	©	©	copyright	®	®	®	marque déposée
™		™	marque commerciale

VI. Caractères scientifiques▲

VI-A. Arithmétique▲

Symbole	Code numérique	Code HTML	Description	Symbole	Code numérique	Code HTML	Description
+	+	+	plus	?	−	−	moins
×	×	×	multiplication	÷	÷	÷	division
?	∙		produit	?	⁄	&frasl;	barre de fraction
±	±	±	plus ou moins
%	%	%	pour cent / modulo	‰		&permil;	pour mille

VI-B. Exposants▲

Symbole	Code numérique	Code HTML	Description	Symbole	Code numérique	Code HTML	Description
¹	¹	¹	exposant 1	²	²	²	exposant 2
³	³	³	exposant 3	?	ⁿ		exposant n
º	º	º	ordinal mâle	ª	»	ª	ordinal féminin

VI-C. Fractions▲

Symbole	Code numérique	Code HTML	Description	Symbole	Code numérique	Code HTML	Description
¼	¼	¼	un quart	½	½	½	un demi
¾	¾	¾	trois quart	?	⅓		un tiers
?	⅔		deux tiers	?	⅛		un huitième
?	⅜		trois huitièmes	?	⅝		cinq huitièmes
?	⅞		sept huitièmes

VI-D. Opérateurs de comparaisons▲

Symbole	Code numérique	Code HTML	Description	Symbole	Code numérique	Code HTML	Description
=	=	=	égal	?	≠	≠	différent
?	≡	&equiv;	équivalent	?	≈	≈	presque égal
<	<	<	inférieur	>	>	>	supérieur
?	≤	≤	inférieur ou égal	?	≥	≥	supérieur ou égal

VI-E. Autres▲

Symbole	Code numérique	Code HTML	Description	Symbole	Code numérique	Code HTML	Description
?	′	′	dérivée	?	″	″	dérivée seconde
?	∂	∂	dérivée partielle	?	∏	∏	produit n-aire
?	∑	∑	somme n-aire	?	√	√	racine carrée
?	∡	∞	infini	?	∫	∫	intégrale
?	℮		nombre d'Euler	°	°	°	degré
¬	¬	¬	négation	?	∩	∩	intersection

VII. «Figures géométriques» et autres caractères▲

VII-A. Flèches▲

Symbole	Code numérique	Code HTML	Description	Symbole	Code numérique	Code HTML	Description
?	←	←	gauche	?	→	→	droite
?	↑	↑	haut	?	↓	↓	bas
?	↔	↔	gauche et droite	?	↕		haut et bas

VII-B. Boites▲

Symbole	Code numérique	Symbole	Code numérique	Symbole	Code numérique
?	█	?	▓	?	▒
?	▄	?	▌	?	■
?	□	?	▪	?	▫

VII-C. Lignes▲

Symbole	Code numérique	Symbole	Code numérique	Symbole	Code numérique	Symbole	Code numérique	Symbole	Code numérique
?	┌	?	┐	?	&#9492	?	┘	?	╬
?	╔	?	╗	?	╚	?	╝
?	├	?	┤	?	┬	?	┴	?	┼
?	╒	?	╕	?	╘	?	╛	?	╪
?	╓	?	╖	?	╙	?	╜	?	╫
?	╞	?	╡	?	╥	?	╨
?	╟	?	╢	?	╤	?	╧
?	╠	?	╣	?	╦	?	╩
?	─	?	│	?	═	?	║

VII-D. Autres▲

Symbole	Code numérique	Code HTML	Symbole	Code numérique	Code HTML	Symbole	Code numérique	Code HTML
·	·	·	•		•	¦	¦	¦
?	ſ		?	۔		?	٭
?	੪		?	૪		?	ஃ
?	๏		?	๐		?	჻
?	♀		?	♂		?	▲
?	○		?	●		?	▼
?	♪		?	◊		?	◦
?	₪		?	№		?	₧
?	₫		?	ℓ		?	℅

VIII. Remerciements▲

Je remercie Bovino, Lorenzo77, Kerod et Bisûnûrs pour leur travail de vérification.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2013 Dumas Grégory. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Symbole	Code numérique	Code HTML	Symbole	Code numérique	Code HTML	Symbole	Code numérique	Code HTML
·	·	·	•		•	¦	¦	¦
?	ſ		?	۔		?	٭
?	੪		?	૪		?	ஃ
?	๏		?	๐		?	჻
?	♀		?	♂		?	▲
?	○		?	●		?	▼
?	♪		?	◊		?	◦
?	₪		?	№		?	₧
?	₫		?	ℓ		?	℅

Symbole	Code numérique	Code HTML	Symbole	Code numérique	Code HTML	Symbole	Code numérique	Code HTML
·	·	·	•		•	¦	¦	¦
?	ſ		?	۔		?	٭
?	੪		?	૪		?	ஃ
?	๏		?	๐		?	჻
?	♀		?	♂		?	▲
?	○		?	●		?	▼
?	♪		?	◊		?	◦
?	₪		?	№		?	₧
?	₫		?	ℓ		?	℅

Symbole	Code numérique	Code HTML	Symbole	Code numérique	Code HTML	Symbole	Code numérique	Code HTML
·	·	·	•		•	¦	¦	¦
?	ſ		?	۔		?	٭
?	੪		?	૪		?	ஃ
?	๏		?	๐		?	჻
?	♀		?	♂		?	▲
?	○		?	●		?	▼
?	♪		?	◊		?	◦
?	₪		?	№		?	₧
?	₫		?	ℓ		?	℅