HTML5 – Caractères spéciaux et Entités HTML

LEÇON

 

Caractères réservés

Le mélange de balises et texte ordinaire dans un document implique l'existence de caractères réservés (symboles < et >) pour démarquer les balises.

Si on veut afficher littéralement ces caractères, sans qu'ils soient confondus avec des balises, on a besoin d'un moyen pour "échapper" à l’interpréteur.

Ainsi pour afficher le caractère < on écrit &lt; et pour > on écrit &gt; (en anglais, lt = less than, et gt = greater than).

Un caractère exprimé de cette façon s’appelle une entité HTML (en anglais : HTML entity). Il commence toujours avec & et se termine avec ;

Pour échapper à l’interpréteur donc, on utilise le caractère & qui devient obligatoirement à son tour un caractère réservé, affichable via l'entité HTML &amp; (en anglais amp=ampersand)

Exemple :

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple</title>
    </head>
    <body>
        <p>3 + 5 &lt; 10</p>
    </body>
</html>

Affichage :

3 + 5 < 10

 

Espaces supplémentaires

On a déjà vu qu'enchaîner plusieurs espaces et/ou des retours à la ligne dans le code source un document HTML n'a pas d'effet sur l'affichage (séparer 2 mots dans le document HTML par plusieurs espaces et retours à la ligne, et à l'affichage on voit que les mots sont côté-à-côte séparés d'un seul espace).

Pour mettre littéralement un espace supplémentaire, on utilise l'entité HTML : &nbsp;

Exemple :

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple</title>
    </head>
    <body>
        <p>
            entre chacun de ces mots il y a 3 espaces :<br>
            one&nbsp;&nbsp;&nbsp;two&nbsp;&nbsp;&nbsp;three
        </p>
    </body>
</html>

Affichage :

entre chacun de ces mots il y a 3 espaces :
one   two   three

 

Les caractères en dehors de l'encodage

Si un caractère n'est pas prévu dans l'encodage (charset) du document (par exemple le symbole dans un fichier ISO-8859-1), il peut être ajouté via son entité &euro;

Autres exemples d'entité :  &eacute; &Eacute; &egrave; &acirc; pour é É è â

Remarque : si on encode ses documents en UTF-8 et on spécifie le charset UTF-8 (charset par défaut en HTML5) on peut, dans la plupart des cas, se passer de ces entités car l'UTF-8 comprend quasiment tous les caractères dont on a besoin (y compris le symbole €). Mais attention : quand on mélange sur une même page les caractères de plusieurs sources (fichiers HTML, chaînes PHP, bases de données, et cetera) il faut s'assurer que l'encodage des caractères est uniforme si on veut éviter des problèmes d'affichage.

Anciens standards : avant HTML2, le standard était l'ASCII et on avait besoin des entités HTML pour tous les caractères européens avec accents. De HTML2 à HTML4, le standard était ISO-8859-1 qui comprenait les caractères européens avec accent mais il lui manquait certains caractères, notamment le symbole €. Depuis HTML5, le standard est UTF-8, très complet.

 

Spécifier les entités par leur numéro

Une entité, par exemple le caractère &, peut être écrite par son nom &amp; ou par son numéro &#38;

Un entité exprimée par son numéro commence toujours par &# et se termine par ;

warningUne entité par numéro à connaître : &#39; qui est l'apostrophe. Intéressant car beaucoup se trompe en utilisant &apos; mais cette entité n'existe pas dans les spécifications HTML, bien qu'elle soit comprise par certains navigateurs ! Piège à éviter donc.

 

Référence

W3C Character Entity Reference pour HTML5

 

 


 

EXERCICES

  1. Créer un document HTML et y mettre des entités HTML pour vous familiariser avec :
    • le remplacement de caractère réservé par entité HTML (entité par nom)
    • l'inclusion d'espaces supplémentaires via &nbsp;
    • la modification d'entité par nom en entité par numéro (utiliser la page de référence W3C pour les entités caractères)
  2. Créer un document HTML pour faire apparaître dans le navigateur la chaîne suivante (littéralement) : &nbsp;
  3. Créer deux documents HTML et tester la différence d'affichage entre <p>3 + 5 < 10</p> et <p>3 + 5 &lt; 10</p>. Vérifier sur plusieurs navigateurs différents. Est-ce que l'affichage est identique ? Pourquoi ce résultat ? Faire valider les deux fichiers sur le validator W3C. Y a-t-il une différence ?
  4. Créer un document HTML comme dans l'exemple ci-dessous. Utiliser les options de sauvegarde de l'éditeur (notepad++ ou autre) pour spécifier l'encodage du fichier en UTF-8. L'ouvrir dans le navigateur et observer l'affichage de la page. Ensuite, modifier le charset, mettre ISO-8859-1 au lieu de UTF-8. Rouvrir dans le navigateur et remarquer la différence. Comment expliquer ce qu'on voit ?
  5. Dans l'exercice précédent, il y a une incohérence entre l'encodage déclaré au niveau HTML (charset ISO-8859-1) et l'encodage réel (UTF-8) du fichier. Essayer de sauvegarder ou recréer le fichier en ISO-8859-1. Que se passe-t-il ?

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Exemple</title>
    </head>
    <body>
        <p>
            literal character : €
        </p>
        <p>
            entity by name : &euro;
        </p>
        <p>
            entity by number : &#8364;
        </p>
    </body>
</html>