A quoi ça sert d'encoder sa page web ?

L'encodage d'une page web sert à informer le navigateur du jeu de caractères qui est utilisé dans la page.

Ainsi, si vous encodez votre page en ISO-8859-1 (appelé aussi Latin 1) vous pourrez afficher 191 caractères. Cette norme regroupe tous les caractères qui sont utilisés par les langues occidentales les plus courantes (anglais, espagnol, allemand, français, etc...) et c'est donc la norme de nombreux pays occidentaux.

[xml]
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <title>Votre titre</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  </head>
  <body>
   ...votre code...
  </body>
</html>

Mais bien sûr, il existe bien d'autres codages, qui tiennent compte des caractères propres à chacun des alphabets du monde. Ainsi, le Shift-JIS (SJIS) permet d'avoir accès à l'alphabet japonais.

Mais au fil du temps, il est apparu le besoin de pouvoir supporter plusieurs écritures dans un document. Un exemple serait un dictionnaire Français-Japonais qui aurait besoin d'afficher sur la même page nos caractères latins mais aussi les caractères japonais.

Le format d'encodage UTF-8 permet cette prouesse.

[xml]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    <title>Votre titre</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
  </head>
  <body>
    ...votre code...
  </body>
</html>

Il permet de représenter des milliers de caractères. Pour vous en rendre compte, vous pouvez allez voir sur cette page qui donne un aperçu de tous les caractères que vous pouvez afficher : UTF-8 Sampler

Unicode est une norme qui a été inventé pour donner à tous les caractères de n'importe quel langage un identifiant unique. Ainsi la dernière version d'Unicode représente 137 468 caractères.

Des tableaux permettent de connaître l'identifiant attribué à chacun des caractères, et ceci pour chacun des langages : The Unicode Character Code Charts By Script. Si votre page n'est pas encodée en UTF-8, et que vous voulez quand même afficher des caractères d'un autre langage, vous aurez à vous servir de ce tableau pour connaître l'identifiant du caractère et l'insérer dans votre page (voir la mise en pratique plus bas).

Pour pouvoir afficher tous les caractères, il vous faut bien sûr la police correspondant au langage que vous voulez afficher. Ainsi, pour afficher du japonais, il vous installer une police comme la Fonte MS Gothic. Vous pouvez aussi utiliser une police unicode qui permet d'afficher de nombreux caractères de tous les langages comme la police Arial Unicode MS. Cette dernière est composée de 51180 caractères, mais pèse plus de 20 mo. Elle est distribuée avec la suite Microsoft Office.

Mise en pratique

Voici un exemple de page encodée en UTF-8 qui affiche à la fois des caractères latins et des caractères japonais. Je préfère vous mettre des captures écrans plutôt que directement le code pour éviter les problèmes de polices manquantes.

Je vous conseille d'utiliser un éditeur de texte qui permette de choisir votre encodage comme Unired.

Le code :

capture d'écran de l'éditeur

Le résultat sur votre navigateur :

capture d'écran du navigateur

Prenons le même contenu, caractères latins et caractères japonais, et encodons la page en ISO-8859-1.

Le code :

capture d'écran de l'éditeur

Vous pouvez déjà voir que votre éditeur, quand il est configuré en ISO-8859-1, ne fait pas apparaître les caractères japonais, ni d’ailleurs le signe qui n’apparaît pas dans l’en codage ISO-8859-1, mais dans le ISO-8859-15 :

œ

Le résultat sur votre navigateur :

capture d'écran du navigateur

Il y a tout de même un moyen, quand on a une page encodée dans un certain iso, d'afficher des caractères issus d'une autre langue. Ainsi, si je veux afficher mes caractères japonais dans une page encodée en ISO-8859-1, il va falloir que je fasse appel à des entités. Les entités sont représentées sous la forme &#160; . Elles permettent d’afficher les caractères unicode que l’on a vu plus haut.

En utilisant Le Convertisseur de code Unicode vous pourrez connaitre les entités correspondants aux caractères, et inversement.

Le code :

capture d'écran de l'éditeur

Le résultat sur votre navigateur :

capture d'écran du navigateur

Vous pouvez voir que le résultat sur le navigateur est identique que sur la page encodée en UTF-8, mais par contre le code est beaucoup moins "propre".

Conclusion

Cette petite démonstration nous montre que le codage de caractères en UTF-8 nous donne plus de possibilités quand il s'agit de jongler avec plusieurs langages. Et puis, ce qui me plait dans l'UTF-8, c'est que cela tend vers la normalisation des pages web prônée par le W3C. La multiplication des normes d'encodages propres à chaque langage avait tendance à nous renvoyer dans la tour de Babel que fut jusqu'alors la toile. Toutes les pages encodées en UTF-8 utilisent un même alphabet, donc, à défaut de parler la même langue, on écrit en suivant la même norme, c'est déjà ça ;-)

En savoir plus :