Caractères spéciaux HTML : liste complète

Vous développez un site web et vous vous arrachez les cheveux sur les accents qui s’affichent mal ? Votre copyright © devient un point d’interrogation ? Vos guillemets français « » se transforment en hiéroglyphes ? Vous n’êtes pas seul dans cette galère.

Les caractères spéciaux HTML sont la solution à tous ces problèmes d’affichage. Voici ce que vous allez découvrir :

• La liste exhaustive de tous les caractères spéciaux organisés par catégorie
• Les codes exacts à utiliser (entités HTML et codes numériques)
• Les bonnes pratiques pour éviter les erreurs d’affichage
• Les outils qui vous feront gagner un temps précieux
• Les pièges classiques à éviter absolument

Fini les caractères qui s’affichent en mode “alien” sur votre site. Après cette lecture, vous maîtriserez parfaitement l’art des entités HTML.

Pourquoi utiliser des caractères spéciaux ?

Les caractères spéciaux HTML résolvent un problème fondamental du web : l’universalité de l’affichage. Quand vous tapez directement un caractère accentué comme “é” dans votre code, vous prenez le risque qu’il s’affiche différemment selon le navigateur, le système d’exploitation ou l’encodage du fichier.

Les entités HTML garantissent un affichage identique partout. Elles commencent toujours par & et se terminent par ;. Par exemple, é affiche systématiquement “é”, peu importe la configuration de l’utilisateur.

Cette standardisation devient vitale quand vous utilisez des symboles mathématiques (∑, ∞, ≠), des monnaies (€, £, ¥) ou des caractères de langues étrangères. Sans entités HTML, votre contenu risque de ressembler à du charabia sur certains appareils.

L’encodage UTF-8 moderne réduit ce problème, mais les entités HTML restent la méthode la plus fiable pour les caractères critiques. Elles sont notamment indispensables pour les caractères réservés HTML comme <, > et & qui ont une signification technique dans le code.

Un autre avantage : la lisibilité du code source. Voir &copy; dans votre HTML indique clairement que vous voulez afficher un copyright, même sans aperçu visuel.

Liste complète des caractères spéciaux HTML (par catégorie)

Espaces et ponctuation de base

La ponctuation pose souvent des problèmes subtils d’affichage. Voici les entités essentielles :

Caractère	Entité HTML	Code numérique	Description
(espace insécable)	 		Empêche le retour à la ligne
…	…	…	Points de suspension
!	!	!	Point d’exclamation
?	?	?	Point d’interrogation
:	:	:	Deux-points
;	;	;	Point-virgule
‘	'	‘	Apostrophe
“	"	“	Guillemet double
@	@	@	Arobase
&	&	&	Esperluette
#	#	#	Dièse

L’espace insécable (&nbsp;) mérite une attention particulière. Il empêche la césure entre deux mots, utile pour “M. Dupont” ou “10 €” qui doivent rester sur la même ligne.

Ponctuation spécialisée et symboles

Ces caractères donnent une finition professionnelle à vos textes :

Caractère	Entité HTML	Code numérique	Utilisation
–	–	–	Demi-tiret (incises)
—	—	—	Tiret long (dialogues)
·	·	·	Point médian
•	•	•	Puce
¡	¡	¡	Point d’exclamation inversé
¿	¿	¿	Point d’interrogation inversé
¶	¶	¶	Symbole paragraphe
§	§	§	Symbole section

Les guillemets français (&laquo; « et &raquo; ») donnent un aspect soigné aux citations, particulièrement pour les sites francophones.

Flèches et directions

Parfaites pour les interfaces utilisateur et les diagrammes :

Caractère	Entité HTML	Code numérique	Usage
←	←	←	Navigation précédent
→	→	→	Navigation suivant
↑	↑	↑	Retour en haut
↓	↓	↓	Voir plus bas
↔	↔	↔	Navigation bidirectionnelle
⇐	⇐	⇐	Flèche double gauche
⇒	⇒	⇒	Flèche double droite

Symboles de jeux et formes

Utiles pour créer des interfaces ludiques ou décoratives :

Caractère	Entité HTML	Code numérique	Description
♠	♠	♠	Pique
♥	♥	♥	Cœur
♦	♦	♦	Carreau
♣	♣	♣	Trèfle
◊	◊	◊	Losange

Monnaies

Indispensables pour les sites e-commerce internationaux :

Caractère	Entité HTML	Code numérique	Monnaie
€	€	€	Euro
$	$	$	Dollar
£	£	£	Livre sterling
¥	¥	¥	Yen
¢	¢	¢	Cent
¤	¤	¤	Monnaie générique

Symboles mathématiques et scientifiques

Comparaisons et relations :

Caractère	Entité HTML	Code numérique	Signification
<	&lt;	<	Inférieur
>	&gt;	>	Supérieur
≤	&le;	≤	Inférieur ou égal
≥	&ge;	≥	Supérieur ou égal
≠	&ne;	≠	Différent
≈	&asymp;	≈	Approximativement égal
≡	&equiv;	≡	Équivalent

Opérations arithmétiques :

Caractère	Entité HTML	Code numérique	Opération
+	+	+	Addition
−	−	−	Soustraction
±	±	±	Plus ou moins
×	×	×	Multiplication
÷	÷	÷	Division

Fractions et exposants :

Caractère	Entité HTML	Code numérique	Valeur
¼	¼	¼	Un quart
½	½	½	Un demi
¾	¾	¾	Trois quarts
¹	¹	¹	Exposant 1
²	²	²	Exposant 2
³	³	³	Exposant 3

Symboles scientifiques avancés :

Caractère	Entité HTML	Code numérique	Description
°	°	°	Degré
µ	µ	µ	Micro
∞	∞	∞	Infini
√	√	√	Racine carrée
∑	∑	∑	Somme
∏	∏	∏	Produit
∈	∈	∈	Appartient
∉	∉	∉	N’appartient pas

Lettres accentuées

Lettres françaises courantes :

Caractère	Entité HTML	Code numérique	Exemple d’usage
à	à	à	“à propos”
á	á	á	Mots espagnols
â	â	â	“âge”
é	é	é	“café”
è	è	è	“très”
ê	ê	ê	“être”
ë	ë	ë	“Noël”
î	î	î	“île”
ï	ï	ï	“naïf”
ô	ô	ô	“côte”
ù	ù	ù	“où”
û	û	û	“sûr”
ü	ü	ü	Mots allemands
ç	ç	ç	“français”
œ	œ	œ	“cœur”

Les majuscules accentuées suivent le même principe avec une majuscule dans l’entité : &Eacute; pour É, &Agrave; pour À, etc.

Alphabet grec

L’alphabet grec est fréquemment utilisé en mathématiques, physique et statistiques :

Lettres minuscules :

• α (&alpha;), β (&beta;), γ (&gamma;), δ (&delta;)
• ε (&epsilon;), ζ (&zeta;), η (&eta;), θ (&theta;)
• ι (&iota;), κ (&kappa;), λ (&lambda;), μ (&mu;)
• ν (&nu;), ξ (&xi;), ο (&omicron;), π (&pi;)
• ρ (&rho;), σ (&sigma;), τ (&tau;), υ (&upsilon;)
• φ (&phi;), χ (&chi;), ψ (&psi;), ω (&omega;)

Lettres majuscules : Les entités suivent le même nom avec une majuscule : &Alpha;, &Beta;, &Gamma;, etc.

Exemples concrets d’usage :

• &pi; (π) pour les formules géométriques
• &alpha; (α) pour les coefficients
• &Delta; (Δ) pour exprimer une variation
• &Omega; (Ω) pour la résistance électrique

Bonnes pratiques et erreurs à éviter

Règles fondamentales

Utilisez toujours l’encodage UTF-8. Ajoutez cette ligne dans la section <head> de vos pages :

html

<meta charset=”UTF-8″>

Cette déclaration permet d’afficher correctement la plupart des caractères spéciaux, même sans entités HTML. Elle constitue votre première ligne de défense contre les problèmes d’affichage.

Respectez scrupuleusement la syntaxe. Les entités HTML sont sensibles à la casse. &eacute; fonctionne, &Eacute; donne É, mais &eAcute; ne donnera rien. Le point-virgule final est obligatoire : &euro ne s’affichera pas, seul &euro; produit €.

Privilégiez les entités nommées aux codes numériques quand elles existent. &copy; est plus parlant que © pour un copyright. Votre code reste lisible et maintenable.

Cas d’usage spécifiques

Pour les caractères réservés HTML (<, >, &), les entités sont obligatoires si vous voulez les afficher comme du texte. Exemple :

html

<p>Pour écrire une balise HTML, tapez &lt;p&gt; et &lt;/p&gt;</p>

Pour les guillemets dans les attributs HTML, utilisez systématiquement &quot; :

html

<img alt=”Logo de l&apos;entreprise &quot;Martin &amp; Associés&quot;” src=”logo.png”>

Pour les espaces insécables, &nbsp; évite les césures malheureuses :

html

<p>Prix : 299&nbsp;€</p>

<p>M.&nbsp;Alexandre Martin</p>

<p>Article&nbsp;42</p>

Erreurs classiques à éviter

Ne mélangez pas les encodages. Si votre fichier est en ISO-8859-1 mais que vous déclarez UTF-8, les caractères accentués s’afficheront mal. Vérifiez la cohérence entre l’encodage du fichier et la déclaration <meta charset>.

N’inventez pas d’entités. &heart; n’existe pas, seul &hearts; (♥) fonctionne. En cas de doute, vérifiez dans la documentation officielle W3C.

Évitez le copier-coller d’autres sites pour récupérer des caractères spéciaux. Vous risquez d’importer des caractères mal encodés. Utilisez plutôt les entités HTML correspondantes.

Attention aux CMS et éditeurs WYSIWYG qui convertissent automatiquement vos entités HTML en caractères visibles. WordPress, par exemple, transforme parfois &eacute; en “é” dans l’éditeur. Vérifiez le code source final.

Tests et validation

Testez sur plusieurs navigateurs et appareils. Chrome, Firefox, Safari et Edge peuvent interpréter différemment certains caractères exotiques. Un test sur mobile révèle souvent des problèmes d’affichage invisibles sur desktop.

Utilisez les outils de validation W3C pour détecter les entités malformées. Le validateur HTML signale les erreurs de syntaxe dans les entités.

Vérifiez l’affichage avec différents encodages si vous travaillez avec des contenus multilingues. Certains caractères asiatiques nécessitent des précautions particulières.

Au-delà de la technique HTML, la réputation en ligne joue aussi un rôle clé dans la visibilité : consultez notre analyse de la plateforme Addviseo.

Outils pour gagner du temps

Générateurs et références en ligne

HTML Entity Encoder/Decoder (freeformatter.com) convertit automatiquement votre texte en entités HTML. Collez votre contenu, l’outil génère le code propre avec toutes les entités nécessaires.

W3Schools HTML Entities Reference offre la liste complète officielle avec exemples visuels. Bookmark essentiel pour tout développeur web.

Unicode Character Table (unicode-table.com) permet de rechercher n’importe quel caractère par nom, catégorie ou apparence visuelle. Indispensable pour les symboles exotiques.

Raccourcis clavier et méthodes rapides

Sur Windows :

• Alt + code numérique (pavé numérique) : Alt + 0233 pour é
• Touches Windows + ; pour l’outil emoji/symboles

Sur Mac :

• Option + combinaisons : Option + e puis e pour é
• Cmd + Control + Espace pour le visualiseur de caractères

Extensions de navigateur :

• “HTML Entity Character Lookup” pour Chrome
• “Character Entity Reference” pour Firefox

Ces extensions ajoutent un bouton dans votre navigateur pour insérer rapidement des entités HTML.

Snippets et modèles pour éditeurs

Visual Studio Code : Créez des snippets personnalisés pour vos entités favorites :

json

“copyright”: {

  “prefix”: “copy”,

  “body”: “&copy;”,

  “description”: “Copyright symbol”

}

Sublime Text : Package “HTML Entity Snippets” avec auto-complétion intelligente.

Notion templates : Préparez des blocs de texte avec les entités courantes pour vos projets récurrents.

Scripts d’automatisation

Si vous manipulez régulièrement de gros volumes de contenu, ces scripts PHP/JavaScript convertissent automatiquement les caractères spéciaux :

javascript

function htmlEntities(str) {

  return str.replace(/[\u00A0-\u9999<>\&]/g, function(i) {

    return ‘&#’ + i.charCodeAt(0) + ‘;’;

  });

}

Cette fonction transforme tous les caractères non-ASCII en entités numériques, garantissant une compatibilité maximale.

---

Les caractères spéciaux HTML n’ont plus de secrets pour vous. Cette maîtrise technique fait la différence entre un site amateur et un site professionnel. Bookmarkez cette liste, testez les entités dans vos projets, et votre contenu s’affichera parfaitement sur tous les supports.

Prochaine étape : Téléchargez ma checklist complète des 50 entités HTML indispensables sur Plan-Reprise-Activité.com. Elle vous fera gagner des heures sur vos prochains développements.