Fügen Sie HTML ein und sehen Sie es live in jeder Bildschirmbreite gerendert – danach aufhübschen, verkleinern oder auf Probleme prüfen.
Drücken Sie Prüfen für Elementanzahl, Überschriftenstruktur und eine Liste von Problemen im Markup.
Konsolenausgabe aus der Vorschau erscheint hier, wenn Skripte ausgeführt werden dürfen.
Eine E-Mail-Vorlage, ein Ausschnitt aus einem Ticket, ein exportierter Bericht: Manchmal muss man einfach sehen, wie ein Stück HTML aussieht. Einfügen, und es wird beim Tippen dargestellt, in einem abgeschotteten Rahmen und in der gewählten Bildschirmbreite. Neben der Vorschau können Sie es aufräumen, verkleinern, seine Skripte mit einer Konsole ausführen und eine Liste dessen sehen, was im Markup wirklich falsch ist.
Eingefügtes HTML kann Skripte, Formulare und Links enthalten, die Sie nicht geschrieben haben. Die Vorschau läuft in einem Sandbox-iframe mit eigenem opakem Ursprung, sodass nichts darin die Cookies dieser Website oder Ihre Sitzung lesen, in Ihrem Namen etwas absenden oder diese Seite wegnavigieren kann. Skripte bleiben aus, bis Sie sie einschalten.
Sie liest das Markup mit einem Standard-HTML-Parser und meldet nur, was sie gesehen hat: geöffnete, nie geschlossene Tags, schließende Tags ohne öffnendes Tag, Bilder ohne Alt-Text, doppelte ids, Links, die ohne rel="noopener" einen neuen Tab öffnen, übersprungene Überschriftenebenen, über http:// geladene Ressourcen und bei einer vollständigen Seite fehlender Doctype, title, lang oder Viewport-Tag.
Sie meldet Fehler, keinen Stil. End-Tags, die der HTML-Standard weglassen lässt, etwa </p>, </li>, </td>, </tr> und </option>, erscheinen nie als nicht geschlossen, und leere Elemente wie <br>, <img> und <input> brauchen kein End-Tag. Ein leeres alt="" zählt als Alternativtext, was für ein dekoratives Bild richtig ist. Ein Link mit target="_blank" besteht mit rel="noopener" oder rel="noreferrer". Ein normaler http://-Link in <a href> gilt nicht als unsicher; nur geladene Ressourcen wie Bilder, Skripte, Stylesheets und iframes zählen. Zurück nach oben in den Überschriftenebenen (h4 zu h2) ist in Ordnung; gemeldet wird nur ein Sprung nach unten, der eine Ebene auslässt (h2 zu h4). Die Prüfungen auf doctype, title, lang und viewport laufen nur, wenn das Eingefügte eine ganze Seite ist, also einen doctype oder ein html-, head- oder body-Tag hat. Ein E-Mail-Baustein oder CMS-Schnipsel wird dafür nicht abgewertet.
Sehen Sie sie zuerst in Smartphone-Breite (375 px) an, weil viele Menschen E-Mails auf dem Handy öffnen, dann als Tablet (768 px) und Desktop (1280 px). Lassen Sie Skripte aus: E-Mail-Programme führen kein JavaScript aus, die Vorschau ohne Skripte ist also näher an dem, was die Leser sehen. Verwenden Sie absolute Bild-URLs mit https://, denn weder die Vorschau noch das Mailprogramm des Empfängers sieht Dateien auf Ihrem Rechner. Minifizieren entfernt normale Kommentare, behält aber bedingte Kommentare, die mit <!--[if beginnen, etwa <!--[if mso]> ... <![endif]-->. Den Abschluss <!--<![endif]--> des Musters <!--[if !mso]><!--> behält es nicht. Minifizieren Sie eine Vorlage mit diesem Muster also nicht, sonst blendet Outlook womöglich alles danach aus. Die Vorschau ist eine Browser-Darstellung; das klassische Outlook für Windows zeichnet E-Mails mit der Word-Engine, schicken Sie sich dort also vor einem großen Versand eine Testmail.
Vorschau, Verschönern und Minifizieren passieren in Ihrem Browser. Nur der Prüfbericht schickt das Markup an den Server, wo es geparst und in derselben Antwort beantwortet wird: Nichts wird auf die Festplatte geschrieben oder protokolliert, und Nutzungsdaten enthalten nur Zahlen.
Skripte sind standardmäßig aus, weil eingefügter Code nicht vertrauenswürdig ist. Haken Sie "Skripte ausführen" an, dann lädt die Vorschau mit aktiviertem JavaScript neu, weiterhin in der Sandbox, und die Konsolenausgabe erscheint unter der Vorschau.
Die Vorschau entsteht aus dem eingefügten Text, nicht von Ihrem Rechner oder Server. Ein relativer Pfad wie images/logo.png wird daher auf dieser Website gesucht und nicht gefunden. Verwenden Sie absolute URLs oder fügen Sie ein <base href="...">-Tag ein, das auf den echten Speicherort der Dateien zeigt.
Es rückt nur zwischen Tags neu ein und lässt den Inhalt von pre, textarea, script und style unverändert. Leerraum zwischen Inline-Elementen kann sich gelegentlich leicht verschieben, prüfen Sie daher nach dem Formatieren die Vorschau.
Der Prüfbericht akzeptiert bis zu 1.000.000 Zeichen und listet höchstens 200 Probleme. Die Live-Vorschau pausiert ab 200.000 Zeichen, damit das Tippen flüssig bleibt; klicken Sie auf Aktualisieren oder drücken Sie Strg+Enter.
Ja. Fügen Sie das HTML der E-Mail ein oder öffnen Sie die .html-Datei, stellen Sie die Breite auf Smartphone (375 px) und Desktop (1280 px), um beide Layouts zu sehen, und klicken Sie auf Prüfen, um Bilder ohne Alternativtext und über unverschlüsseltes http:// geladene Ressourcen zu finden. Die Vorschau nutzt die Engine Ihres Browsers, während jedes E-Mail-Programm seine eigene nutzt und viele einen Teil des CSS verwerfen. Sie zeigt also ungefähr, was ein Webmailer im Browser anzeigt, nicht genau, was jedes Postfach zeigt. E-Mail-Programme führen kein JavaScript aus, lassen Sie Skripte ausführen also aus. Schicken Sie vor dem echten Versand eine Testmail an die Programme, die Ihre Empfänger nutzen.
Sicherer, als sie direkt zu öffnen. Datei öffnen lädt sie in den Editor in Ihrem Browser, und nichts geht an den Server, solange Sie nicht auf Prüfen klicken. Die Vorschau ist ein abgeschotteter Rahmen, in dem Skripte und das Absenden von Formularen aus sind, sodass die Seite keinen Code ausführen, kein Formular senden und nicht auf die Cookies dieser Website zugreifen kann. Bilder und Stylesheets mit vollständiger http(s)-Adresse werden trotzdem geladen, der Absender kann also sehen, dass die Datei geöffnet wurde. Lesen Sie zuerst den Quelltext, lassen Sie Skripte ausführen aus und geben Sie nie ein Passwort in eine zugeschickte Seite ein.
Datei öffnen liest die Datei immer als UTF-8 und ignoriert ein darin enthaltenes <meta charset>-Tag. Eine Seite, die als Windows-1252 oder ISO-8859-1 gespeichert wurde (typisch für ältere Windows-Editoren und Exporte), speichert Zeichen wie ä, ö, ü und ß als Bytes, die kein gültiges UTF-8 sind, deshalb erscheint jedes davon als Ersatzzeichen �. Öffnen Sie die Datei in Ihrem Editor, speichern Sie sie erneut als UTF-8 (Editor: Speichern unter, Codierung UTF-8; VS Code: in der Statusleiste auf die Codierung klicken, dann Mit Codierung speichern) und öffnen Sie sie hier noch einmal. Oder öffnen Sie die Datei im Browser, lassen Sie sich den Quelltext anzeigen und fügen Sie ihn hier ein, denn der Browser hat ihn bereits mit dem Zeichensatz der Seite decodiert.
Die Sandbox erlaubt nie das Absenden von Formularen oder Pop-ups, auch nicht mit Skripte ausführen, daher sendet ein Klick auf Absenden nichts, und Links mit target="_blank" sowie Aufrufe von window.open() werden blockiert. So kann eine eingefügte Seite weder Daten verschicken noch andere Websites öffnen. Normale Links öffnen sich im Vorschaurahmen, und Websites, die keine Einbettung in einen Rahmen erlauben, erscheinen dort leer oder abgelehnt. Um ein Formular zu prüfen, lesen Sie action, method und Felder im Quelltext; Prüfen listet außerdem jeden target="_blank"-Link ohne rel="noopener" auf. Testen Sie das echte Absenden auf Ihrem eigenen Entwicklungsserver.