Gestion de l’encodage des caractères en HTML et CSS (tutoriel)

Pourquoi faut-il lire ce document ?

Si un navigateur n’est pas capable de détecter l’encodage des caractères utilisés dans une page, les contenus peuvent devenir illisibles. Les informations dans ce tutoriel sont particulièrement importantes pour les personnes qui gèrent ou développent un site multilingue. Déclarer l’encodage des caractères d’un document est cependant important pour toutes les personnes qui produisent du HTML ou du CSS et qui utilisent des caractères non-ASCII, car même si l’apparence d’un document semble correcte, les paramètres des navigateurs des lecteurs peuvent avoir une incidence sur la lisibilité. Ce tutoriel vous permettra de comprendre ces problématiques et de faire ainsi les bons choix.

Objectifs

À la fin de ce tutoriel, vous devriez

Public visé : auteurs de contenus HTML et CSS. Ce contenu s’applique également à la création de documents dans un éditeur ou par l’intermédiaire d’un script.

Ce tutoriel rassemble et relie des articles qui, pris dans leur ensemble, vous aident à comprendre comment gérer les aspects essentiels de la création de contenus en HTML et CSS en rapport avec les caractères et leur encodage.

En bref

Enregistrez vos pages en UTF-8.

Déclarez systématiquement l’encodage de votre document. Utilisez l’en-tête HTTP si possible. Utilisez également systématiquement une déclaration dans le document.

<meta charset="utf-8"/>

Vous pouvez utiliser @charset ou les en-têtes HTTP pour déclarer l’encodage de votre feuille de style, mais ceci est seulement nécessaire si celle-ci contient des caractères non-ASCII ou si, pour une raison particulière, il ne vous est pas possible de vous assurer que les encodages du HTML et des feuilles de style associées sont identiques.

Essayez d’éviter d’utiliser l’indicateur d’ordre des octets (byte-order mark - BOM) en UTF-8 et assurez vous que votre code HTML est enregistré en Unicode forme de normalisation C (normalization form C - NFC).

Évitez d’utiliser des séquences d’échappement, à l’exception des caractères invisibles ou ambigus. Et n’utilisez pas les caractères de contrôle Unicode si vous pouvez utiliser des balises à leur place.

Informations contextuelles essentielles

Si vous n’êtes pas familier à ce sujet, il vous sera nécessaire de comprendre un certain nombre de concepts fondamentaux afin de suivre les différentes parties du tutoriel. Si ces concepts vous sont familiers, vous pouvez passer à la section suivante.

Choisir et appliquer un encodage de caractères

Un contenu est composé d’une séquence de caractères. Les caractères représentent des lettres de l’alphabet, des signes de ponctuation, etc. Mais ce contenu est stocké dans l’ordinateur en une séquence d’octets, qui sont eux des valeurs numériques. Parfois, il faut plus d’un octet pour représenter un seul caractère. Comme les codes utilisés par les espions, la manière dont la séquence d’octets est convertie en caractères dépend de la clé qui a été utilisée pour encoder le texte. Dans notre contexte, la clé est appelée encodage de caractères. Il existe de nombreux encodages de caractères à notre disposition.

Choisir et appliquer un encodage de caractères vous propose des conseils simples pour choisir l’encodage de caractères qui convient à votre contenu et comment appliquer celui-ci.

Comment déclarer un encodage de caractères

Vous devriez toujours spécifier l’encodage utilisé pour une page HTML ou XML au risque que les caractères de votre contenu soient incorrectement interprétés. Il ne s’agit pas seulement de lisibilité pour votre public, car les machines ont également besoin de plus en plus de comprendre vos données. Il est aussi nécessaire de vérifier que vous n’avez pas spécifié plusieurs encodages différents en différents emplacements.

Déclarer un encodage de caractères en HTML offre des recommandations rapides à ceux qui veulent juste savoir quoi faire, et des informations plus détaillées pour ceux qui en ont besoin.

Déclarer un encodage de caractères en CSS offre des informations relatives à CSS.

L’indicateur d’ordre des octets (BOM)

L’indicateur d’ordre des octets, ou BOM, est un concept que vous allez rencontrer quand vous utiliserez un encodage de caractères de type Unicode, tel que UTF-8 ou UTF-16. Dans certains cas vous devrez retirer le BOM, dans d’autres l’ajouter.

L’indicateur d’ordre des octets (BOM) en HTML vous permet de comprendre ces questions.

Formes de normalisation Unicode

La normalisation est quelque chose dont vous devez avoir conscience si vous créez des contenus en UTF-8, que ce soit des pages HTML ou des feuilles de style CSS, en particulier si vous avez affaire à des textes dont l’écriture utilise les accents et autres signes diacritiques.

Normalisation en HTML et CSS vous donne plus d’explications.

Utiliser les séquences d’échappement

Vous pouvez utiliser des séquences d’échappement pour représenter n’importe quel caractère en HTML, XML ou CSS avec exclusivement des caractères ASCII.

Utilisation des séquences d’échappement dans des documents balisés et en CSS vous indique les meilleures pratiques pour l’utilisation des séquences d’échappement et vous explique comment les utiliser quand elles sont nécessaires.

Caractères ou balises ?

Pour finir, il existe un certain nombre de caractères Unicode similaires à des caractères de contrôle dont certains remplissent le même rôle que des balises. Il faut donc savoir lesquels utiliser et lesquels éviter.

Caractères ou balises ? vous donne une réponse.