Visionneuse HTML

Écrivez ou collez du HTML et voyez instantanément le rendu dans le navigateur.

Disposition:Les scripts sont en bac à sable et ne peuvent pas s'exécuter.

Code HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

Aperçu

À propos de cet outil

La visionneuse HTML vous permet d'écrire ou de coller du code HTML et de voir immédiatement comment il se rend dans un navigateur. L'aperçu est affiché dans un iframe isolé avec les scripts désactivés, vous permettant de prévisualiser du HTML de sources non fiables en toute sécurité.

L'outil prend en charge les documents HTML complets (avec head, CSS en ligne et blocs style) ainsi que les fragments HTML. Tout le traitement se fait localement dans votre navigateur.

Comment utiliser

Tapez ou collez votre HTML dans l'éditeur de code à gauche.
Cliquez sur Afficher pour mettre à jour l'aperçu.
Passez au mode Empilé pour une zone d'aperçu plus haute.
Utilisez Tab pour indenter les lignes dans l'éditeur.

Cas d'utilisation

Les développeurs frontend testent des extraits HTML rapidement. Les développeurs d'email prévisualisent des modèles HTML. Les étudiants apprenant HTML expérimentent les balises et voient les résultats instantanément. Les réviseurs de code vérifient la sortie rendue visuellement.

Questions fréquentes

Pourquoi les scripts sont-ils désactivés ? — L'iframe de prévisualisation utilise sandbox="allow-same-origin" pour bloquer l'exécution JavaScript, permettant de prévisualiser du HTML de sources inconnues en toute sécurité.
Puis-je prévisualiser du CSS ? — Oui. Incluez des balises style dans votre HTML ou utilisez des styles en ligne. Les feuilles de style externes d'autres origines peuvent être bloquées par CSP.
Prend-il en charge les documents HTML complets ? — Oui. Vous pouvez coller un document HTML complet incluant les balises DOCTYPE, head et body.