Le langage HTML/Entités

Un livre de Wikilivres.
Aller à : navigation, rechercher


Définition[modifier | modifier le wikicode]

Le langage HTML utilise un jeu d'entités pour incorporer des caractères spécifiques dans le document. Plus simplement, vous tapez une séquence précise de caractères (oui c'est ça, un mot magique), et miraculeusement il se transforme en un caractère (accentué, spécial, de ponctuation,…) quand vous affichez la page dans un navigateur Web. Ces entités ont toutes la même préfixe : une esperluette « & ». La fin d'une entité est marquée par le caractère point-virgule « ; ».

Il est possible de recourir à deux types d'entités :

  • les entités de type numérique composées d'un nombre précédé du caractère croisillon # (souvent appelé à tort « dièse »[1]) entre l'esperluette et le point-virgule ;
  • les entités de type caractère composées d'une chaîne de caractères entre l'esperluette et le point-virgule.

Ainsi il est possible d'écrire le signe euro (€) de deux manières :

  • € qui en est l'entité numérique décimale (index dans la table des caractères Unicode) ;
  • € qui en est l'entité caractère.

On peut aussi taper l'entité numérique en hexadécimal, en mettant un « x » entre le croisillon et le nombre. Par exemple, Ä est la même chose que Ä, c'est-à-dire « Ä ».

Utilité[modifier | modifier le wikicode]

Les entités permettent d'afficher des caractères qui ne sont pas accessibles depuis le clavier. C'est notamment utile lorsque l'on utilise des symboles mathématiques, ou que l'on veut écrire des mots d'une langue étrangère par rapport au clavier utilisé, ou pour certaines capitales accentuées (comme « É »).

Cela permet également d'utiliser un caractère qui se trouve en dehors du jeu de caractères déclaré en début de fichier (avec <meta http-equiv="Content-Type" content="text/html; charset=…" >, voir le chapitre L'en-tête).

Notons que l'entité numérique fait référence à l'adresse du caractère dans la table Unicode[2], tandis que l'entité caractère est redirigé vers la table selon la définition du type de document (DTD). Ainsi, il est plus simple de retenir l'entité caractère (mnémotechnique), mais l'entité numérique assure la compatibilité quelle que soit l'évolution des DTD.

Liste des entités[modifier | modifier le wikicode]

Quelques exemples d'entités
Caractère spécial Entité caractère Entité numérique Mnémotechnique
Lettres spéciales (diacritiques, ligaturées, non romaines)
É &Eacute; &#201; E (accent) aigu (acute)
Ò &Ograve; &#210; O (accent) grave
 &Acirc; &#194; A (accent) circonflexe
à &Atilde; &#195; A tilde
Ä &Auml; &#196; A umlaut (inflexion allemande, marquée par un tréma)
Å &Aring; &#197; ring = anneau
Æ &AElig; &#198; A et E ligaturés (E dans l'A)
æ &aelig; &#230; a et e ligaturés (e dans l'a)
Œ &OElig; &#338; O et E ligaturés (E dans l'O)
œ &oelig; &#339; o et e ligaturés (e dans l'o)
Ç &Ccedil; &#199; C cédille
Γ &Gamma; &#393; gamma capitale (lettre grecque)
γ &gamma; &#947; gamma minuscule (lettre grecque)
Caractères typographiques
&mdash; &#8212; M dash (tiret de la largeur d'un M, tiret long, tiret d'incise, tiret cadratin)
&ndash; &#8211; N dash (tiret de la largeur d'un N, tiret moyen, tiret d'intervalle, tiret demi-cadratin)
· &middot; &#183; middle dot (point centré, virgule géorgienne)
espace insécable[3] &nbsp; &#160; non breakable space
espace fine[4] &thinsp; &#8201; thin space
espace fine insécable &#8239; non breakable thin space
«  &laquo; &#171; left angle quote (guillemet angulaire gauche, ouvrant)
 » &raquo; &#187; right angle quote (guillemet angulaire droit, fermant)
&bull; &#8226; bullet (puce)
&hellip; &#8230; horizontal ellipse (points de suspension)
Symboles commerciaux et mathématiques
&trade; &#8482; trade mark (marque commerciale)
® &reg; &#174; registred (marque déposée)
© &copy; &#169; copyright (tous droits réservés)
&euro; &#8364;
² &sup2; &#178; superior 2 (2 en exposant, carré)
½ &frac12; &#189; fraction 1/2
± &plusmn; &#177; plus minus (plus ou moins)
&larr; &#8592; left arrow ; voir aussi &rarr; (right →), &uarr; (up ↑), &darr; (down ↓), &harr; (horizontal ↔), &crarr; (carriage return arrow, « retour chariot » ↵)
&rArr; &#8658; right big arrow ; voir aussi &rArr; (right ⇒), &uArr; (up ⇑), &dArr; (down ⇓), &hArr; (horizontal ⇔)
× &times; &#215; times = fois
&sdot; &#8901; scalar multiplication dot (signe de multiplication scalaire)
÷ &divide; &#247; divide = diviser
&radic; &#8730; radical (racine carrée)
&permil; &#8240; per (« pour » en latin) mille
&prop; &#8733; proportionnel
&#8771;
¦ &brvbar; &#166; broken vertical bar (barre verticale interrompue, tube)

Aller plus loin
On peut trouver une liste complète, en français, des entités utilisées par le langage HTML sur alexandre.alapetite.fr/.

Note
Les éditeurs de texte n'ont pas toujours accepté les caractères accentués (non-ASCII pur). Pour avoir les caractères accentués, il fallait donc avoir recours à des entités (par exemple &eacute; pour « é »).
Depuis 2011, avec la généralisation de l'utilisation de l'UTF-8 comme encodage des caractères d'une page Web (réalisée en HTML5 entre autres), le recours aux entités HTML tend à devenir obsolète.
Une alternative consiste à afficher une page HTML contenant les caractères spéciaux (par exemple contenant des entités, numériques ou caractères) puis de faire un copier-coller de la fenêtre du navigateur dans votre code HTML.

Exemple
<em>Dungeons &amp; Dragons</em>&trade;
est le premier jeu de rôle de l'histoire&nbsp;;
c'est aussi le plus joué.
donne
'

Dungeons & Dragons™ est le premier jeu de rôle de l'histoire ; c'est aussi le plus joué.

Applications[modifier | modifier le wikicode]

Espaces[modifier | modifier le wikicode]

On voit que le HTML propose plusieurs espaces : espace justifiante (espace « classique »), espace insécable et espace fine. On n'en utilise qu'une seule à la fois.

L'espace insécable permet de ne pas séparer deux objets, par exemple :

  • les blocs de trois chiffres d'un nombre long ;
  • un nombre de son unité ;
  • un titre (Dr, M., Mgr, …) ou une particule (de) du nom qui le suit ;
  • une ponctuation double (;:!?) du mot qui le précède.

L'espace fine permet d'éloigner légèrement deux caractères pour faciliter la lisibilité, par exemple après de l'italique : comparer « (l) » et « (l ) ». On peut aussi l'utiliser pour séparer les groupes de trois chiffres par une espace fine :

1 360 000 (espace normale)
1 360 000 (espace fine)

Le problème de ces deux applications est qu'une fin de ligne peut séparer les deux objets (bien que le caractère &thinsp; soit considéré comme insécable par certains navigateurs, il devrait être sécable). Pour une espace fine insécable, on utilisera &#x202f;.

Si l'on veut avoir une espace plus grande, comme pour une tabulation, on pourra utiliser :

  • un tableau sans bordure (cf. Tableaux), permettant d'aligner plusieurs blocs de texte ;
  • du CSS pour insérer une grande espace.

Par exemple, le code CSS pour mettre une espace de 5 cadratins (5 lettres « M ») à gauche serait

<span style="margin-left:5em">texte</span>

Afficher du code HTML[modifier | modifier le wikicode]

Imaginez que vous vouliez afficher du code HTML sur votre page. Vous voulez par exemple afficher le texte « <em> ». Seulement voilà, le navigateur va croire que c'est une balise, et ne rien afficher mais mettre le texte en italique. La solution est de de ne pas utiliser les caractères < et > mais les entités correspondantes : respectivement &lt; (de l'anglais less than, « inférieur à ») et &gt; (de l'anglais greater than, « plus grand que »). C'est donc &lt;em&gt; qu'il faut taper.

À noter que pour afficher « C'est par là -> », même si le navigateur va en général faire ce qu'on a envie qu'il fasse à savoir afficher le symbole « > » (ou « < » le cas échéant) tel quel, il est de bon ton de remplacer quand même « > » et « < » par leurs entités, sous peine de se faire remonter les bretelles par le validateur.

De la même façon, si vous voulez afficher le texte « &euro; », eh bien il faudra ruser pour que le navigateur ne croit pas qu'on veut afficher le caractère €. On remplacera donc le caractère « & » par l'entité correspondante : &amp;.
Et pour afficher le texte "&amp;" on fait comment ? Je sens que vous avez deviné : &amp;amp;.

Comme pour < et >, si vous voulez afficher le texte « &salut; » (qui n'existe pas comme entité hein, on a juste envie de mettre une esperluette et un point virgule où ça nous chante), « Hey, &salut ça va ? », ou « Machin & Compagnie », il est recommandé de remplacer « & » par &amp;.

Notez que les deux ruses de sioux exposées précédemment sont utilisées sur cette page, vous n'avez qu'à regarder le code source !

Il y a aussi d'autres utilisations des entités. Par exemple elle vous permettent d'utiliser des caractères que vous ne pouvez pas taper au clavier. Par exemple, je ne sais pas, tout le monde ne sait pas taper ∉ (le signe mathématique pour dire « n'appartient pas à ») alors qu'avec un petit &notin; , le tour est joué.

Notes[modifier | modifier le wikicode]

  1. mais le caractère dièse est différent : « ♯ », obtenu par &#9839;
  2. Pour en savoir plus sur Unicode, vous pouvez consulter le livre : À la découverte d'Unicode.
  3. en typographie française, on met une espace insécable avant les deux-points « : », point-virgule « ; », points d'exclamation et d'interrogation « ! ? », et à l'intérieur des guillemets et des tirets d'incise ; cela évite d'avoir ces caractères séparés du mot qui les précède — ou les suit — par un retour de ligne
  4. en typographie, le mot « espace » est féminin