HTML- und CSS-Editor

So verwendest du den HTML-Editor

Dieser Editor eignet sich für kleine statische Layouts, Tabellen oder CSS-Experimente. Der helle Text in HTML und CSS ist ein Beispiel; die erste Vorschau zeigt dessen Ergebnis. Beim Fokussieren eines Beispielfelds wird es zum Schreiben geleert. Bleibt es beim Verlassen leer, erscheint das helle Beispiel erneut, ohne alte Ergebnisse oder den Export wieder zu aktivieren.

Eigenes Markup und eigene Stile eingeben. Fragmente oder vollständige HTML-Dokumente können eingefügt werden. Der Editor baut aus unterstützten Elementen ein statisches Dokument auf; Metadaten bleiben nicht erhalten. Nach Bearbeitungsbeginn zählt nur die tatsächliche Eingabe. Heller Beispieltext in einem anderen leeren Feld wird nicht mit ihr vermischt. Beim Feldwechsel bleibt eigener Text erhalten.

Was die Vorschau darstellt

Die Vorschau läuft in einer isolierten Seite. Sie zeigt unterstütztes HTML und dein CSS, ohne den Editor selbst zu verändern. Texte, Überschriften, Listen, Tabellen, gewöhnliche Formularelemente und CSS-Layouts lassen sich prüfen. Größere Inhalte können innerhalb der Vorschau gescrollt werden. Ihre Breite folgt dem Bedienfeld; sie ist keine Simulation eines festgelegten Geräts.

JavaScript, Ereignisbehandlung, eingebettete Seiten, SVG, Medienplayer und externe Ressourcen werden entfernt oder blockiert. Links navigieren nicht und Formulare senden nichts. Externe Bilder, Schriftarten, Stylesheets und CSS-Importe werden nicht geladen. Eingebettete Base64-Bilder in PNG, JPEG, GIF und WebP sind möglich. Ein Hinweis nennt entfernte Elemente oder Attribute; externe CSS-Ressourcen sperrt die Dokumentrichtlinie. Die Originaleingaben bleiben zur Prüfung und Bearbeitung erhalten.

Zwei kleine Beispiele

Mit dem folgenden HTML und CSS erscheint „Hello“ als dunkelgrüne Überschrift. Ändere den Text zwischen den Tags für andere Wörter oder den CSS-Farbwert für ein anderes Aussehen.

Eine Liste entsteht mit <ul><li>Plan</li><li>Review</li></ul> und li { margin-bottom: 8px; }. Das Ergebnis sind zwei Aufzählungspunkte mit Abstand nach jedem Eintrag. So kannst du einen Inhaltsblock prüfen, bevor du ihn in dein Projekt übernimmst.

HTML: <h1>Hello</h1>
CSS:  h1 { color: #166534; }

Kopieren und herunterladen

HTML kopieren und HTML laden verwenden dasselbe aktuelle statische Dokument wie die Vorschau. Die UTF-8-Datei page.html enthält unterstütztes HTML, CSS und eine restriktive Inhaltsrichtlinie. Öffne sie im Browser zum Ansehen oder im Texteditor zur Quelltextprüfung. Sie ist ein eigenständiger statischer Entwurf, keine gehostete Website und keine Anwendung mit ausführbaren Skripten.

Leeren entfernt HTML, CSS und Ergebnis und fragt bei eingegebenem Code nach. Leere Felder zeigen wieder helle Beispiele, keine gespeicherten Nutzerdaten. Beim Schreiben gelten die üblichen Textfunktionen des Browsers. Nach Änderungen warnt die Seite vor dem Verlassen, speichert aber keinen Entwurf automatisch. Die statische HTML-Datei bewahrt das unterstützte Ergebnis.

Grenzen und Fehlersuche

Zusammen sind 100.000 Zeichen, 3.000 HTML-Knoten und 64 verschachtelte Ebenen erlaubt. Bei Überschreitung bleibt die Eingabe sichtbar; Vorschau und Export sind bis zur Kürzung deaktiviert. Leere Eingaben ergeben keine herunterladbare Datei.

Browser reparieren häufig fehlende End-Tags und ignorieren ungültige CSS-Deklarationen. Dies ist kein Standardprüfer: Eine sichtbare Vorschau belegt weder gültigen noch barrierefreien oder produktionsreifen Code. Prüfe Selektor und Syntax sowie möglicherweise gesperrte externe Ressourcen. Für vollständige Diagnose verwende die Entwicklertools in deinem eigenen Projekt.

Häufige Fragen