Guide complet des entites HTML
Les entites HTML sont l'un des aspects les plus fondamentaux mais aussi les plus souvent mal compris du developpement Web. Ce sont le mecanisme par lequel les navigateurs peuvent afficher des caracteres qui seraient autrement interpretes comme du balisage HTML, et elles jouent un role cle dans la securite Web. Que vous encodiez des caracteres speciaux pour prevenir les attaques par script intersite, affichiez des symboles mathematiques ou assuriez un rendu correct du contenu dans differents encodages, comprendre les entites HTML est essentiel pour tout developpeur Web.
Qu'est-ce que les entites HTML ?
Une entite HTML est une sequence de caracteres qui represente un seul caractere en HTML. Les entites commencent par une esperluette (&) et se terminent par un point-virgule (;). Lorsque le navigateur rencontre une entite, il la remplace par le caractere correspondant lors du rendu. Ce mecanisme vous permet d'inclure dans du HTML des caracteres qui seraient autrement impossibles ou problematiques.
<) commence une balise, le signe superieur a (>) termine une balise, et l'esperluette (&) commence une reference d'entite. Si vous souhaitez afficher ces caracteres comme contenu visible plutot que comme balisage, vous devez les encoder comme entites.
Entites HTML courantes
Bien que HTML definisse plus de 2 000 entites nommees, seule une poignee est frequemment utilisee dans le developpement Web quotidien. Voici les entites que vous rencontrerez et utiliserez le plus souvent :
Les cinq entites obligatoires
| Caractere | Entites nommees | Entite decimale | Entite hexadecimale | Usage |
|---|---|---|---|---|
| & | & | & | Doit toujours etre encode pour eviter l'ambiguite avec les references d'entites | < |
| < | < | < | Doit etre encode pour empecher l'ouverture de balises HTML | > |
| > | > | > | Doit etre encode pour empecher la fermeture de balises HTML | " |
| " | " | " | Doit etre encode dans les valeurs d'attributs entre guillemets doubles | ' |
| ' | ' | Doit etre encode dans les valeurs d'attributs entre guillemets simples | Espace insécable (empeche le retour a la ligne) | Symbole de copyright |
Entites de symboles courants
| Caractere | Entites nommees | Description |
|---|---|---|
| Symbole de marque deposee | Symbole de marque | Tiret long (cadratin) |
| Tiret court (pour les plages) | Guillemet double ouvrant | Guillemet double fermant |
| Caractere puce | Points de suspension (trois points) | Registered trademark symbol |
| ™ | ™
| Trademark symbol |
| — | —
| Em dash (long dash) |
| – | –
| En dash (short dash, for ranges) |
| « | «
| Left-pointing double angle quotation mark |
| » | »
| Right-pointing double angle quotation mark |
| • | •
| Bullet character |
| … | …
| Horizontal ellipsis (three dots) |
Entites numeriques vs entites nommees
Les entites HTML existent sous deux formes : nommees et numeriques. Comprendre la difference vous aide a choisir la bonne entite dans chaque situation.
Entites nommees
< represente le signe inferieur a et © represente le symbole de copyright. Les entites nommees sont plus lisibles et memorables, rendant votre code HTML source plus facile a maintenir. Cependant, les entites nommees n'existent que pour un ensemble limite de caracteres - environ 2 000, alors qu'Unicode compte plus de 140 000 caracteres.
Entites numeriques
Les entites numeriques referencent les caracteres par leur point de code Unicode. Elles existent sous deux formes : decimale et hexadecimale. Les entites numeriques decimales utilisent le format &#NNN; ou NNN est le point de code decimal. Les entites hexadecimales utilisent le format &#xHHH; ou HHH est le point de code hexadecimal. Par exemple, le symbole de copyright peut s'ecrire © (decimal) ou © (hexadecimal).
Les entites numeriques peuvent representer n'importe quel caractere Unicode, ce qui les rend essentielles pour les caracteres qui n'ont pas de reference d'entite nommee. Si vous devez afficher des caracteres CJK rares, des glyphes d'ecritures historiques ou des emojis sans entite nommee, vous devez utiliser la forme numerique.
Quand utiliser laquelle
- <, >, ", ') et les symboles courants comme ©, ®, ™. Elles sont plus lisibles et auto-documentees.
- Utilisez des entites numeriques lorsque le caractere dont vous avez besoin n'a pas d'entite nommee, ou lorsque vous generez du HTML par programmation et avez besoin d'une methode d'encodage universelle coherente.
- Utilisez des entites numeriques hexadecimales lorsque vous travaillez avec des points de code Unicode, car l'hexadecimal est la notation standard dans la documentation Unicode et les tables de caracteres.
Quand utiliser les entites HTML
Savoir quand utiliser les entites est aussi important que savoir comment les utiliser. Voici les principaux scenarios ou les entites sont necessaires ou benefiques :
1. Afficher les caracteres reserves
<. Si vous ecrivez un < brut, le navigateur essaiera de l'analyser comme le debut d'une balise HTML, ce qui pourrait casser la mise en page de votre page ou creer une vulnerabilite de securite.
2. Prevenir l'ambiguite avec l'esperluette
Une esperluette suivie de lettres et d'un point-virgule est toujours interpretee comme une reference d'entite. Si votre contenu contient une esperluette qui ne fait pas partie d'une entite (comme dans "Tom & Jerry"), vous devez l'encoder comme &. Une esperluette non encodee suivie de texte qui correspond exactement a un nom d'entite sera decodee de maniere incorrecte. Par exemple, "AT&T" non encode pourrait devenir "AT&T" si le navigateur interprete &T comme une reference d'entite (bien que &T ne soit pas une entite valide, ce comportement est techniquement errone).
3. Inclure des caracteres non clavier
Des caracteres comme les tirets cadratins, les symboles de copyright et les operateurs mathematiques peuvent etre difficiles a saisir sur un clavier standard. Les entites fournissent un moyen fiable d'inclure ces caracteres sans dependre de la methode de saisie de votre editeur ou de la table de caracteres. Par exemple, — est generalement plus facile a taper que de rechercher le caractere tiret cadratin sur le clavier.
4. Espace insécable
L'entite cree un espace insécable qui empeche le navigateur de faire un retour a la ligne a cet endroit. C'est essentiel pour garder des mots associes sur la meme ligne, comme "10 kg", "Chapitre 3" ou des noms de marque qui ne devraient pas etre divises entre lignes. Elle est aussi couramment utilisee pour creer un espacement visuel dans des mises en page ou le CSS n'est pas approprie.
Implications de securite : protection XSS
L'encodage d'entites HTML est l'une des defenses les plus importantes contre les attaques par script intersite (XSS). Une attaque XSS se produit lorsqu'un attaquant peut injecter du code executable dans une page web que d'autres utilisateurs visualisent. L'encodage d'entites empeche cela en convertissant les caracteres dangereux en leurs equivalents d'entites securises.
Comment l'encodage d'entites previent le XSS
et que la page rend le contenu sans encodage, le navigateur executera le script. Cependant, si la sortie est encodee en entites, elle devient <script>alert('xss')</script>, et le navigateur l'affiche comme texte litteral au lieu d'executer le code.
Regles d'encodage specifiques au contexte
L'encodage d'entites fonctionne dans les contextes de contenu et d'attributs HTML, mais differents contextes necessitent differentes strategies d'encodage :
- <, >, & en entites. Cela empeche l'injection de nouvelles balises HTML.
- <, >, &, ", ' en entites. Les guillemets doivent etre encodes pour empecher la sortie de la valeur d'attribut.