Pour éviter les symboles bizarres sur la page

L'encodage des caractères

Des caractères typographiques baroques peuvent parfois se glisser dans certains textes de pages web : les lettres accentuées y sont, par exemple, remplacées par des carrés, des points d'interrogation ou des suites de caractères comme é (pour é) , è (pour è) , ê (pour ê) ou à (pour à).

Cette situation peut se produire quand le navigateur utilise un jeu de caractères codés différent de celui qui a été utilisé pour enregistrer le document HTML original.

Afin de s'assurer que le navigateur utilise le jeu de caractères adéquat pour interpréter la page, les webmestres ont avantage à déclarer explicitement l'encodage de caractères utilisé pour la créer.

Déclaration de l'encodage des caractères

Pour afficher correctement le texte d'une page web, le navigateur doit savoir à quel jeu de caractères se référer. L'encodage de caractères utilisé pour réaliser le document peut être spécifié, au niveau serveur, par un en-tête HTTP (HyperText Transfer Protocol) et, dans le document lui-même, par une balise HTML (élément meta).

En-tête HTTP

Le serveur peut fournir au navigateur l'information concernant l'encodage de caractères du document en utilisant le paramètre charset (character set) dans le champs de l'en-tête Content-Type du protocole de communication HTTP.

Par exemple, on déclarera dans l'en-tête HTTP :

Content-Type: text/html; charset=utf-8

Cet en-tête HTTP indique au navigateur que le document a été créé en utilisant le jeu de caractères codés international UTF-8 (Universal Character Set Transformation Format - 8 bits), qui couvre presque tous les caractères, signes de ponctuation et symboles des différents systèmes d'écriture.

Les en-têtes HTTP peuvent être modifiés par une action sur la configuration globale ou locale du serveur web, ou par un langage de script côté serveur. (Pour plus de détails : Voir et modifier les en-têtes HTTP .)

Balise HTML

Si le serveur ne peut envoyer de paramètre charset ou si on souhaite faciliter la consultation des pages en local, l'élément meta peut être utilisé à l'intérieur du document HTML pour fournir au navigateur l'information sur l'encodage de caractères de la page. C'est cependant l'information fournie par le serveur qui sera prioritaire et qui, si elle existe, devra donc être juste; la balise meta devra reprendre cette même information.

Par exemple, on déclarera en début d'en-tête du fichier HTML (entre <head> et </head>) :

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> (en HTML4)

ou

<meta charset="iso-8859-1"> (en HTML5)

Cette balise indique au navigateur que le document a été créé avec le jeu de caractères codés local ISO-8859-1, aussi appelé Latin-1 ou Europe occidentale, destiné à encoder des documents dans le système d'écriture de plusieurs langues parlées en Europe de l'Ouest, mais aussi en Amérique du Nord, en Amérique latine, en Afrique, en Océanie et dans certains pays d'Asie du Sud-Est.

L'encodage par défaut

Aux débuts du web, ASCII était considéré comme l'encodage de caractères par défaut; ISO-8859-1 est ensuite devenu la norme pour les versions HTML 2.0 à HTML 4.01, puis UTF-8 pour HTML5.

Remplacement des caractères par des entités de caractères

Dans certains cas (caractères réservés ou symboles inexistants sur le clavier, par exemple), il peut être impossible d'entrer directement un caractère typographique dans le document HTML : des entités de caractères SGML (Standard Generalized Markup Language), numériques ou alphabétiques, pourront alors être utilisées afin de rendre l'affichage du caractère correctement, à condition bien entendu que ledit caractère soit présent dans la police spécifiée.

Codes numériques HTML

Les entités de caractères numériques (sous forme décimale ou hexadécimale) correspondent au point de code du caractère dans le répertoire Unicode. Elles sont composées d'un nombre précédé du caractère croisillon ou carré #, placé entre l'esperluette & et le point-virgule ; (en hexadécimal, un x est ajouté devant le nombre). Par exemple, pour le signe © (copyright) : &#169; en notation décimale (où 169 est la référence au point de code Unicode du caractère en notation décimale) et &#x00A9; en notation hexadécimale (où 00A9 est la référence au point de code Unicode du caractère en notation hexadécimale). Les entités numériques hexadécimales sont insensibles à la casse.

Codes alphabétiques HTML

Plus conviviales et intuitives que les codes numériques, les entités alphabétiques ou entités de caractères HTML utilisent des noms symboliques placés entre l'esperluette & et le point-virgule ;. Par exemple, pour le signe © (copyright) : &copy; . Les entités HTML sont sensibles à la casse.

Listes d'entités de caractères numériques et alphabétiques

Il est préférable d'utiliser un encodage qui permet d'entrer les caractères dans leur forme réelle plutôt que de les remplacer par des entités de caractères. L'utilisation abusive des entités peut en effet rendre difficile la compréhension et le travail au niveau du code source, et peut également augmenter de façon significative la taille du fichier. Si quelques caractères seulement d'un système d'écriture étranger à l'encodage déclaré doivent être insérés dans le texte, l'utilisation d'entités de caractères peut cependant se justifier. Les caractères réservés HTML sont un cas à part et ils doivent obligatoirement être écrits avec des entités de caractères.

(Les tableaux qui suivent ne sont pas exhaustifs. Ils donnent les correspondances d'entités numériques décimales et d'entités HTML pour certains caractères plus ou moins utilisés et pour des spécificités de la langue française.)

Caractères réservés HTML

caractère entité numérique décimale entité html
& &#38; &amp;
< &#60; &lt;
> &#62; &gt;

Note : Certains caractères réguliers sont utilisés pour coder en (X)HTML. Bien que présents dans le code source de la page, ils ne sont donc pas affichés par le navigateur. Pour que ces caractères ne soient pas interprétés comme du balisage (< ou > qui délimitent les balises) ou comme le début d'une référence de caractère (&) et qu'ils apparaissent dans le contenu affiché à l'écran, ils doivent être écrits à l'aide de leur entité respective.

Lettres ligaturées

caractère entité numérique décimale entité html
Π&#338; &OElig;
œ &#339; &oelig;
Æ &#198; &AElig;
æ &#230; &aelig;

Note : Considérées comme un seul caractère, les ligatures linguistiques sont obligatoires en français. Elles concernent œ (e dans l'o, comme dans œil ou bœuf) et æ (e dans l'a, comme dans ex æquo ou cæcum).

Signes et symboles divers

caractère entité numérique décimale entité html
& &#38; &amp;
# &#35;  
&#9839; &sharp;
§ &#167; &sect;
&#182; &para;
&#8224; &dagger;
&#8225; &Dagger;
© &#169; &copy;
® &#174; &reg;
&#8482; &trade;

Monnaies

caractère entité numérique décimale entité html
&#8364; &euro;
$ &#36;  
¢ &#162; &cent;
£ &#163; &pound;
¥ &#165; &yen;
ƒ &#402; &fnof;
¤ &#164; &curren;

Mathématiques et sciences

caractère entité numérique décimale entité html
< &#60; &lt;
> &#62; &gt;
&#8804; &le;
&#8805; &ge;
= &#61;  
&#8771;  
&#8776; &asymp;
&#8800; &ne;
&#8801; &equiv;
+ &#43;  
- &#8722; &minus;
± &#177; &plusmn;
÷ &#247; &divide;
× &#215; &times;
· &#183; &middot;
&#8260; &frasl;
% &#37;  
&#8240; &permil;
¼ &#188; &frac14;
½ &#189; &frac12;
¾ &#190; &frac34;
¹ &#185; &sup1;
² &#178; &sup2;
³ &#179; &sup3;
º &#186; &ordm;
ª &#170; &ordf;
ƒ &#402; &fnof;
&#8242; &prime;
&#8243; &Prime;
&#8706; &part;
&#8719; &prod;
&#8721; &sum;
&#8730; &radic;
&#8734; &infin;
¬ &#172; &not;
&#8745; &cap;
&#8747; &int;
µ &#181; &micro;
° &#176; &deg;

Ponctuation

caractère entité numérique décimale entité html
" &#34; &quot;
&#8216; &lsquo;
&#8217; &rsquo;
&#8218; &rbquo;
&#8220; &ldquo;
&#8221; &rdquo;
&#8222; &bdquo;
&#8249; &lsaquo;
&#8250; &rsaquo;
« &#171; &laquo;
» &#187; &raquo;
¦ &#166; &brvbar;
&#8211; &ndash;
&#8212; &mdash;
&#8230; &hellip;
¡ &#161; &iexcl;
¿ &#191; &iquest;
~ &#126;  

Caractères accentués

caractère entité numérique décimale entité html
À &#192; &Agrave;
Á &#193; &Aacute;
 &#194; &Acirc;
à &#195; &Atilde;
Ä &#196; &Auml;
Å &#197; &Aring;
Ç &#199; &Ccedil;
È &#200; &Egrave;
É &#201; &Eacute;
Ê &#202; &Ecirc;
Ë &#203; &Euml;
Ì &#204; &Igrave;
Í &#205; &Iacute;
Î &#206; &Icirc;
Ï &#207; &Iuml;
Ñ &#209; &Ntilde;
Ò &#210; &Ograve;
Ó &#211; &Oacute;
Ô &#212; &Ocirc;
Õ &#213; &Otilde;
Ö &#214; &Ouml;
Ø &#216; &Oslash;
Š &#352; &Scaron;
Ù &#217; &Ugrave;
Ú &#218; &Uacute;
Û &#219; &Ucirc;
Ü &#220; &Uuml;
Ý &#221; &Yacute;
Ÿ &#376; &Yuml;
Ž &#381;  
à &#224; &agrave;
á &#225; &aacute;
â &#226; &acirc;
ã &#227; &atilde;
ä &#228; &auml;
å &#229; &aring;
ç &#231; &ccedil;
è &#232; &egrave;
é &#233; &eacute;
ê &#234; &ecirc;
ë &#235; &euml;
ì &#236; &igrave;
í &#237; &iacute;
î &#238; &icirc;
ï &#239; &iuml;
ñ &#241; &ntilde;
ò &#242; &ograve;
ó &#243; &oacute;
ô &#244; &ocirc;
õ &#245; &otilde;
ö &#246; &ouml;
ø &#248; &oslash;
š &#353; &scaron;
ù &#249; &ugrave;
ú &#250; &uacute;
û &#251; &ucirc;
ü &#252; &uuml;
ý &#253; &yacute;
ÿ &#255; &yuml;
ž &#382;  

Note : Si le jeu de caractères a été correctement déclaré (ISO-8859-1 ou UTF-8), il est inutile de coder les caractères accentués en entités de caractères, sauf dans le cas où il n'est pas possible de les entrer directement au clavier, par copier-coller ou autrement.

Note : À moins d'indication contraire, les liens présents ci-dessous sont des liens externes, c'est-à-dire des liens qui pointent vers des ressources extérieures au site actuel et qui ouvriront donc des sites autres que maboite.qc.ca.

Comment bien déclarer l'encodage des caractères d'une page? (Alsacréations)

Explications pour bien comprendre les problèmes d'encodage, distinction entre l'encodage réel du document et l'encodage déclaré.

Charset iso-8859-1, iso-8859-15, utf-8, lequel choisir? (Alsacréations)

Avantages et inconvénients, évolution des tendances.

Introduction aux jeux de caractères (Openweb)

Qu’est-ce qu’un jeu de caractères? Quelle est la différence entre ISO-8859-1, UTF-8 et Windows-1252? Steve Frécinaux présente les différents jeux de caractères.

Character Sets (Internet Assigned Numbers Authority (IANA))

Noms officiels des jeux de caractères qui peuvent être utilisés sur internet.

The Unicode Consortium (Unicode.org)

Site officiel du Unicode Consortium (Consortium Unicode), organisation privée sans but lucratif qui coordonne le développement du standard Unicode.

Unicode (Wikipédia)

Article sur le standard informatique Unicode, développé par le Consortium Unicode, qui permet des échanges de textes dans différentes langues, à un niveau mondial.

Table de caractères Unicode (Unicode-table.com)

Tous les symboles Unicode avec noms et descriptions sur une seule page.

La représentation du document HTML (La Grange)

Traduction des recommandations du W3C concernant la représentation du document HTML.

HTML Document Representation (W3C)

Documentation officielle du W3C concernant la représentation du document HTML, en anglais.

Fixer le paramètre HTTP charset (W3C)

Documentation officielle du W3C concernant le paramètre HTTP charset, en français.

Voir et modifier les en-têtes HTTP (Alsacréations)

Les en-têtes HTTP (HTTP Headers), quels sont les incontournables et comment on peut les modifier.

Le langage HTML/Entités (Wikilivres)

Définition, utilité, liste des entités et applications.

Using character escapes in markup and CSS (W3C)

Comment et quand utiliser les entités de caractères.

Character entity references in HTML 4 (W3C)

Les entités de caractères dans HTML 4.

Codage valide des caractères Windows illégaux en HTML et XHTML (Openweb)

Les caractères codés de 128 à 159, propres à Windows, mais invalides selon les spécifications HTML 4+ et XHTML, ainsi que leurs codes de substitution valides.

On the use of some MS Windows characters in HTML (TUT)

Les problèmes causés par certains caractères spéciaux qui appartiennent au jeu de caractères MS Windows mais pas à ISO Latin-1 (Tampere University of Technology).

partager la page
Monitoring internetVista®

Copyright © 2003-2016 maboite.qc.ca

Tous droits réservés