Softonic

Visionneuse de HTML rendu

Étape 1 / 2
Suivant

Collez n’importe quel HTML (un modèle d’e-mail, un fragment de page récupéré, un exemple de documentation) et cliquez sur Rendre pour le voir dessiné dans une iframe isolée. Le cadre s’exécute avec le bac à sable le plus strict du navigateur : les scripts ne s’exécutent pas, les formulaires ne peuvent pas être envoyés et le balisage ne peut ni naviguer ni toucher la page qui l’entoure. C’est le moyen le plus rapide de répondre à « à quoi ressemble vraiment ce balisage ? » sans monter de serveur de test.

Comment prévisualiser du HTML

  1. 1

    Collez votre HTML

    Déposez un document complet ou un simple fragment dans le champ source. Ce que vous collez est exactement ce qui est rendu, tel quel.

  2. 2

    Cliquez sur Rendre

    La visionneuse écrit votre HTML dans une iframe isolée et affiche le résultat directement sur la page.

  3. 3

    Lisez l'aperçu

    Le cadre dessine votre balisage comme le ferait un navigateur : titres, tableaux, listes, styles en ligne et SVG apparaissent tous.

  4. 4

    Ajustez et rendez à nouveau

    Retouchez la source et rendez autant de fois que vous le souhaitez pour comparer le rendu de chaque version.

Pourquoi le cadre est isolé

Le HTML collé peut contenir n’importe quoi : des balises <script>, une astuce <img onerror="...">, un formulaire qui envoie des données quelque part ou une <iframe> qui charge un autre site. Pour empêcher tout cela de toucher la page, l’aperçu est écrit dans une <iframe sandbox> avec un attribut sandbox vide, le réglage le plus restrictif qui soit. Dans ce mode, le navigateur bloque à la fois l’exécution des scripts, l’envoi des formulaires, les fenêtres surgissantes, la navigation de premier niveau et l’accès à la même origine. Vous voyez le résultat visuel sans donner le moindre pouvoir au balisage.

Comme les scripts ne s’exécutent jamais, tout ce qui dépend de JavaScript (un composant web qui s’hydrate au chargement, un graphique qui se dessine seul, un framework qui se monte dans un <div> vide) n’affiche que son balisage statique, pas son résultat scripté. C’est un compromis délibéré : un aperçu sûr et prévisible plutôt qu’interactif.

Ce que la visionneuse affiche bien

Type de contenu Notes
HTML d’e-mail Les mises en page à base de tableaux et les styles en ligne s’affichent comme la plupart des clients les dessinent
Corps d’article de blog Titres, listes, citations et images s’affichent sans aucun script
Fragment récupéré Montre si le balisage récupéré est assez complet pour tenir seul
SVG en ligne Se dessine à n’importe quelle taille, pratique pour vérifier une icône
Balisage de composant statique Le balisage s’affiche ; le comportement en JavaScript, non

Bons usages de cet outil

  • QA de modèles d’e-mail. Collez l’export de votre éditeur d’e-mails et observez la mise en page sans vous envoyer de message de test.
  • Vérifications rapides de données récupérées. Vous avez récupéré du innerHTML d’une page : se rend-il à nouveau en quelque chose de cohérent ? Sinon, le fragment est sans doute incomplet.
  • Relecture Markdown vers HTML. Passez un texte dans un convertisseur (l’outil HTML vers Markdown fait l’aller-retour) et prévisualisez ici le HTML obtenu.
  • Apprendre et enseigner. Collez un exemple de documentation et observez exactement comment un navigateur l’agence.

À garder à l’esprit

  • URL relatives. Les images et feuilles de style référencées par un chemin relatif comme /assets/logo.png n’ont aucun serveur contre lequel se résoudre, elles ne se chargeront donc pas. Utilisez une URL absolue https:// ou un URI data: s’il vous faut afficher une image.
  • Ressources externes. Les polices, feuilles de style et images chargées depuis d’autres sites dépendent de l’autorisation de ces sites ; certains envoient des en-têtes qui bloquent le chargement dans un cadre.
  • Aucun script. Si votre balisage ne prend vie qu’avec JavaScript, l’aperçu montre son état avant scripts. C’est attendu, pas un bug.

Questions fréquentes

Oui. L’aperçu s’exécute dans une iframe entièrement isolée, sans aucune autorisation : les scripts ne peuvent pas s’exécuter et le balisage ne peut pas atteindre la page qui l’entoure. Même un HTML malveillant ne peut que se dessiner lui-même dans le cadre.

Non. Le bac à sable bloque entièrement l’exécution des scripts : les balises <script> et les gestionnaires d’événements en ligne sont ignorés. Vous voyez le balisage statique, ce qui est précisément ce qui rend l’aperçu sûr.

Un chemin relatif n’a rien contre quoi se résoudre, et certains hôtes envoient des en-têtes qui empêchent le chargement de leurs images dans un cadre. Utilisez une URL absolue https:// ou intégrez l’image sous forme d’URI data:.

Oui. Collez le document entier (doctype, <head>, <body> et tout le reste) et il s’affiche tel quel. Un simple fragment fonctionne aussi ; le navigateur complète le reste.

Cet outil rend le HTML que vous collez comme du texte ; il ne récupère jamais d’URL. Vous contrôlez exactement ce qui est rendu, ce qui est pratique pour les modèles d’e-mail, les fragments récupérés et le débogage rapide.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Compteur de FPS

Mesurez les FPS du navigateur avec requestAnimationFrame : lissage, fréquence d'images min et max, seuil d'alerte et graphique facultatif. Tout se passe en local, sans envoi ni API.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Convertisseur EM en REM

Convertissez les unités CSS entre em, rem et pixels à n'importe quelle taille de police de base. Montre les étapes de calcul et les tailles de base typiques pour une typographie réactive.

Outil disponible dans d’autres langues