Les caractères spéciaux (X)HTML

Qui n'est jamais arrivé sur une page web où des symboles bizarres remplaçent 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

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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
< &#60; &lt; Inférieur à
> &#62; &gt; 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é
` &#96; Accent grave grave ´ &#180; &acute; Accent aigu acute
ˆ &#710; &circ; Accent circonflexe circ ¨ &#168; &uml; Tréma uml
ˇ &#711; Chevron ˘ &#728; Brêve
˚ &#730; Rond en chef ring ˙ &#729; Point en chef
̉ &#777; Crochet en chef ˉ &#713; Macron
ą &#731; Ogonek ˜ &#732; &tilde; Tilde tilde
˝ &#733; Double accent aigu ¸ &#184; &cedil; 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 : &Agrave; 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
À &#192; &Agrave; à &#224; &agrave;
Á &#193; &Aacute; á &#225; &aacute;
 &#194; &Acirc; â &#226; &acirc;
Ä &#195; &Auml; ä &#227; &auml;
Å &#196; &Aring; å &#228; &aring;
Ā &#256; ā &#257;
Ă &#258; ă &#259;
Ą &#260; ą &#261;
Ǻ &#506; ǻ &#507;
Ά &#902;
&#7840; &#7841;
&#7842; &#7843;
&#7844; &#7845;
&#7846; &#7847;
&#7848; &#7849;
&#7850; &#7851;
&#7852; &#7853;
&#7854; &#7855;
&#7856; &#7857;
&#7858; &#7859;
&#7860; &#7861;
&#7862; &#7863;
Æ &#198; &AElig; æ &#230; &aelig;
\x{01fc} &#508; \x{01fd} &#509;
  Ć &#262; ć &#263;
Ĉ &#264; ĉ &#265;
Ċ &#266; ċ &#267;
Č &#268; č &#269;
Ç &192; &Ccedil; ç &192; &ccedil;
  Ď &#270; ď &#271;
Đ &#272; đ &#273;
Ð &#208; &ETH; ð &#240; &eth;
  È &#200; &Egrave; è &#232; &egrave;
É &#201; &Eacute; é &#233; &eacute;
Ê &#202; &Ecirc; ê &#234; &ecirc;
Ë &#203; &Euml; ë &#235; &euml;
Ē &#274; ē &#275;
Ĕ &#276; ĕ &#277;
Ė &#278; ė &#279;
Ę &#280; ę &#281;
Ě &#282; ě &#283;
Έ &#904;
&#7864; &#7865;
&#7866; &#7867;
&#7868; &#7869;
&#7870; ế &#7871;
&#7872; &#7873;
&#7874; &#7875;
&#7876; &#7877;
&#7878; &#7879;
  &#8355;
  &#284; ĝ &#285;
Ğ &#286; ğ &#287;
Ġ &#288; ġ &#289;
Ģ &#290; ģ &#291;
  Ĥ &#292; ĥ &#293;
Ħ &#294; ħ &#295;
Ή &#905;
  Ì &#204; &Igrave; ì &#236; &igrave;
Í &#205; &Iacute; í &#237; &iacute;
Î &#206; &Icirc; î &#238; &icirc;
Ï &#207; &Iuml; ï &#239; &iuml;
Ĩ &#296; ĩ &#297;
Ī &#298; ī &#299;
Ĭ &#300; ĭ &#301;
Į &#302; į &#303;
İ &#304; ı &#305;
Ί &#906;
&#7880; &#7881;
&#7882; &#7883;
IJ &#306; ij &#307;
  Ĵ &#308; ĵ &#309;
  Ķ &#310; ķ &#311;
ĸ &#312;
  Ĺ &#313; ĺ &#314;
Ļ &#315; ļ &#316;
Ľ &#317; ľ &#318;
Ŀ &#319; ŀ &#320;
Ł &#321; ł &#322;
  Ñ &#209; &Ntilde; ñ &#241; &ntilde;
Ń &#323; ń &#324;
Ņ &#325; ņ &#326;
Ň &#327; ň &#328;
ʼn &#329;
Ŋ &#330; ŋ &#331;
  Ò &#210; &Ograve; ò &#242; &ograve;
Ó &#211; &Oacute; ó &#243; &oacute;
Ô &#212; &Ocirc; ô &#244; &ocirc;
Õ &#213; &Otilde; õ &#245; &otilde;
Ö &#214; &Ouml; ö &#246; &ouml;
Ø &#216; &Oslash; ø &#248; &oslash;
Ō &#332; ō &#333;
Ŏ &#334; ŏ &#335;
Ő &#336; ő &#337;
Ơ &#416; ơ &#417;
\x{01fe} &#510; \x{01ff} &#511;
Ό &#908;
&#7886; &#7887;
&#7888; &#7889;
&#7890; &#7891;
&#7892; &#7893;
&#7894; &#7895;
&#7896; &#7897;
&#7898; &#7899;
&#7900; &#7901;
&#7902; &#7903;
&#7904; &#7905;
&#7906; &#7907;
Œ &#140; &OElig; œ &#156; &oelig;
  Ŕ &#340; ŕ &#341;
Ŗ &#342; ŗ &#343;
Ř &#344; ř &#345;
  Ś &#346; ś &#347;
Ŝ &#348; ŝ &#349;
Ş &#350; ş &#351;
Š &#352; &Scaron; š &#353; &scaron;
ß &#223; &szlig;
  Þ &#222; &THORN; þ &#254; &thorn;
Ţ &#354; ţ &#355;
Ť &#356; ť &#357;
Ŧ &#358; ŧ &#359;
  Ù &#217; &Ugrave; ù &#249; &ugrave;
Ú &#218; &Uacute; ú &#250; &uacute;
Û &#219; &Ucirc; û &#251; &ucirc;
Ü &#220; &Uuml; ü &#252; &uuml;
Ũ &#360; ũ &#361;
Ū &#362; ū &#363;
Ŭ &#364; ŭ &#365;
Ů &#366; ů &#367;
Ű &#368; ű &#369;
Ų &#370; ų &#371;
Ư &#431; ư &#432;
&#7908; &#7909;
&#7910; &#7911;
&#7912; &#7913;
&#7914; &#7915;
&#7916; &#7917;
&#7918; &#7919;
&#7920; &#7921;
  Ŵ &#372; ŵ &#373;
&#7812; &#7813;
  Ý &#221; &Yacute; ý &#253; &yacute;
Ÿ &#159; &Yuml; ÿ &#255; &yuml;
Ŷ &#374; ŷ &#375;
Ύ &#910;
  Ź &#377; ź &#378;
Ż &#379; ż &#380;
Ž &#381; ž &#382;

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 : &Gamma; donnera Γ )

IV-B. Liste des caractères grecs

Majuscule Minuscule
Caractère Code numérique Code HTML Caractère Code numérique Code HTML
Α &#913; &Alpha; α &#945; &alpha;
Β &#914; &Beta; β &#946; &beta;
Γ &#915; &Gamma; γ &#947; &gamma;
Δ &#916; &Delta; δ &#948; &delta;
Ε &#917; &Epsilon; ε &#949; &epsilon;
Ζ &#918; &Zeta; ζ &#950; &zeta;
Η &#919; &Eta; η &#951; &eta;
Θ &#920; &Theta; θ &#952; &theta;
Ι &#921; &Iota; ι &#953; &iota;
Κ &#922; &Kappa; κ &#954; &kappa;
Λ &#923; &Lambda; λ &#955; &lambda;
Μ &#924; &Mu; μ &#956; &mu;
Ν &#925; &Nu; ν &#957; &nu;
Ξ &#926; &Xi; ξ &#958; &xi;
Ο &#927; &Omicron; ο &#959; &omicron;
Π &#928; &Pi; π &#960; &pi;
Ρ &#929; &Rho; ρ &#961; &rho;
Σ &#931; &Sigma; σ &#963; &sigma;
Τ &#932; &Tau; τ &#964; &tau;
Υ &#933; &Upsilon; υ &#965; &upsilon;
Φ &#934; &Phi; φ &#966; &phi;
Χ &#935; &Chi; χ &#967; &chi;
Ψ &#936; &Psi; ψ &#968; &psi;
Ω &#937; &Omega; ω &#969; &omega;

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

Caractère Code numérique Caractère Code numérique Caractère Code numérique
Ώ &#911; ΐ &#912; Ϊ &#938;
Ϋ &#939; ά &#940; έ &#941;
ή &#942; ί &#943; έ &#941;
ή &#942; ί &#943; ΰ &#944;
ϊ &#970; ϋ &#971; ό &#972;
ύ &#973; ώ &#974;

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
&#145; &lsquo; guillemet simple ouvrant ' &#146; &rsquo; guillemet simple fermant
&#147; &ldquo; guillemet double ouvrant &#148; &rdquo; guillemet double fermant
&#139; &lsaquo; guillemet français simple ouvrant &#155; &rsaquo; guillemet français simple fermant
« &#171; &laquo; guillemet français ouvrant » &#187; &raquo; guillemet français fermant
&#8218; &sbquo; guillemet simple fermant bas &#8222; &bdquo; guillemet double fermant bas
&#133; &hellip; points de suspension ¿ &#191; &iquest; point d'interrogation inversé
¡ &#161; &iexcl; point d'exclamation inversé &#8252; double point d'exclamation
&#8209; petit tiret - &#150; &ndash; tiret demi-cadratin
- &#151; &mdash; tiret cadratin &#8213; tiret long
§ &#167; &sect; paragraphe &#182; &para; pied de mouche
&#134; &dagger obèle &#135; &Dagger double obèle

V-B. Monnaies

Caractère Code numérique Code HTML Description Caractère Code numérique Code HTML Description
¤ &#164; &curren; symbole monétaire ¢ &#162; &cent; cent
&#128; &euro; euro £ &#163; &pound; livre sterling
¥ &#165; &yen; yen ƒ &#402; &fnof; florin

V-C. Marques

Symbole Code numérique Code HTML Description Symbole Code numérique Code HTML Description
© &#169; &copy; copyright ® &#174; &reg; marque déposée
&#153; &trade; marque commerciale

VI. Caractères scientifiques

VI-A. Arithmétique

Symbole Code numérique Code HTML Description Symbole Code numérique Code HTML Description
+ &#43; + plus &#8722; &minus; moins
× &#215; &times; multiplication ÷ &#247; &divide; division
&#8729; produit &#8260; &frasl; barre de fraction
± &#177; &plusmn; plus ou moins
% &#37; % pour cent / modulo &#137; &permil; pour mille

VI-B. Exposants

Symbole Code numérique Code HTML Description Symbole Code numérique Code HTML Description
¹ &#185; &sup1; exposant 1 ² &#178; &sup2; exposant 2
³ &#179; &sup3; exposant 3 &#8319; exposant n
º &#186; &ordm; ordinal mâle ª &#187; &ordf; ordinal féminin

VI-C. Fractions

Symbole Code numérique Code HTML Description Symbole Code numérique Code HTML Description
¼ &#188; &frac14; un quart ½ &#189; &frac12; un demi
¾ &#190; &frac34; trois quart &#8531; un tiers
&#8532; deux tiers &#8539; un huitième
&#8540; trois huitièmes &#8541; cinq huitièmes
&#8542; sept huitièmes

VI-D. Opérateurs de comparaisons

Symbole Code numérique Code HTML Description Symbole Code numérique Code HTML Description
= &#61; = égal &#8800; &ne; différent
&#8801; &equiv; équivalent &#8776; &asymp; presque égal
< &#60; &lt; inférieur > &#62; &gt; supérieur
&#8804; &le; inférieur ou égal &#8805; &ge; supérieur ou égal

VI-E. Autres

Symbole Code numérique Code HTML Description Symbole Code numérique Code HTML Description
&#8242; &prime; dérivée &#8243; &Prime; dérivée seconde
&#8706; &part; dérivée partielle &#8719; &prod; produit n-aire
&#8721; &sum; somme n-aire &#8730; &radic; racine carrée
&#8737; &infin; infini &#8747; &int; intégrale
&#8494; nombre d'Euler ° &#176; &deg; degré
¬ &#172; &not; négation &#8745; &cap; 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
&#8592; &larr; gauche &#8594; &rarr; droite
&#8593; &uarr; haut &#8595; &darr; bas
&#8596; &harr; gauche et droite &#8597; haut et bas

VII-B. Boites

Symbole Code numérique Symbole Code numérique Symbole Code numérique
&#9608; &#9619; &#9618;
&#9604; &#9612; &#9632;
&#9633; &#9642; &#9643;

VII-C. Lignes

Symbole Code numérique Symbole Code numérique Symbole Code numérique Symbole Code numérique Symbole Code numérique
&#9484; &#9488; &#9492 &#9496; &#9580;
&#9556; &#9559; &#9562; &#9565;
&#9500; &#9508; &#9516; &#9524; &#9532;
&#9554; &#9557; &#9560; &#9563; &#9578;
&#9555; &#9558; &#9561; &#9564; &#9579;
&#9566; &#9569; &#9573; &#9576;
&#9567; &#9570; &#9572; &#9575;
&#9568; &#9571; &#9574; &#9577;
&#9472; &#9474; &#9552; &#9553;

VII-D. Autres

Symbole Code numérique Code HTML Symbole Code numérique Code HTML Symbole Code numérique Code HTML
· &#183; &middot; &#149; &bull; ¦ &#166; &brvbar;
ſ &#383; ۔ &#1748; ٭ &#1645;
&#2666; &#2794; &#2947;
&#3663; &#3664; &#4347;
&#9792; &#9794; &#9650;
&#9675; &#9679; &#9660;
&#9834; &#9674; &#9702;
&#8362; &#8470; &#8359;
&#8363; &#8467; &#8453;

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 : Viadeo Twitter Facebook Share on Google+   

  

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 et 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.