Encodage des caractères spéciaux [zonewebmaster.eu]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Encodage des caractères spéciaux ======

Très souvent, l'encodage des caractères spéciaux est un vrai casse-tête pour les programmeurs. 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-1 (Latin 1). Il existe un pseudo jeu de caractères compatible € (latin 15 ou ISO 8859-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 car c'est le navigateur qui gère l'encodage du visiteur.

Nous vous conseillons la lecture de ce tutoriel pour assurer une bon affichage dès la conception de votre site : [[pages-html-utf-8|Pages HTML en UTF-8]]

//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  ^
|  |  &nbsp;  |  &#160;  |espace insécable  |
|  |  &shy;  |  &#173;  |tiret de césure optionnelle  |
|  |  &lrm;  |  &#8206;  |marque gauche-à-droite  |
|  |  &rlm;  |  &#8207;  |marque droite-à-gauche  |
|  "  |  &quot;  |  &#34;  |guillemet anglais, guillemet droit (quote)  |
|  «  |  &laquo;  |  &#171;  |guillemet français ouvrant  |
|  »  |  &raquo;  |  &#187;  |guillemet français fermant  |
|  ‹  |  &lsaquo;  |  &#8249;  |guillemet français simple ouvrant  | 
|  ›  |  &rsaquo;  |  &#8250;  |guillemet français simple fermant  | 
|  “  |  &ldquo;  |  &#8220;  |guillemet double ouvrant, guillemet-apostrophe double culbuté  | 
|  ”  |  &rdquo;  |  &#8221;  |guillemet double fermant, guillemet-apostrophe double  | 
|  „  |  &bdquo;  |  &#8222;  |guillemet double fermant bas, guillemet-virgule double inférieur| 
|  '  |  &apos;  |  &#39;  |guillemet simple droit  |
|  ‘  |  &lsquo;  |  &#8216;  |guillemet simple ouvrant, guillemet-apostrophe culbuté  | 
|  ’  |  &rsquo;  |  &#8217;  |guillemet simple fermant, guillemet-apostrophe  | 
|  ‚  |  &sbquo;  |  &#8218;  |guillemet simple fermant bas, guillemet-virgule inférieur  | 
|  …  |  &hellip;  |  &#8230;  |points de suspension  |
|  !  |  !  |  &#33;  |point d’exclamation|
|  ¡  |  &iexcl;  |  &#161;  |point d’exclamation inversé  |
|  ?  |  ?  |  &#63;  |point d’interrogation  |
|  ¿  |  &iquest;  |  &#191;  |point d’interrogation inversé  |
|  (  |  (  |  &#40;  |parenthèse ouvrante  |
|  )  |  )  |  &#41;  |parenthèse fermante  |
|  [  |  [  |  &#91;  |crochet ouvrant  |
|  ]  |  ]  |  &#93;  |crochet fermant  |
|  {  |  {  |  &#123;  |accolade ouvrante  |
|  }  |  }  |  &#125;  |accolade fermante  |
|  ¨  |  &uml;  |  &#168;  |tréma  |
|  ´  |  &acute;  |  &#180;  |accent aigu  |
|  `  |  `  |  &#96;  |accent grave  |
|  %%^%%  |  %%^%%  |  &#94;  |accent circonflexe  |
|  ˆ  |  &circ;  |  &#710;  |accent circonflexe  |
|  ~  |  ~  |  &#126;  |tilde  |
|   ˜  |  &tilde;  |  &#732;  |petit tilde  |
|  ¸  |  &cedil;  |  &#184;  |cédille  |
|  #  |  #  |  &#35;  |dièse  |
|  *  |  *  |  &#42;  |étoile  |
|  ,  |  ,  |  &#44;  |virgule  |
|  .  |  .  |  &#46;  |point  |
|  :  |  :  |  &#58;  |deux-points  |
|  ;  |  ;  |  &#59;  |point-virgule  |
|  ·  |  &middot;  |  &#183;  |point médian  |
|  •  |  &bull;  |  &#8226;  |gros point médian  |
|  ¯  |  &macr;  |  &#175;  |macron  |
|  ‾  |  &oline;  |  &#8254;  |tiret en chef (overline, spacing overscore)  |
|  -  |  -  |  &#45;  |tiret, tiret quart-cadratin, tiret de mots composés  | 
|  –  |  &ndash;  |  &#8211;  |tiret demi-cadratin, tiret d’incise  |
|  —  |  &mdash;  |  &#8212;  |tiret cadratin, tiret de dialogue  |
|  _  |  _  |  &#95;  |tiret bas (underscore)  |
|  %%|%%  |  %%|%%  |  &#124;|séparateur vertical (pipe)  |
|  ¦  |  &brvbar;  |  &#166;  |barre verticale scindée  |
|  | ‌ &zwnj;  |  &#8204;  |anti-liant sans chasse  |
|  |  ‍&zwj;  |  &#8205;  |liant sans chasse  |
|  †  |  &dagger;  |  &#8224;  |obèle  |
|  ‡  |  &Dagger;  |  &#8225;  |double obèle  |
|  §  |  &sect;  |  &#167;  |section  |
|  ¶  |  &para;  |  &#182;  |paragraphe  |
|  ©  |  &copy;  |  &#169;  |copyright  |
|  ®  |  &reg;  |  &#174;  |marque déposée  |
|  ™  |  &trade;  |  &#8482;  |marque commerciale (trade mark)  |
|  &  |  &amp;  |  &#38;  |et commercial, esperluette, ampersand  |
|  @  |  @  |  &#64;  |arobase (chez)  |
|  /  |  /  |  &#47;  |diviser (slash)  |
|  \  |  \  |  &#92;  |anti-slash  |
|  ◊  |  &loz;  |  &#9674;  |losange  |
|  ♠  |  &spades;  |  &#9824;  |pique noir  |
|  ♣  |  &clubs;  |  &#9827;  |trèfle noir  |
|  ♥  |  &hearts;  |  &#9829;  |cœur noir  |
|  ♦  |  &diams;  |  &#9830;  |carreau noir  |
|  ←  |  &larr;  |  &#8592;  |flèche vers la gauche  |
|  ↑  |  &uarr;  |  &#8593;  |flèche vers le haut  |
|  →  |  &rarr;  |  &#8594;  |flèche vers la droite  |
|  ↓  |  &darr;  |  &#8595;  |flèche vers le bas  |
|  ↔  |  &harr;  |  &#8596;  |flèche bilatérale gauche-droite  |

===== Les caractères scientifiques =====

^  caractère  ^  code texte  ^  code numérique  ^  commentaire  ^
|  °  |  &deg;  |  &#176;  |degré  |
|  µ  |  &micro;  |  &#181;  |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  |


===== Ex
emples =====

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"

===== Notes de version =====

  * [28/07/2017] : Article initial

===== Auteurs et sources =====

  * Auteur : [[:user:montuy337513]]

===== Navigation =====

  * [[:accueil|Accueil]]
  * [[:gestion-site-internet]]
  * [[:tutoriel-javascript]]
  * [[:tutoriel-html]]
  * [[:tutoriel-php-mysql]]
  * [[:tutoriel-referencement-seo]]

<nspages -h1 -exclude:subNs: -textPages="Autres liens rapides pouvant vous intéresser">