HTML - Symboles

Lucas D. -

Entité HTML

Une entité HTML est un morceau de texte ("chaîne") qui commence par une esperluette (&) et se termine par un point-virgule (;). Les entités sont utilisées pour afficher des caractères réservés (qui seraient autrement lus comme du code HTML) et des caractères invisibles (comme les espaces insécables). Vous pouvez également les utiliser à la place d'autres caractères difficiles à taper avec un clavier standard.

Il existe deux types principaux d'entités HTML :

Entité nommée

Une entité nommée a un nom. Par exemple, l'entité nommée pour le symbole de copyright (©) est ©.

Elles sont sensibles à la casse et se terminent par un point-virgule.

Entité numérique

Les entités numériques peuvent être représentées par une valeur numérique. Il en existe deux types :

  • Décimal : Les entités numériques décimales sont écrites sous la forme &#N;, où N est le numéro décimal ISO 10646. Par exemple, l'entité numérique pour le symbole de copyright (©) est ©

  • Hexadécimal : Les entités numériques hexadécimales sont écrites sous la forme &#xN;, où N est le numéro hexadécimal ISO 10646. Par exemple, l'entité numérique pour le symbole de copyright (©) est ©

L'utilisation des entités HTML est simple - il suffit de connaître le nom ou le numéro de l'entité pour le caractère que vous souhaitez afficher. Les entités peuvent être utilisées dans le texte de votre document HTML, ainsi que dans les valeurs des attributs.

Symboles HTML courants

HTML fournit de nombreux symboles que vous pouvez utiliser dans les pages web. Voici quelques symboles courants et leurs entités HTML correspondantes :

Symboles monétaires

  • Euro : L'entité HTML pour le symbole Euro (€) est €.
  • Livre sterling : L'entité HTML pour le symbole Livre sterling (£) est £.
  • Yen : L'entité HTML pour le symbole Yen (¥) est ¥.
  • Cent : L'entité HTML pour le symbole Cent (¢) est ¢.

Symboles de ponctuation

  • Esperluette : L'entité HTML pour le symbole Esperluette (&) est &.
  • Supérieur à et Inférieur à : Les entités HTML pour les symboles Supérieur à (>) et Inférieur à (<) sont respectivement &gt; et &lt;.
  • Guillemets : Les entités HTML pour les Guillemets ouvrants ("), Guillemets fermants ("), Apostrophe ouvrante ('), et Apostrophe fermante ('') sont :
    • Guillemets ouvrants ("): “
    • Guillemets fermants ("): ”
    • Apostrophe ouvrante ('): ‘
    • Apostrophe fermante ('): ’

Symboles mathématiques

  • Plus et Moins : Les entités HTML pour les symboles Plus (+) et Moins (-) sont :

    • Plus (+): +
    • Moins (−): -

  • Multiplication et Division

    • Multiplication (×): ×
    • Division (÷): ÷

Fractions

Les fractions suivantes ont des codes spécifiques :

Conseil: Un quart (¼)

&frac14;

Conseil: Un demi (½)

&lt;&frac12&gt;;

Conseil: Trois quarts (¾)

&lt;&frac34&gt;;

Symboles de flèches

Les directions de flèches suivantes ont des codes spécifiques :

Flèches Haut, Bas, Gauche, Droite

Conseil: Flèche vers le haut (↑)

&lt;&uarr&gt;;

Conseil: Flèche vers le bas (↓)

&lt;&darr&gt;;

Conseil: Flèche vers la gauche (←)

&lt;larr&gt;;

Conseil: Flèche vers la droite (→)

&lt;rarr&gt;;

Doubles flèches

Conseil: Double flèche vers la gauche (⇐)

&amp;lArr;

Conseil: Double flèche vers le haut (⇑)

&amp:uArr;

Conseil: Double flèche vers la droite (⇒)

&amp:rArr;

Utilisation des symboles HTML

Il existe deux principales façons d'insérer des symboles dans votre code HTML :

Insertion directe de symboles

Vous pouvez insérer directement certains symboles dans votre code HTML en utilisant votre clavier. Vous pouvez utiliser le symbole du dollar ($), le signe plus (+) ou le signe égal (=) directement dans votre code.

Conseil: Insertion directe de symboles

<p>Le prix est de 99$.</p>
<p>2 + 2 = 4</p>

Utilisation des entités HTML

Pour les symboles qui ne sont pas disponibles sur votre clavier ou qui ont une signification particulière en HTML (comme < ou >), vous devez utiliser des entités HTML. Vous pouvez utiliser soit des entités nommées, soit des entités numériques.

Conseil: Utilisation des entités HTML

<p>Voici le symbole du copyright : &copy;</p>
<p>Voici le symbole de l'euro : &euro;</p>
<p>Voici le symbole de marque déposée : &#174;</p>

Lors de l'utilisation de symboles dans vos pages web, tenez compte de ces bonnes pratiques :

  • Utilisez des entités pour les caractères réservés : Utilisez toujours des entités HTML pour les caractères réservés en HTML, comme < (&lt;), > (&gt;) et & (&amp;). L'utilisation des caractères réels peut perturber votre code HTML.
  • Soyez cohérent : Choisissez une méthode (entités nommées ou numériques) et tenez-vous y sur l'ensemble de votre site web pour la cohérence et la lisibilité.
  • Testez votre page : Testez toujours votre page web dans plusieurs navigateurs pour vous assurer que les symboles s'affichent correctement.
  • Pensez à l'accessibilité : Certains lecteurs d'écran peuvent ne pas lire correctement tous les symboles. Fournissez un texte alternatif si nécessaire pour garantir que tous les utilisateurs puissent accéder au contenu.

N'oubliez pas que, bien que les symboles puissent ajouter un intérêt visuel et du sens à vos pages web, ils doivent être utilisés avec parcimonie et de manière réfléchie pour améliorer l'expérience utilisateur. Voici la traduction en français :

Compatibilité des navigateurs

La plupart des navigateurs web modernes prennent en charge les symboles et entités HTML. Les navigateurs couramment utilisés, comme Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge et Internet Explorer, peuvent afficher la plupart des symboles sans problème.

Il existe quelques incohérences connues avec certains symboles dans des navigateurs spécifiques :

  • Anciennes versions de navigateurs : Les versions plus anciennes des navigateurs, en particulier Internet Explorer (avant la version 9), peuvent ne pas afficher correctement tous les symboles. Si votre site web doit prendre en charge des navigateurs plus anciens, testez vos pages et envisagez de fournir un contenu alternatif si nécessaire.

  • Prise en charge des polices : Certains symboles peuvent ne pas s'afficher correctement si l'appareil de l'utilisateur ne dispose pas d'une police incluant ce caractère. Cela est plus probable avec des symboles moins courants. Pour minimiser ce problème, vous pouvez utiliser des polices web sécurisées ou fournir des polices de secours.

  • Problèmes d'encodage : Si votre document HTML ne spécifie pas le bon encodage de caractères (comme UTF-8), certains symboles pourraient ne pas s'afficher correctement. Définissez toujours l'encodage de caractères approprié dans la section head de votre HTML comme ceci :

Conseil: Character Encoding

<meta charset="UTF-8">
  • Incohérences des noms d'entités : Certains navigateurs peuvent reconnaître les noms d'entités en minuscules (comme &copy;), tandis que d'autres peuvent exiger des majuscules (&COPY;). Pour éviter ce problème, utilisez toujours des noms d'entités en minuscules, car ils sont plus largement pris en charge.

Pour offrir une bonne expérience aux utilisateurs, testez vos pages web contenant des symboles sur différents navigateurs et appareils. Cela vous aidera à identifier et à résoudre les problèmes et incohérences spécifiques à chaque navigateur.

Si vous utilisez des symboles moins courants ou si la prise en charge des navigateurs est une préoccupation pour votre site web, envisagez de fournir un texte alternatif ou des images pour transmettre le même sens. Cela aidera à garantir que tous les utilisateurs peuvent accéder à votre contenu, quel que soit leur navigateur ou leur appareil.