Aperçu HTML
Collez du HTML et voyez-le dessiné aussitôt, avec le compte des éléments et la liste des balises restées ouvertes.
Résultats
Ce que fait cet outil
Il arrive qu'on ait un fragment de HTML — venu d'un modèle d'e-mail, d'une page de documentation, d'un extrait qu'on vous a envoyé — et qu'on veuille simplement savoir à quoi il ressemble sans créer un fichier et l'ouvrir. Collez-le ici. La page ci-dessous est dessinée à mesure que vous tapez, dans un cadre sans aucune permission, et les nombres à côté indiquent combien il y a d'éléments, de liens, d'images et de titres, et si toutes les balises qui doivent se fermer se ferment vraiment.
Formule
parcourt les balises une à une, en sautant commentaires, script et style, et compte celles restées ouvertes
Variables
| Symbole | Signification | Unité |
|---|---|---|
text | HTML | — |
OUT | Ce que cela donne | — |
EL | Éléments | — |
LK | Liens | — |
IM | Images | — |
HD | Titres | — |
SR | Scripts | — |
OK | Toutes les balises se ferment | — |
UC | Balises non fermées | — |
CH | Caractères | — |
Exemple résolu
- HTML<h1>A small page</h1> <p>Some text with a <a href="https://example.com">link</a> in it.</p> <ul> <li>First <li>Second </ul> <p><img src="https://example.com/picture.png" alt="A picture"></p>
- Ce que cela donne<h1>A small page</h1> <p>Some text with a <a href="https://example.com">link</a> in it.</p> <ul> <li>First <li>Second </ul> <p><img src="https://example.com/picture.png" alt="A picture"></p>
- Éléments8
- Liens1
- Images1
- Titres1
- Scripts0
- Toutes les balises se fermentOui
- Balises non fermées—
- Caractères194
Limites
- Le calcul s'effectue entièrement dans votre navigateur. Les valeurs saisies ne sont jamais envoyées à un serveur.
Questions fréquentes
Est-il sûr de coller n'importe quoi ici ?
L'aperçu est dessiné dans un cadre dont toutes les permissions sont coupées : les scripts ne s'exécutent pas, les formulaires ne s'envoient pas et le cadre ne voit pas la page autour de lui. Ce que vous collez n'est par ailleurs jamais envoyé nulle part. Considérez l'aperçu comme un portrait de votre HTML et non comme une page en fonctionnement : si le balisage dépend de JavaScript, cette partie ne s'animera pas ici.
Pourquoi dit-il que mes balises vont bien alors que je n'ai jamais fermé le <li> ?
Parce que le HTML autorise volontairement l'omission de certaines fermetures. Un nouvel élément de liste termine le précédent, et il en va de même pour les paragraphes, les cellules et les lignes de tableau. Compter cela comme une erreur serait une fausse accusation, donc ce n'est pas compté. Tout ce dont la fermeture est réellement obligatoire — un div, un span, une section — reste signalé.