Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Astuces CSS - Afficher du code HTML

Afficher des balises HTML.

Lorsqu'il faut afficher des balises HTML sur une page web, l'écriture devient rapidement fastidieuse. En effet, la balise ne peut pas tout bêtement être écrite dans le code : elle serait interprétée par le navigateur, qui appliquera son effet mais ne l'affichera pas. Les caractères < et > sont interdits en tant que caractères dans le code d'une page HTML.

On est alors obligé de passer par les entités, et écrire : &lt;h1&gt; pour afficher h1.

Une autre solution consiste à utiliser la propriété content appliquée aux pseudo-éléments ::before et ::after. Il faudra choisir une des balises du HTML pour marquer nos noms de balise, par exemple pre. Cette balise est initialement prévue pour afficher du texte tel que saisi dans le code, sans gestion des espaces ni des renvois à la ligne. On pourra bien sûr en profiter pour appliquer une mise en forme particulière pour bien faire ressortir nos noms de balises : ici les balises seront affichées en bleu foncé.

Exemple : Les balises
head
et
body
délimitent les deux parties principales de la page HTML.

(cliquez pour afficher le code CSS)