Table des matières

Encodage des caractères spéciaux

Très souvent, l'encodage des caractères spéciaux est un vrai casse-tête pour les programmateurs. Pas le bon caractère à l'affichage, caractères bizarres, les problèmes d'encodage peuvent varier mais sont inesthétiques à l'écran pour le visiteur. Voici donc un tutoriel vous expliquant le moyen de résoudre se problème.

Explications

Il existe différents jeu de caractères en informatique. Les plus courant que nous pouvons rencontrer en France sont l'UTF-8 et l'ISO 8859-15 (Latin 15). Suivant la langue utilisée par le visiteur de votre site, il peut donc utiliser un codage différent du votre et donc avoir des drôles de caractères affichés. Exemple :

Bouygues Télécom déjà "HADOPI Ready"
Bouygues Télécom déjà "HADOPI Ready"

Comme vous pouvez le constater, les accents ne s'affichent pas correctement sur la première ligne, cela est dû au navigateur internet du visiteur. Il n'utilise pas le même encodage que vous, pour garantir une lecture correcte de votre site, quelque soi le navigateur, l'encodage utilisé, préférer écrire vos codes HTML en UTF-8 et encoder selon le tableau ci-dessous les caractères spéciaux.

Les caractères généraux

caractère code texte code numérique commentaire
    espace insécable
­ ­ tiret de césure optionnelle
‎ ‎ marque gauche-à-droite
‏ ‏ marque droite-à-gauche
" " " guillemet anglais, guillemet droit (quote)
« « « guillemet français ouvrant
» » » guillemet français fermant
‹ ‹ ‹ guillemet français simple ouvrant
› › › guillemet français simple fermant
“ “ “ guillemet double ouvrant, guillemet-apostrophe double culbuté
” ” ” guillemet double fermant, guillemet-apostrophe double
„ „ „ guillemet double fermant bas, guillemet-virgule double inférieur
' ' ' guillemet simple droit
‘ ‘ ‘ guillemet simple ouvrant, guillemet-apostrophe culbuté
’ ’ ’ guillemet simple fermant, guillemet-apostrophe
‚ ‚ ‚ guillemet simple fermant bas, guillemet-virgule inférieur
… … … points de suspension
! ! ! point d’exclamation
¡ ¡ ¡ point d’exclamation inversé
? ? ? point d’interrogation
¿ ¿ ¿ point d’interrogation inversé
( ( ( parenthèse ouvrante
) ) ) parenthèse fermante
[ [ [ crochet ouvrant
] ] ] crochet fermant
{ { { accolade ouvrante
} } } accolade fermante
¨ ¨ ¨ tréma
´ ´ ´ accent aigu
` ` ` accent grave
^ ^ ^ accent circonflexe
ˆ ˆ ˆ accent circonflexe
~ ~ ~ tilde
˜ ˜ ˜ petit tilde
¸ ¸ ¸ cédille
# # # dièse
* * * étoile
, , , virgule
. . . point
: : : deux-points
; ; &#59; point-virgule
· · · point médian
• • • gros point médian
¯ ¯ ¯ macron
‾ ‾ ‾ tiret en chef (overline, spacing overscore)
- - - tiret, tiret quart-cadratin, tiret de mots composés
– – – tiret demi-cadratin, tiret d’incise
— — — tiret cadratin, tiret de dialogue
_ _ _ tiret bas (underscore)
| | | séparateur vertical (pipe)
¦ ¦ ¦ barre verticale scindée
‌ ‌ ‌ anti-liant sans chasse
‍‍ ‍ liant sans chasse
† † † obèle
‡ ‡ ‡ double obèle
§ § § section
¶ ¶ paragraphe
© © © copyright
® ® ® marque déposée
™ ™ ™ marque commerciale (trade mark)
& & & et commercial, esperluette, ampersand
@ @ @ arobase (chez)
/ / / diviser (slash)
\ \ \ anti-slash
◊ ◊ ◊ losange
♠ ♠ ♠ pique noir
♣ ♣ ♣ trèfle noir
♥ ♥ ♥ cœur noir
♦ ♦ ♦ carreau noir
← ← ← flèche vers la gauche
↑ ↑ ↑ flèche vers le haut
→ → → flèche vers la droite
↓ ↓ ↓ flèche vers le bas
↔ ↔ ↔ flèche bilatérale gauche-droite

Les caractères scientifiques

caractère code texte code numérique commentaire
° ° ° degré
µ µ µ mu (lettre grecque)
< &lt; &#60; inférieur (less-than)
> &gt; &#62; supérieur (greater-than)
≤ &le; &#8804; inférieur ou égal (less or equal)
≥ &ge; &#8805; supérieur ou égal (greater or equal)
= = &#61; égal
≈ &asymp; &#8776; presque égal (asymptotic)
≠ &ne; &#8800; différent (not equal)
≡ &equiv; &#8801; équivalent
± &plusmn; &#177; plus-ou-moins
− &minus; &#8722; moins
+ + &#43; plus
× &times; &#215; multiplication
÷ &divide; &#247; division
⁄ &frasl; &#8260; fraction
% % &#37; pour cent
‰ &permil; &#8240; pour mille
¼ &frac14; &#188; un quart
½ &frac12; &#188; un demi
¾ &frac34; &#188; trois quarts
¹ &sup1; &#185; exposant 1
² &sup2; &#178; exposant 2
³ &sup3; &#179; exposant 3
º &ordm; &#186; indicateur ordinal masculin
ª &ordf; &#170; indicateur ordinal féminin
ƒ &fnof; &#402; fonction (idem florin)
′ &prime; &#8242; prime, minutes, dérivée
″ &Prime; &#8243; double prime, secondes, dérivée seconde
∂ &part; &#8706; dérivée partielle
∏ &prod; &#8719; produit n-aire
∑ &sum; &#8721; somme n-aire
√ &radic; &#8730; racine carrée
∞ &infin; &#8734; infini
¬ &not; &#172; crochet de négation
∩ &cap; &#8745; intersection
∫ &int; &#8747; intégrale

Les caractères monétaires

caractère code texte code numérique commentaire
¤ &curren; &#164; symbole monnaitaire
€ &euro; &#128; euro (monnaie européenne)
$ $ &#36; dollar (monnaie américaine)
¢ &cent; &#162; cent (monnaie américaine)
£ &pound; &#163; pound (Livre sterling, monnaie anglaise)
¥ &yen; &#165; yen (monnaie japonaise)
ƒ &fnof; &#402; florin (idem fonction)

Les caractères accentués

caractère code texte code numérique commentaire
á &aacute; &#225;
Á &Aacute; &#193;
â &acirc; &#226;
 &Acirc; &#194;
à &agrave; &#224;
À &Agrave; &#192;
å &aring; &#229;
Å &Aring; &#197;
ã &atilde; &#227;
à &Atilde; &#195;
ä &auml; &#228;
Ä &Auml; &#196;
æ &aelig; &#230;
Æ &AElig; &#198;
ç &ccedil; &#231;
Ç &Ccedil; &#199;
é &eacute; &#233;
É &Eacute; &#201;
ê &ecirc; &#234;
Ê &Ecirc; &#202;
è &egrave; &#232;
È &Egrave; &#200;
ë &euml; &#235;
Ë &Euml; &#203;
í &iacute; &#237;
Í &Iacute; &#205;
î &icirc; &#238;
Î &Icirc; &#206;
ì &igrave; &#236;
Ì &Igrave; &#204;
ï &iuml; &#239;
Ï &Iuml; &#207;
ñ &ntilde; &#241;
Ñ &Ntilde; &#209;
ó &oacute; &#243;
Ó &Oacute; &#211;
ô &ocirc; &#244;
Ô &Ocirc; &#212;
ò &ograve; &#242;
Ò &Ograve; &#210;
ø &oslash; &#248;
Ø &Oslash; &#216;
õ &otilde; &#245;
Õ &Otilde; &#213;
ö &ouml; &#246;
Ö &Ouml; &#214;
œ &oelig; &#339; ligature minuscule latine oe
Π&OElig; &#338; ligature majuscule latine OE
š &scaron; &#353; lettre minuscule latine s avec caron
Š &Scaron; &#352; lettre majuscule latine S avec caron
ß &szlig; &#223; lettre minuscule allemande s dur
ð &eth; &#240; lettre minuscule islandaise ed
Ð &ETH; &#208; lettre majuscule islandaise ED
þ &thorn; &#254; lettre minuscule islandaise thorn
Þ &THORN; &#222; lettre majuscule islandaise Thorn
ú &uacute; &#250;
Ú &Uacute; &#218;
û &ucirc; &#251;
Û &Ucirc; &#219;
ù &ugrave; &#249;
Ù &Ugrave; &#217;
ü &uuml; &#252;
Ü &Uuml; &#220;
ý &yacute; &#253;
Ý &Yacute; &#221;
ÿ &yuml; &#255;
Ÿ &Yuml; &#376;

Les caractères Grecs

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

Les caractères divers

caractère code texte code numérique commentaire
⇒ &rArr; &#8658; rightwards double arrow
⇔ &hArr; &#8660; left right double arrow
∀ &forall; &#8704; for all
∃ &exist; &#8707; there exists
∇ &nabla; &#8711; nabla = backward difference
∈ &isin; &#8712; element of
∋ &ni; &#8715; contains as member
∝ &prop; &#8733; proportional to
∠ &ang; &#8736; angle
∧ &and; &#8743; logical and = wedge
∨ &or; &#8744; logical or = vee
∪ &cup; &#8746; union = cup
∴ &there4; &#8756; therefore
∼ &sim; &#8764; tilde operator = varies with = similar to
⊂ &sub; &#8834; subset of
⊃ &sup; &#8835; superset of
⊆ &sube; &#8838; subset of or equal to
⊇ &supe; &#8839; superset of or equal to
⊥ &perp; &#8869; up tack = orthogonal to = perpendicular
⊕ &oplus; &#8853; circled plus = direct sum
&thinsp; &#8201; espace fine
  &ensp; &#8194; espace demi-cadratin
&emsp; &#8195; espace cadratin
℘ &weierp; &#8472; script capital P = power set = Weierstrass p
ℑ &image; &#8465; partie imaginaire (majuscule I gothique)
ℜ &real; &#8476; partie réelle (majuscule R gothique)
↵ &crarr; &#8629; downwards arrow with corner leftwards = carriage return
⇐ &lArr; &#8656; leftwards double arrow
⇑ &uArr; &#8657; upwards double arrow
⇓ &dArr; &#8659; downwards double arrow
∅ &empty; &#8709; empty set = null set = diameter
∉ &notin; &#8713; not an element of
∗ &lowast; &#8727; asterisk operator
≅ &cong; &#8773; approximately equal to
⊄ &nsub; &#8836; not a subset of
⊗ &otimes; &#8855; circled times = produit vectoriel
⋅ &sdot; &#8901; dot operator
⌈ &lceil; &#8968; left ceiling = apl upstile
⌉ &rceil; &#8969; right ceiling
⌊ &lfloor; &#8970; left floor = apl downstile
⌋ &rfloor; &#8971; right floor
〈 &lang; &#9001; chevron vers la gauche = bra
〉 &rang; &#9002; chevron vers la droite = ket
ℵ &alefsym; &#8501; alef symbol = first transfinite cardinal
ϑ &thetasym; &#977; symbole theta
ϖ &piv; &#982; symbole pi
ϒ &upsih; &#978; symbole Upsilon crochet

Exemples

Nous allons reprendre l'exemple du début de l'article : Pour éviter l'affichage de cette phrase sur certains navigateurs :

Bouygues Télécom déjà "HADOPI Ready"

Il faut la codée de cette façon :

Bouygues T&eacute;l&eacute;com d&eacute;j&agrave; "HADOPI Ready"

Bien sûr, c'est pas très facile a lire au premier abord, mais le navigateur internet, lui, affichera sans problèmes :

Bouygues Télécom déjà "HADOPI Ready"

Note de version

Auteurs et sources

Autres liens rapides pouvant vous intéresser

C
C (suite)
E
L
L (suite)