Le langage HTML/Entités

Le langage HTML

• Introduction
• Structure de base
• Bien commencer le HTML
• L'en-tête
• Caractères spéciaux et entités
• Titre et paragraphes
• Style de texte
• Placement des objets
• Liens
• Images
• Listes
• Tableaux
• Formulaires
• Cadres
• Multimédia
• Internationalisation
• Autres balises
• Zones de mise en forme
• XML et XHTML
• HTML5
• Conclusion
• Mots réservés

Définition

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 sont introduites par une esperluette « & ». La fin d'une entité est marquée par le caractère point-virgule « ; ».

&nom_de_l_entité;

Il est possible de recourir à deux formes 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 ») entre l'esperluette et le point-virgule ; le nombre est soit sous forme décimale, soit sous forme hexadécimal quand il est préfixé par la lettre x ;
• les entités de type nom 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 trois manières :

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

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é

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, 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

Quelques exemples d'entités

Caractère spécial	Entité caractère	Entité numérique	Mnémotechnique
Caractères à ne pas interpréter en HTML
&	&	&38;	& et commercial (ampersand)
<	&lt;	&60;	< signe inférieur (lower than)
>	&gt;	&62;	> signe supérieur (greater than)
'	&apos;	&39;	' apostrophe
"	&quot;	&34;	" guilemets (quotes)
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	&nbsp;	&#160;	non breakable space
espace fine	&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)
Flèches
←	&larr;		Left Arrow (flèche vers la gauche)
→	&rarr;		Right Arrow (flèche vers la droite)
↑	&uarr;		Up Arrow (flèche vers le haut)
↓	&darr;		Down Arrow (flèche vers le bas)
⇆	&lrarr;		Left over Right Arrow (flèche vers la gauche au dessus d'une vers la droite)
⇄	&rlarr;		Right over Left Arrow (flèche vers la gauche au dessus d'une vers la gauche)
⇅	&udarr;		Up then Down Arrow (flèche vers le haut puis vers le bas)
⇵	&duarr;		Down then Up Arrow (flèche vers le bas puis vers le haut)
⇐	&lArr;		thick Left Arrow (flèche épaisse vers la gauche)
⇇	&llarr;		double Left Arrow (double flèche vers la gauche)
↔	&harr;		Horizontal Arrow (flèche épaisse horizontale)
↕	&varr;		Vertical Arrow (flèche épaisse verticale)
⇔	&hArr;		thick Horizontal Arrow (flèche épaisse horizontale)
⇕	&vArr;		thick Vertical Arrow (flèche épaisse verticale)
↖	&nwarr;		North West Arrow (flèche nord-ouest)
↗	&nearr;		North East Arrow (flèche nord-est)
↘	&searr;		South East Arrow (flèche sud-est)
↙	&swarr;		South West Arrow (flèche sud-ouest)

---

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 é 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

Espaces

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 (D^r, M., M^gr, …) 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   soit considéré comme insécable par certains navigateurs, il devrait être sécable). Pour une espace fine insécable, on utilisera  .

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

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 ne pas utiliser les caractères < et > mais les entités correspondantes : respectivement < (de l'anglais less than, « inférieur à ») et > (de l'anglais greater than, « plus grand que »). C'est donc <em> 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 : &.
Et pour afficher le texte "&amp;" on fait comment ? Je sens que vous avez deviné : &.

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 &.

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 ∉ , le tour est joué.

Liens externes

• (en) « HTML Character Entity References », sur Unicode Character Table (consulté le 10 février 2023)