Les différents codages des caractères html
Les différents codages des caractères html

 

 

1/ Pour écrire une page web, plusieurs langages sont utilisés...

Le codage de la page est déclaré dans l'en-tête de la page, dans le "code source", en bonne place dans les "balises méta". Cette déclaration va régir le comportement du navigateur pour la lecture des pages et notamment pour l'affichage des tables de caractères.
Le plus courant, celui déclaré par défaut dans Dreamweaver® par exemple, est l'ISO ISO-8859-1 qui intègre l'essentiel des caractères "latins" mais aussi cyrilliques, orientaux, arabes...

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Exemple de page :

  Texte  
  Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.  
  Codage ISO-8859-1  
  G&eacute;n&eacute;ralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a &eacute;t&eacute; modifi&eacute;), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'op&eacute;rateur sait au premier coup d'&oelig;il que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas d&eacute;rang&eacute;e par le contenu, il demeure concentr&eacute; seulement sur l'aspect graphique.  
     

On remarque que certains caractères sont codés (commençant par un "&"), ce sont typiquement les caractères accentués.

Exemples de caractères accentués :

  Texte  
  & é à ç " Ê â ù  
  Codage ISO-8859-1  
  &amp; &eacute; &agrave; &ccedil; &quot;& Ecirc;& acirc;& ugrave;  
     

Exemple de page :

  Texte  
  Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.  
  Codage UTF-8  
  Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.  
     

Eh hop, pas de différence ! - vous pourrez le vérifier dans le code source de cette page. Mine de rien, ce choix de l'utilisation de l'UTF-8 se révèle très pratique, par sa simplicité et son évidence.

 

2 - Sachez que depuis plusieurs années, le format UTF-8 prend l'avantage...
et cela tombe bien car il ne nécessite aucun codage spécifique.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Exemples de caractères accentués :

  Texte  
  &éàç"Êâù  
  Codage UTF-8  
  &éàç"Êâù  
     

 

 
Symboles code clavier Code ISO Code HTML Description
espace Alt+ 0160 &#160; &nbsp; Espace insécable
¡ Alt+ 0161 &#161; &iexcl; Exclamation inversée
¢ Alt+ 0162 &#162; &cent; Symbole centime 
£ Alt+ 0163 &#163; &pound; Symbole livre 
¤ Alt+ 0164 &#164; &curren; Symbole monétaire
¥ Alt+ 0165 &#165; &yen; Signe Yen
¦ Alt+ 0166 &#166; &brvbar; ou &brkbar; Barre verticale interrompue
§ Alt+ 0167 &#167; &sect; Signe section 
¨ Alt+ 0168 &#168; &uml; ou &die; Tréma
© Alt+ 0169 &#169; &copy; Copyright
ª Alt+ 0170 &#170; &ordf; Ordinal féminin
« Alt+ 0171 &#171; &laquo; Chevron gauche ou guillemet gauche
¬ Alt+ 0172 &#172; &not; Signe non
­ Alt+ 0173 &#173; &shy; Tiret conditionnel
® Alt+ 0174 &#174; &reg; Marque déposée
¯ Alt+ 0175 &#175; &macr; ou &hibar; Macron
° Alt+ 0176 &#176; &deg; Signe degrés
± Alt+ 0177 &#177; &plusmn; Plus ou moins
² Alt+ 0178 &#178; &sup2; Deux exposant
³ Alt+ 0179 &#179; &sup3; Trois exposant
´ Alt+ 0180 &#180; &acute; Accent aigu
µ Alt+ 0181 &#181; &micro; Signe micro
Alt+ 0182 &#182; &para; Signe paragraphe
· Alt+ 0183 &#183; &middot; Point milieu
¸ Alt+ 0184 &#184; &cedil; Cédille
¹ Alt+ 0185 &#185; &sup1; Un exposant
º Alt+ 0186 &#186; &ordm; Ordinal masculin
» Alt+ 0187 &#187; &raquo; Chevron droit ou guillemet droit
¼ Alt+ 0188 &#188; &frac14; Fraction un quart
½ Alt+ 0189 &#189; &frac12; Fraction un demi
¾ Alt+ 0190 &#190; &frac34; Fraction trois-quarts
¿ Alt+ 0191 &#191; &iquest; Point d'interrogation inversé
À Alt+ 0192 &#192; &Agrave; A accent grave majuscule
Á Alt+ 0193 &#193; &Aacute; A accent aigu majuscule 
 Alt+ 0194 &#194; &Acirc; A accent circonflexe majuscule 
à Alt+ 0195 &#195; &Atilde; A tilde majuscule
Ä Alt+ 0196 &#196; &Auml; A tréma majuscule
Å Alt+ 0197 &#197; &Aring; A anneau majuscule
Æ Alt+ 0198 &#198; &AElig; AE majuscule (digramme soudé ae, lettre)
Ç Alt+ 0199 &#199; &Ccedil; C cédille majuscule
È Alt+ 0200 &#200; &Egrave; E accent grave majuscule
É Alt+ 0201 &#201; &Eacute; E accent aigu majuscule
Ê Alt+ 0202 &#202; &Ecirc; E accent circonflexe majuscule
Ë Alt+ 0203 &#203; &Euml; E tréma majuscule
Ì Alt+ 0204 &#204; &Igrave; I accent grave majuscule
Í Alt+ 0205 &#205; &Iacute; I accent aigu majuscule
Î Alt+ 0206 &#206; &Icirc; I accent circonflexe majuscule
Ï Alt+ 0207 &#207; &Iuml; I tréma majuscule
Ð Alt+ 0208 &#208; &ETH; ou &Dstrok; Eth islandais
Ñ Alt+ 0209 &#209; &Ntilde; N tilde majuscule
Ò Alt+ 0210 &#210; &Ograve; O accent grave majuscule
Ó Alt+ 0211 &#211; &Oacute; O accent aigu majuscule
Ô Alt+ 0212 &#212; &Ocirc; O accent circonflexe majuscule
Õ Alt+ 0213 &#213; &Otilde; O tilde majuscule
Ö Alt+ 0214 &#214; &Ouml; O tréma majuscule
× Alt+ 0215 &#215; &times; Signe infini
Ø Alt+ 0216 &#216; &Oslash; O barré majuscule
Ù Alt+ 0217 &#217; &Ugrave; U accent grave majuscule
Ú Alt+ 0218 &#218; &Uacute; U accent aigu majuscule
Û Alt+ 0219 &#219; &Ucirc; U accent circonflexe majuscule
Ü Alt+ 0220 &#220; &Uuml; U tréma majuscule
Ý Alt+ 0221 &#221; &Yacute; Y accent aigu majuscule
Þ Alt+ 0222 &#222; &THORN; Thorn islandais majuscule
ß Alt+ 0223 &#223; &szlig; s dur allemand (szet)
à Alt+ 0224 &#224; &agrave; a accent grave minuscule
á Alt+ 0225 &#225; &aacute; a accent aigu minuscule
â Alt+ 0226 &#226; &acirc; a accent circonflexe minuscule
ã Alt+ 0227 &#227; &atilde; a tilde minuscule
ä Alt+ 0228 &#228; &auml; a tréma minuscule
å Alt+ 0229 &#229; &aring; a rond minuscule
æ Alt+ 0230 &#230; &aelig; e dans l'a minuscule
ç Alt+ 0231 &#231; &ccedil; c cédille minuscule
è Alt+ 0232 &#232; &egrave; e accent grave minuscule
é Alt+ 0233 &#233; &eacute; e accent aigu minuscule
ê Alt+ 0234 &#234; &ecirc; e accent circonflexe minuscule
ë Alt+ 0235 &#235; &euml; e tréma minuscule
ì Alt+ 0236 &#236; &igrave; i accent grave minuscule
í Alt+ 0237 &#237; &iacute; i accent aigu minuscule
î Alt+ 0238 &#238; &icirc; i accent circonflexe minuscule
ï Alt+ 0239 &#239; &iuml; i tréma minuscule
ð Alt+ 0240 &#240; &eth; eth islandais minuscule
ñ Alt+ 0241 &#241; &ntilde; n tilde minuscule
ò Alt+ 0242 &#242; &ograve; o accent grave minuscule
ó Alt+ 0243 &#243; &oacute; o accent aigu minuscule
ô Alt+ 0244 &#244; &ocirc; o accent circonflexe minuscule
õ Alt+ 0245 &#245; &otilde; o tilde minuscule
ö Alt+ 0246 &#246; &ouml; o tréma minuscule
÷ Alt+ 0247 &#247; &divide; Signe division 
ø Alt+ 0248 &#248; &oslash; o barré minuscule
ù Alt+ 0249 &#249; &ugrave; u accent grave minuscule
ú Alt+ 0250 &#250; &uacute; u accent aigu minuscule
û Alt+ 0251 &#251; &ucirc; u accent circonflexe minuscule
ü Alt+ 0252 &#252; &uuml; u tréma minuscule
ý Alt+ 0253 &#253; &yacute; y accent aigu minuscule
þ Alt+ 0254 &#254; &thorn; Thorn islandais minuscule
ÿ Alt+ 0255 &#255; &yuml; y tréma minuscule
℗   &#8471;   Copyright des enregistrements sonores
       
! Alt+ 033 &#33;    
" Alt+ 034 &#34; &quot; Guillemet double
# Alt+ 035 &#35;   # (carré ou dièse)
$ Alt+ 036 &#36;   symbole Dollar
% Alt+ 037 &#37;    
& Alt+ 038 &#38; &amp; Et commercial
’ Alt+ 039 &#39;    
( Alt+ 040 &#40;    
) Alt+ 041 &#41;    
* Alt+ 042 &#42;    
+ Alt+ 043 &#43;    
, Alt+ 044 &#44;    
- Alt+ 045 &#45;    
. Alt+ 046 &#46;    
/ Alt+ 047 &#47;   / (barre oblique) ou "slash"
0 Alt+ 048 &#48;    
1 Alt+ 049 &#49;    
2 Alt+ 050 &#50;    
3 Alt+ 051 &#51;    
4 Alt+ 052 &#52;    
5 Alt+ 053 &#53;    
6 Alt+ 054 &#54;    
7 Alt+ 055 &#55;    
8 Alt+ 056 &#56;    
9 Alt+ 057 &#57;    
: Alt+ 058 &#58;   Deux points
; Alt+ 059 &#59;   Virgule
< Alt+ 060 &#60; &lt; Signe "inférieur à"
= Alt+ 061 &#61;   Signe "égal"
> Alt+ 062 &#62; &gt; Supérieur à
? Alt+ 063 &#63;   Point d'interrogation
@ Alt+ 064 &#64;   "a" commercial ou "arobase"
A Alt+ 065 &#65;    
B Alt+ 066 &#66;    
C Alt+ 067 &#67;    
D Alt+ 068 &#68;    
E Alt+ 069 &#69;    
F Alt+ 070 &#70;    
G Alt+ 071 &#71;    
H Alt+ 072 &#72;    
I Alt+ 073 &#73;    
J Alt+ 074 &#74;    
K Alt+ 075 &#75;    
L Alt+ 076 &#76;    
M Alt+ 077 &#77;    
N Alt+ 078 &#78;    
O Alt+ 079 &#79;    
P Alt+ 080 &#80;    
Q Alt+ 081 &#81;    
R Alt+ 082 &#82;    
S Alt+ 083 &#83;    
T Alt+ 084 &#84;    
U Alt+ 085 &#85;    
V Alt+ 086 &#86;    
W Alt+ 087 &#87;    
X Alt+ 088 &#88;    
Y Alt+ 089 &#89;    
Z Alt+ 090 &#90;    
[ Alt+ 091 &#91;   Crochet fermant
\ Alt+ 092 &#92;   \ (barre oblique inversée)
ou "anti-slash"
] Alt+ 093 &#93;   Crochet fermant
^ Alt+ 094 &#94;   Accent circonflexe
_ Alt+ 095 &#95;   Tiret (signe "moins")
` Alt+ 096 &#96;    
a Alt+ 097 &#97;    
b Alt+ 098 &#98;    
c Alt+ 099 &#99;    
d Alt+ 100 &#100;    
e Alt+ 101 &#101;    
f Alt+ 102 &#102;    
g Alt+ 103 &#103;    
h Alt+ 104 &#104;    
i Alt+ 105 &#105;    
j Alt+ 106 &#106;    
k Alt+ 107 &#107;    
l Alt+ 108 &#108;    
m Alt+ 0109 &#109;    
n Alt+ 0110 &#110;    
o Alt+ 0111 &#111;    
p Alt+ 0112 &#112;    
q Alt+ 0113 &#113;    
r Alt+ 0114 &#114;    
s Alt+ 0115 &#115;    
t Alt+ 0116 &#116;    
u Alt+ 0117 &#117;    
v Alt+ 0118 &#118;    
w Alt+ 0119 &#119;    
x Alt+ 0120 &#120;    
y Alt+ 0121 &#121;    
z Alt+ 0122 &#122;    
{ Alt+ 0123 &#123;   Parenthèse ouvrante
| Alt+ 0124 &#124;   Barre droite
} Alt+ 0125 &#125;   Parenthèse fermante
~ Alt+ 0126 &#126;   ~ (tilde)
 Alt+ 0127      
€ Alt+ 0128 &#128; ou &#8364; &euro; Symbole Euro
 Alt+ 0129      
‚ Alt+ 0130 &#130;   Apostrophe
ƒ Alt+ 0131 &#131;    
„ Alt+ 0132 &#132;   Guillemet fermant
… Alt+ 0133 &#133;   Trois petits points
† Alt+ 0134 &#134;   Signe de croix
‡ Alt+ 0135 &#135;    
ˆ Alt+ 0136 &#136;    
‰ Alt+ 0137 &#137;    
Š Alt+ 0138 &#138;    
‹ Alt+ 0139 &#139; &lt;  
Œ Alt+ 0140 &#140;    
Ž Alt+ 0142 &#142;    
Ž Alt+ 0142 &#142;    
 Alt+ 0143      
 Alt+ 0144    
‘ Alt+ 0145 &#145; &nbsp;  
’ Alt+ 0146 &#146; !  
“ Alt+ 0147 &#147;    
” Alt+ 0148 &#148;    
• Alt+ 0149 &#149;    
– Alt+ 0150 &#150;    
— Alt+ 0151 &#151;    
˜ Alt+ 0152 &#152;    
™ Alt+ 0153 &#153;   Marque déposée
š Alt+ 0154 &#154;    
› Alt+ 0155 &#155; &gt;  
œ Alt+ 0156 &#156; &oelig;  
 Alt+ 0157      
ž Alt+ 0158 &#158;    

 

Comment créer une page au format HTML ?
Cliquer sur le lien :

Les balises de base à utiliser pour mettre en forme vos pages "HTML"

 
 
 
 
  Retour à la page d'accueil ››   
Webmaster Bretagne - 4, rue des Francs-Bourgeois - France - Tél : 06.22.46.76.30 - E-mail -
 
Envie de rénorer votre intérieur ? Testez vos idées en 3D avant de commencer les travaux !
Nous vous proposons de tester des idées de décoration intérieure de votre maison grâce à la modélisation en 3D