Comment utiliser les caractères spéciaux et les symboles en HTML

Il peut arriver que vous ayez besoin d’utiliser un caractère spécial sur votre site web, comme le symbole de l’esperluette. Cependant, vous ne pouvez pas simplement taper « &amp ; » dans votre code HTML, car il s’agit d’un symbole HTML réservé.

Au lieu de cela, vous pouvez utiliser des entités HTML ou des codes spéciaux pour représenter ces caractères. Cela vous permet d’ajouter des symboles à votre page web sans interférer avec le code HTML proprement dit.

Que sont les symboles en HTML ?

Détails du contenu : afficher

Lorsque vous créez un site web en HTML, vous utilisez une série de symboles pour la ponctuation. Bien que vous puissiez ajouter la plupart des caractères directement à votre page, certains ont une signification particulière ou sont difficiles à taper. Par exemple, le langage HTML utilise des symboles tels que les crochets (&lt ; et &gt ;), les esperluettes (&amp 😉 et les guillemets ( » et ‘) pour représenter la structure de votre contenu.

Un navigateur Web interprète généralement le symbole du crochet comme une balise ouvrante ou fermante. Si ce n’est pas ce que vous voulez, cela peut provoquer des erreurs dans votre page web. Voici quelques exemples de symboles nécessitant un code d’entité :

L’esperluette (&)
Moins de (<)
Plus grand que (>)
Double guillemet (")
Guillemet simple (')

D’autres symboles, tels que les symboles de copyright et de marque déposée, ne nécessitent pas de code d’entité, mais vous pouvez tout de même en utiliser un si vous le souhaitez. Ils peuvent être difficiles à taper ou même ne pas être pris en charge par votre éditeur de texte. En voici quelques exemples :

Symbole de copyright (©)
Symbole de la marque (™)
Symbole de marque déposée (®)

Que sont les entités numériques et les entités nommées ?

Vous pouvez représenter chaque symbole à l’aide d’un code d’entité numérique, et les plus courants à l’aide d’une entité nommée. Voici quelques exemples :

Symbole	Code de l’entité nommée	Code de l’entité numérique
Ampoules	&amp ;	&#38 ;
Moins de	&lt ;	&#60 ;
Supérieur à	&gt ;	&#62 ;
Double guillemet	&quot ;	&#34 ;
Citation unique	&apos ;	&#39 ;
Copyright	&copie ;	&#169 ;
Symbole de la marque	&trade ;	&#8482 ;
Symbole de marque déposée	&reg ;	&#174 ;

L’utilisation du code numérique ou du nom affichera le symbole correspondant. Par exemple, l’utilisation de « &copy ; » ou « &#169 ; » affichera le symbole du copyright.

Ajouter des Emojis à votre page web

Vous pouvez également afficher des emojis à l’aide d’un code d’entité. Tous les emojis ont un code d’entité numérique en HTML, mais ils n’ont pas tous un code d’entité nommée. En voici quelques exemples :

Symbole	Code de l’entité numérique
Visage souriant (????)	&#x1F603 ;
Visage qui rit (????)	&#x1F606 ;
Visage souriant avec halo (????)	&#x1F607 ;

Comment insérer des symboles sur une page Web en utilisant des codes d’entités

Vous pouvez insérer des codes d’entité dans le contenu de votre page HTML. La visualisation de votre page web dans un navigateur convertira les codes en leur symbole correspondant.

Dans un nouveau fichier HTML, ajoutez la structure de base d’une page web HTML :

 <!DOCTYPE html>
<html>
  <head>
    <title>Symbol and Entity Example</title>
    <meta charset="UTF-8">
  </head>
  <body>
    
  </body>
</html>

À l’intérieur de la balise body, ajoutez du contenu HTML. Incluez le code de l’entité nommée ou numérique pour le symbole que vous souhaitez afficher :
```
 <h1>HTML Symbols</h1>
<p>Copyright symbol: &copy;</p>
<p>Ampersand symbol: &amp;</p>
<p>Trademark symbol: &trade;</p>
<p>Smiling Face: &#x1F603;</p> 
```
Ouvrez votre fichier HTML dans un navigateur web pour afficher les symboles correspondants :

Utilisation de symboles HTML spéciaux ou réservés sur votre site web

Maintenant que vous savez comment ajouter des symboles à votre page web HTML, vous pouvez explorer d’autres contenus intéressants que vous pouvez ajouter pour rendre votre site web plus attrayant.