Codage UTF-8 et caractères spéciaux (français) dans HTML

utf-8-caracteres-speciaux-htmlJ'ai cherché désespérément une solution à mon problème de codage, sans résultat pendant quelques années. Les caractères spéciaux comme le "é", "à", "ç", "î", etc. s'affichaient un � au coté HTML, surtout quand la page HTML a été générée par PHP (WordPress).

En essayant valider ma page avec W3C, il dit :

 
 
 
 
 
 

Sorry, I am unable to validate this document because on line 21 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.
The error was: utf8 "\xE9" does not map to Unicode.

Traduction française :

Désolé, je ne suis pas en mesure de valider ce document parce que sur la ligne 21 il contenait un ou plusieurs octets que je ne peux pas interpréter comme utf-8 (en d'autres termes, les octets constatées ne sont pas des valeurs valides dans l'encodage des caractères spécifié). S'il vous plaît vérifier à la fois le contenu du fichier et l'indication de codage de caractères.
L'erreur était: utf8 "\ XE9" ne correspond pas à Unicode

En faite, le xE9 correspond à la lettre "é" qui se trouve dans mon meta description.

J'ai lu plusieurs astuces sur le net mais le problème persistait et j'ai vu que je ne suis pas seul avec ce souci.

 

Meta charset

La première chose que vous devez vérifier, c'est la balise meta charset dans le <head>. Le code doit être synchronisé au type de fichier.

HTML5

<meta charset="UTF-8" />

PHP (WP par exemple)

<meta charset="<?php bloginfo( 'charset' ); ?>" />

HTML 4 et XHTML 1.x

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

Utiliser cette balise META n’est pas indispensable. En effet, les informations qu’elle donne devraient logiquement être envoyées par le serveur web, au moment où il envoie la page HTML au navigateur. Mais redoubler cette information dans la page HTML elle-même permet d’avoir une information sur l’encodage des caractères utilisé (UTF-8 ou ISO-8859-1 ou d’autres encore), ce qui s’avèrera très utile dans les cas suivants:

  • Le serveur web, mal configuré, n’envoie pas les informations sur l’encodage. Le navigateur web va alors tenter de les trouver dans le code HTML de la page.
  • Dans tous les cas où la page HTML est un fichier local, ouvert directement par l’utilisateur et pas consulté depuis un serveur web. Par exemple pour la documentation en HTML fournie avec un logiciel, pour une page d’information sur un CD ou DVD, lorsque l’utilisateur enregistre une page web dans ses documents, etc.

Lire plus des balises meta → sur la page de Alsacreations.com

 

Écriture en code HTML

Vous avez la possibilité d'utiliser les codes HTML mais ce n'est pas une jolie solution. Par exemple, si vous disposez un fichier .po pour la traduction ou vous cherchez les mots contenant des caractères français dans un fichier php, l'écriture en utilisant des noms entités HTML est une solution alternative.
Vous trouvez les noms (HTML Entity names) dans le tableau des codes HTML ici !

Pour écrire le mot "évènement" :

&eacute;v&egrave;nement

 

Base de données

Si vous utilisez une base de données, vérifiez déjà si les données sont bien stockés en UTF-8 dans tes tables.
Si vous gérez la bdd dans phpMyAdmin, dans la colonne "Interclassement", il faut rendre le code en utf8_general_ci.
Cochez les tables non en UTF8_general_ci, puis cliquez en haut sur l'Opérations. Là, vous devriez pouvoir choisir "utf8_general_ci", puis cliquez sur "exécuter". Vous pouvez le faire aussi table par table → structure → opérations → choisir "utf8_general_ci" → exécuter.

 

Dans la colonne Interclassement

 

L'éditeur : Bloc-notes et Dreamweaver

J'ai lu quelque part que quelqu'un qui a utilisé Dreamweaver a découvert que son éditeur est le responsable du mauvais codage. Donc, cette personne a conseillé de supprimer le fichier mal codé du serveur, puis l'éditer à nouveau dans bloc-notes, sauvegarder en UTF-8, puis renvoyer le fichier réécrit au serveur. Étonnement, ça m'a aidé une fois mais pas la deuxième fois concernant un autre site web. Essayez cette méthode quand même, on sait jamais...

Puis, plus tard, j'ai "entendu parler" qu'il faut sauvegarder les fichiers en UTF-8 sans BOM.

Et que je n'ai pas trouvé comment vérifier si Bloc-note enregistre les fichiers sans BOM, j'ai retourné vers Dreamweaver, qui reste un logiciel professionnel. J'ai cherché le réglage de codage. Rendez-vous au menu, choisissez ÉditionPréférencesNouveau document. Réglez le Codage par défaut en "Unicode (UTF-8)" et décochez "Inclure une signature Unicode (BOM)".

 

Dans l'option de menu Édition

Génial ! ... je pensais, mais je me suis trompé, le problème a persisté. Donc, retour vers les forums, discussions après discussions, quand quelqu'un mentionne le réglage de Dreamweaver à nouveau mais cette fois-ci, cette personne me dit le réglage dans un autre endroit...

Rendez-vous au menu, choisissez ModifierPropriétés de la page...Titre/codage, et voilà, je vois que la case "Inclure une signature Unicode (BOM)" est cochée. Décochez-le si c'est coché, ça peut être votre solution, pour vous aussi !

 

Dans l'option de menu Modifier

Les commentaires sont fermés.