Codage et documents HTML

Vous avez certainement vus des pages Web affichant un texte comme ci-dessous; cela témoigne d'un mauvais décodage du texte de la page par le navigateur. Qu'est ce que le codage du texte d'un document ?

exemple mauvais décodage

Créez un document html 5 avec Bluefish; appelez le codage.html.

La balise META

Dans le code source de cette page HTML (que vous lisez), vous trouverez par exemple : <meta charset="UTF-8" >

La balise META doit être placée dans l'en-tête du document.

L'attribut CHARSET indique que votre document est un texte codé en UTF-8.

Que sont les «charsets»? Les charsets (jeux de caractères) sont associés à la notion de région linguistique.

Quel est le CHARSET de la page d'accueil du site de l'UPV (regardez le code source de la page pour le savoir)

Codage d'un document informatique

Lorsque vous enregistrez un document avec un logiciel, chaque caractère est codé puis inscrit dans le fichier ; la plupart du temps vous n'avez ni besoin ni envie de savoir quel codage est utilisé, le logiciel se débrouille et c'est transparent pour l'utilisateur; lorsqu'un autre utilisateur ouvre le document, son logiciel est censé reconnaitre le codage et afficher le document correctement.

Les navigateurs doivent donc être capables de faire cette reconnaissance quelle que soit l'origine linguistique d'une page web. La balise META vue ci-dessus indique au navigateur le codage utilisé. Mais cette balise

Lorsque vous créez un document HTML avec un éditeur de texte, si vous ne savez pas quel codage utilise votre éditeur, vous ne pouvez pas deviner la balise META correspondante à inclure dans votre code HTML. Si vous utilisez un logiciel plus élaboré, il générera automatiquement la balise adaptée (par exemple dans Bluefish, lors de l'utilisation du bouton Démarrage rapide)

Observez que cette balise est modifiée (si elle existe) lorsque l'encodage du document est changé via le menu Document/encodage des caractères.

Remarque : en l'absence de la balise META indiquant un CHARSET dans un document html, le navigateur se débrouillera de son mieux pour choisir le charset (il essaie de deviner) si ça ne se passe pas bien (cf l'exemple en début de page) le visiteur de votre page pourra toujours essayer de forcer un autre décodage en changeant le choix du navigateur par menu (par exemple avec Firefox, Affichage > Encodage).

Prenez la page d'accueil du site des cours informatiques de cette université et obligez le navigateur à la décoder avec iso-8859-1; que constatez-vous ?

Pages multilingues

Une page Web utilise un seul Charset à la fois. La plupart des Charset sont limités à une langue. Comment utiliser des caractères "hors codage" ?

Première solution : dans le cas où seulement quelques caractères de votre page ne font pas partie du CHARSET utilisé on peut les écrire sous forme d'"entités HTML".

exemple : écrivez &copy; dans le code de votre page codage.html. Essayez aussi &aring; et regardez l'affichage obtenu.

Vous trouverez sur internet la liste de ces entités. Principe : une entité est un nom qui doit être écrit entre un & et un ;, le navigateur remplace ce nom par le symbole qu'il représente.

Connaissez -vous &iuml; et &oelig; ?

Deuxième solution : on peut aujourd'ui utiliser un Charset universel, c'est à dire capable de coder tout caractère connu. C'est ce que l'on appelle un codage de type UNICODE.

Le CHARSET de type UNICODE principalement utilisé sur le Web aujourd'hui est le Charset appelé UTF-8.

Exercice : avec Notepad++, regardez le menu Encoding ; vous constaterez que l'on peut choisir l'encodage du document.

Si on utilise le charset utf-8 on peut mélanger les alphabets dans la même page Web ; exemple pour cette page:

Si on utilise un autre codage, on ne peut créer de pages multilingues.

Changer le codage d'une page

En HTML, la balise META et son attribut CHARSET précisent au navigateur que le document qu'il "lit" a été codé avec le Charset donné ; ce n'est donc qu'une indication.

Créez un document europe.html avec Bluefish dont le codage sera iso-8859-1 (menu Document/Encodage des caractères). Faites un copier coller des textes chinois et russe ci-dessus dans le document ; essayez d'enregistrer le document. Que se passe-t-il ?

Enregistez le document en "utf-8", remplacez "à la main" le texte "utf-8" de la balise META par "iso-8859-1"; comprenez-vous pourquoi le document s'affiche incorrectement ?

En conclusion, il ne suffit pas que vous ajoutiez une balise META avec un charset="UTF-8" en début de fichier html pour que votre document soit codé réellement dans ce charset. C'est uniquement le logiciel que vous utilisez qui crée ou change le codage au moment de l'enregistrement.

Dreamweaver permet aussi de changer le codage d'un document déjà codé : Modifier:propriétés de la page:codage

Est ce toujours possible de changer le codage d'un document déjà écrit ? non, on peut passer de iso-8859-1 à utf-8 mais pas l'inverse, pourquoi ?

Remarque : quel que soit le codage d'une page ou son pays d'origine, les balises HTML et règles CSS restent en alphabet latin.

Pour le vérifier : allez sur le site d'une ambassade dont le pays n'utilise pas les caractères latins (par exemple la Chine). En général ces sites proposent un affichage en français et un affichage dans la langue du pays, vérifiez ; mais dans les deux cas, les balises sont en anglais.