HTML Viewer mit Live-Vorschau
Fügen Sie HTML ein oder öffnen Sie eine .html-Datei und sehen Sie die Seite schon beim Tippen. CSS und JavaScript haben eigene Tabs, das Layout lässt sich in Handy-, Tablet- und Laptop-Breite prüfen, Konsolenmeldungen und Fehler erscheinen direkt darunter, und eine Prüfung listet Probleme wie nicht geschlossene Tags, doppelte IDs oder Bilder ohne Alternativtext. Code formatieren, minifizieren, herunterladen oder als Link teilen. Die Vorschau läuft in einer Sandbox, getrennt von dieser Website.
Kostenlos · Ohne Anmeldung
So funktioniert es
- HTML einfügen, eine .html-Datei öffnen oder ein Beispiel laden.
- CSS oder JavaScript bei Bedarf in den eigenen Tabs ergänzen.
- Vorschau ansehen, auf Handy oder Tablet umschalten und die Konsole lesen.
- Punkte der Code-Prüfung beheben, dann herunterladen, kopieren oder teilen.
Warum dieses Tool
Live-Vorschau
Die Seite aktualisiert sich beim Tippen, HTML, CSS und JavaScript in getrennten Tabs.
Handy- und Tablet-Breite
Die Seite in 375, 768 oder 1280 Pixel Breite ansehen und responsives Layout testen.
Konsole
console.log-Ausgaben, Warnungen und JavaScript-Fehler erscheinen unter der Vorschau.
Code-Prüfung
Findet offene Tags, doppelte IDs, fehlende alt-Texte, fehlenden Titel und mehr, mit Zeilennummer.
Formatieren und Minifizieren
Saubere Einrückung zum Lesen oder ohne Leerraum und Kommentare für kleinere Dateien.
Sichere Sandbox
Der Code läuft isoliert ohne Zugriff auf diese Website, nichts wird hochgeladen.
HTML-Datei anzeigen und verstehen
Jeder Browser öffnet eine .html-Datei, zeigt aber nur das Ergebnis. Hier sehen Sie Quelltext und Seite nebeneinander, Änderungen wirken sofort, und Fehler, die der Browser stillschweigend repariert, werden sichtbar. Öffnen Sie die Datei über Datei öffnen oder fügen Sie den Quelltext ein, den Sie mit Strg+U kopieren.
HTML-E-Mail-Signatur und Newsletter testen
Signaturen für Outlook oder Thunderbird und Newsletter-Vorlagen bestehen aus Tabellen mit Inline-Styles. Fügen Sie den Code ein, prüfen Sie die Handy-Breite und finden Sie mit der Code-Prüfung Bilder ohne alt-Text, der angezeigt wird, wenn Bilder blockiert sind. Beim Minifizieren bleiben bedingte Kommentare für Outlook erhalten.
Denken Sie bei Signaturen an die Pflichtangaben für Geschäftsbriefe nach HGB, etwa Rechtsform, Sitz und Registergericht.
HTML lernen im Informatikunterricht
In Schule, Ausbildung oder Selbststudium zeigt die Live-Vorschau genau, was jedes Tag und jede CSS-Regel bewirkt. Laden Sie die einfache Webseite, ändern Sie eine Farbe oder Überschrift und sehen Sie das Ergebnis. Die Code-Prüfung erklärt typische Anfängerfehler verständlich.
Was die Code-Prüfung erkennt
- Tags, die nie oder in falscher Reihenfolge geschlossen werden.
- Doppelte id-Werte und doppelte Attribute.
- Bilder ohne alt und Links in neuen Tabs ohne noopener.
- Fehlendes doctype, lang, charset, viewport und title bei ganzen Seiten.
- Übersprungene Überschriftenebenen und mehrere h1.
- Veraltete Tags wie center, font und marquee.
Häufige Fragen
Ist es sicher, fremdes HTML einzufügen?
Ja. Die Vorschau läuft in einer Sandbox ohne Zugriff auf Cookies oder Speicher dieser Website. JavaScript lässt sich zusätzlich abschalten.
Wird mein Code hochgeladen?
Nein. Alles läuft im Browser. Ein Link zum Teilen enthält den Code im Link selbst, es wird nichts auf einem Server gespeichert.
Warum fehlen Bilder und Styles von meinem Rechner?
Relative Pfade wie bilder/logo.png zeigen auf Dateien auf Ihrem Rechner, die die Vorschau nicht lesen kann. Nutzen Sie volle https://-Adressen oder fügen Sie das CSS in den CSS-Tab ein.
Kann ich die Handy-Ansicht prüfen?
Ja. Handy zeigt 375 Pixel Breite, dazu gibt es Tablet und Laptop. Ein Viewport-Meta-Tag sorgt für korrekte Skalierung.
Öffnet das Tool auch .htm- und .xhtml-Dateien?
Ja. HTML, HTM, XHTML und SVG landen im HTML-Tab, .css- und .js-Dateien in ihrem eigenen Tab.
Funktionieren PHP oder React?
Angezeigt werden reines HTML, CSS und JavaScript. PHP braucht einen Server, React-Code muss vorher gebaut oder per CDN-Skript geladen werden.
Ähnliche Tools
Möchtest du etwas bauen?
Sag uns, was du erstellen möchtest.
Sag uns, was du entwickeln lassen möchtest - von einer einfachen Website bis zu einer kompletten App, KI-Lösung, Automatisierung oder individuellen Software.