Afficher du code HTML

 

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 : <h1> 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)