Les entités HTML

Les entités HTML sont des codes utilisés pour afficher des caractères réservés ou spéciaux qui ne peuvent pas être directement tapés dans un document HTML. Par exemple, le caractère < (inférieur à) est utilisé pour ouvrir une balise HTML : pour l’afficher à l’écran, on utilise l’entité &lt;.

Pourquoi les utiliser ?

  • Afficher des caractères réservés (<>&"') sans qu’ils soient interprétés comme du code.
  • Insérer des symboles spéciaux (©, ™, €, flèches, etc.) ou des caractères absents du clavier.

Les principales entités

Espaces et ponctuation typographique

CaractèreEntité nomméeEntité numériqueDescription
Espace insécable&nbsp;&#160;Empêche la coupure de ligne entre deux mots.
Espace fine&thinsp;&#8201;Espace plus étroit qu’un espace normal.
Espace cadratin&emsp;&#8195;Espace de la largeur d’un “M” (cadratin).
Espace demi-cadratin&ensp;&#8194;Moitié d’un cadratin.
Guillemet français ouvrant&laquo;&#171;«
Guillemet français fermant&raquo;&#187;»
Guillemet anglais ouvrant&ldquo;&#8220;
Guillemet anglais fermant&rdquo;&#8221;
Apostrophe typographique&rsquo;&#8217;’ (à utiliser pour les apostrophes courbes).
Tiret cadratin&mdash;&#8212;— (pour les dialogues ou plages).
Tiret demi-cadratin&ndash;&#8211;– (pour les intervalles).
Points de suspension&hellip;&#8230;

Symboles courants

CaractèreEntité nomméeEntité numériqueDescription
Copyright&copy;&#169;©
Marque déposée&reg;&#174;®
Marque commerciale&trade;&#8482;
Euro&euro;&#8364;
Dollar&dollar;&#36;$
Livre sterling&pound;&#163;£
Yen&yen;&#165;¥
Paragraphe&sect;&#167;§
Degré&deg;&#176;° (pour les températures).
Plus ou moins&plusmn;&#177;±
Multiplication&times;&#215;×
Division&divide;&#247;÷

Caractères réservés en HTML

CaractèreEntité nomméeEntité numériqueDescription
Inférieur à&lt;&#60;<
Supérieur à&gt;&#62;>
Esperluette&amp;&#38;&
Guillemet double&quot;&#34;
Apostrophe&apos;&#39;

Symboles mathématiques

CaractèreEntité nomméeEntité numériqueDescription
Somme&sum;&#8721;
Infini&infin;&#8734;
Racine carrée&radic;&#8730;
Intégrale&int;&#8747;
Environ égal&asymp;&#8776;
Différent de&ne;&#8800;
Inférieur ou égal&le;&#8804;
Supérieur ou égal&ge;&#8805;

Flèches

CaractèreEntité nomméeEntité numériqueDescription
Flèche gauche&larr;&#8592;
Flèche droite&rarr;&#8594;
Flèche haut&uarr;&#8593;
Flèche bas&darr;&#8595;
Flèche double gauche&lArr;&#8656;
Flèche double droite&rArr;&#8658;

Autres symboles utiles

CaractèreEntité nomméeEntité numériqueDescription
Cœur&hearts;&#9829;
Étoile&star;&#9733;
Étoile vide&starf;&#9734;
Puce&bull;&#8226;
Ligne horizontale&mdash;&#8212;— (peut servir de séparateur).

Lettres accentuées et caractères internationaux

CaractèreEntité nomméeEntité numériqueDescription
À majuscule&Agrave;&#192;À
É majuscule&Eacute;&#201;É
È majuscule&Egrave;&#200;È
Ç cédille&Ccedil;&#199;Ç
Ñ&Ntilde;&#209;Ñ
Ü&Uuml;&#220;Ü
ß (eszett)&szlig;&#223;ß

Bonne pratique

  • Privilégiez les entités nommées pour la lisibilité du code.
  • Utilisez les entités numériques pour des caractères moins courants ou non couverts par une entité nommée.

Exercice

  1. Créez une page HTML affichant la phrase : "L'édition numérique" & l'accessibilité sont liées. (Utilisez les entités pour les guillemets et l’apostrophe.)
  2. Affichez la liste suivante avec les symboles appropriés :
    • Copyright : ©
    • Marque déposée : ®
    • Euro : €