Afficher des balises HTML non interprétées avec CSS

TUTORIEL Afficher des balises HTML non interprétées avec CSS

Niveau
  1. Débutant
Tuto HTML - CSS


Une petite astuce pour pouvoir afficher des balises HTML sur votre page Web sans qu'elles soient interprétées/traduites par les navigateurs.

En effet, pour un projet personnel je devais créer un tableau avec les différentes balises HTML et leur description. Mais si vous écrivez <head> par exemple dans le tableau la balise disparait de la page Web puisqu'elle est lue par le navigateur.

Alors voici l'astuce (merci @Nicolas).
On crée une classe dans CSS avec le code suivant:
CSS
.balise:before {
    content: '<';
}
.balise:after {
    content: '>';
}
Puis on utilise la balise dans le code HTML de la façons suivante:
HTML
<span class="balise">head</span>
Et voici le résultat !


Votre balise <head> s'affiche bien dans votre navigateur !
  • Like
Réactions: Nicolas
Auteur
Hamza
Affichages
111
Publication
Mise à jour
Notation
0.00 étoiles(s) 0 note(s)
Haut