Entités HTML
Certains caractères sont spéciaux en HTML. Si vous tapez un < brut dans le texte ordinaire de la page, le navigateur peut croire qu’une balise commence. Si vous tapez un & brut, il peut croire qu’une entité commence. Les entités de caractère (character entities) sont des codes sûrs qui affichent ces symboles comme texte visible au lieu de perturber l’analyseur. Cette session enseigne le système d’entités lui-même : quand les utiliser, comment écrire les formes nommées courantes, et comment éviter un encodage excessif qui gâche la lisibilité sans bénéfice. Quand la règle est claire, les pages de tutoriel et les exemples intégrés deviennent plus fiables d’un éditeur à l’autre et d’un navigateur à l’autre.
Qu’est-ce qu’une entité HTML ?
Une entité HTML est une façon codée d’écrire un caractère dans le balisage. La plupart des entités nommées commencent par & et se terminent par ;. Le navigateur remplace le code par le caractère réel lors du rendu. Vous avez surtout besoin d’entités pour les caractères que HTML utilise déjà comme syntaxe de balisage, et parfois pour des symboles difficiles à saisir. Elles ne remplacent pas l’enregistrement du fichier en UTF-8 et ne signifient pas que chaque lettre du paragraphe doit devenir une entité. Voyez-les comme des outils précis : à utiliser là où le caractère brut serait dangereux ou ambigu, en laissant la prose ordinaire telle quelle. Cet équilibre protège l’analyseur et garde le code source lisible pour l’auteur.
Réponse directe
Utilisez des entités quand un caractère serait dangereux ou peu clair en texte brut. Retenez d’abord celles-ci : < pour <, > pour >, & pour &, et pour un espace insécable. Terminez toujours une entité nommée par ;. Servez-vous-en dans les paragraphes et dans les exemples qui enseignent HTML dès que le caractère brut casserait ou ferait mal lire le document. Si vous montrez des balises dans une phrase normale, les entités gardent l’exemple comme texte, pas comme éléments vivants. Si vous avez besoin d’un signe « et » visible dans un nom de marque du style AT&T, & est la forme sûre habituelle. Commencez par ces quatre, puis ajoutez " et © au besoin ; inutile de mémoriser de longues listes avant d’avoir assimilé la règle de base.
Entités courantes en un coup d’œil
📊 Entités courantes
| Entity | Shows | Use |
|---|---|---|
| &lt; | inférieur à | Plus sûr qu’une chevron ouvrant brut dans le texte |
| &gt; | supérieur à | Chevron fermant sûr dans le texte |
| &amp; | esperluette | Quand il faut le signe et comme texte |
| &nbsp; | espace insécable | Garder des mots ou un libellé et un nombre sur une ligne |
| &quot; | guillemet | Caractère de citation si besoin |
| &copy; | copyright | Symbole de copyright |
Caractères réservés dans les phrases
Quand vous enseignez ou citez des balises dans un paragraphe normal, montrez-les avec des entités pour qu’elles restent du texte. Le lecteur voit la forme familière de la balise, tandis que le document reste valide parce que vous n’avez pas inséré une vraie balise au milieu de l’explication. Cette habitude est essentielle dans les tutoriels, les blogs techniques et toute page qui explique HTML à l’intérieur de HTML. Sans elle, la ligne d’exemple peut apparaître comme un nouveau paragraphe ou une nouvelle section, ou une partie du texte disparaît parce que l’analyseur « avale » les chevrons. Les entités rendent l’intention claire : ce sont des caractères à afficher, pas une structure vivante de la page.
Entités dans une phrase
html<p>Write <p> for a paragraph tag, and use & between names: Tom & Jerry.</p>
Lecture de l’exemple
<p>affiche les caractères<p>sans créer d’élément paragraphe à cet endroitTom & Jerrys’affiche comme Tom & Jerry- Un
&brut sans entité valide peut provoquer des problèmes d’analyse - Les lettres ordinaires comme
petJerryn’ont pas besoin d’entités - Le point-virgule à la fin de chaque entité nommée fait partie de la règle, ce n’est pas un ornement optionnel
- Comparez le code source et le texte rendu pour voir le code face au résultat
Espaces insécables
est un espace que les navigateurs ne devraient pas utiliser comme point de coupure souple entre les parties qu’il relie. Il sert à garder un libellé court avec un nombre, ou des mots que vous voulez ensemble. Ne le parsemez pas partout comme outil de mise en page — préférez les espaces normaux et le CSS pour un vrai design. Abuser de rend le code source difficile à lire et peut freiner le retour à la ligne sur les écrans étroits sans résoudre un vrai problème de disposition. Utilisez-le avec intention : titre court et numéro de chapitre, unité avec valeur, ou paire de mots qui ne doit pas se séparer en bord de ligne. Les espaces entre phrases, les marges et l’alignement appartiennent au CSS.
Espace insécable
html<p>Chapter 4 stays on one line more reliably than a normal space might.</p>
Entités nommées contre saisie du symbole
Pour beaucoup de symboles, vous pouvez coller le caractère réel si le fichier est enregistré en UTF-8 (voir la session Charset plus loin). Les entités restent surtout importantes pour <, > et &, car ces caractères font partie de la syntaxe HTML. Apprendre les formes nommées courantes rend les pages d’enseignement et les exemples fiables d’un éditeur à l’autre. Un éditeur moderne peut autoriser le collage direct de © ou de guillemets typographiques, mais un tutoriel qui montre des balises dans un paragraphe a toujours besoin de < et >. Les entités nommées sont aussi plus claires en relecture de texte : le relecteur voit le code et comprend l’intention tout de suite. Ne remplacez pas par habitude chaque caractère non latin par des entités numériques ; UTF-8 couvre l’essentiel de la prose moderne. Gardez les entités là où l’encodage protège le sens ou empêche de casser le balisage.
Pratique dans votre éditeur
- Écrivez un paragraphe qui affiche le texte
<div>avec<et>. - Ajoutez une ligne avec
AT&Técrit en sécurité via&. - Utilisez
entre un titre court et un nombre que vous ne voulez pas couper sur deux lignes. - Ouvrez la page et vérifiez que les symboles sont corrects.
- Consultez le code source et trouvez les codes d’entité — comparez la source et le texte rendu.
- Oubliez volontairement le point-virgule d’une entité, rechargez, observez le résultat étrange, puis corrigez.
Ensuite demandez-vous : reste-t-il un&brut sans entité complète ? Des lettres ordinaires ont-elles été encodées sans raison ? n’a-t-il été utilisé que là où la coupure est indésirable ? La pratique ancre l’idée mieux qu’une liste de symboles ; l’erreur volontaire de point-virgule montre pourquoi la règle est stricte.
Erreurs qui cassent les entités
- Oublier
;à la fin d’une entité - Écrire un
&seul dans un texte qui n’est pas une entité complète (préférez&quand vous voulez une esperluette) - Encoder des lettres et des mots ordinaires qui n’avaient jamais besoin d’entités
- Utiliser
comme substitut de marge et de mise en page au lieu d’apprendre l’espacement en CSS - Confondre
<et>en montrant des exemples de balises
Ces erreurs semblent « petites » jusqu’à ce que l’une casse l’affichage ou salisse le code source. Une relecture rapide — chercher&dans le fichier et vérifier que chacun démarre une entité valide qui se termine par;— évite la plupart des problèmes avant publication.
Résumé
- Les entités affichent des caractères réservés ou spéciaux en sécurité dans le texte HTML
- Commencez par
<,>,&et - Les entités nommées commencent par
&et se terminent par; - Encodez les chevrons et les esperluettes quand ils doivent apparaître comme texte
- N’encodez pas en entités les lettres de la prose normale sans raison
- Les entités sont particulièrement utiles quand une page HTML enseigne le HTML lui-même
Retenez la règle, pas toute la liste : protégez l’analyseur, montrez le symbole voulu, gardez le code source propre. Ainsi vos exemples restent copiables et enseignables, sans surprise dans le navigateur.
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut