HTML-Text ändern, ohne das Layout zu zerstören

Neulich öffne ich die Landingpage eines Freundes, um einen Tippfehler zu korrigieren. Ein fehlender Buchstabe, mehr nicht. Ich tippe ihn in ein WYSIWYG-Feld, speichere — und sehe zu, wie die zwei ordentlichen Spalten oben zu einem einzigen traurigen Streifen zusammenklappen. Ein Buchstabe. Und der ganze Hero-Bereich, weg.

Also die Kurzfassung. Um Text in HTML zu ändern, ohne das Layout zu zerstören, bearbeite in einem Nur-Text-Modus: Du schreibst die Worte um, während er die Tags, Klassen und die Struktur sperrt. Du änderst die Zeichen an Ort und Stelle. Drumherum wird nichts hinzugefügt, verschoben oder gelöscht, also hat das Layout nichts zu verrücken.

Dieser Modus hat einen Namen und einen Grund, warum er funktioniert. Der Grund ist der interessante Teil — denn sobald du ihn siehst, verschwindet dieses ganze „ich trau mich nicht, diese Seite anzufassen"-Gefühl.

warum das Layout verrutscht, obwohl du schwörst, nichts angefasst zu haben

Das sagt einem fast nie jemand. Viele visuelle Editoren ändern nicht nur deinen Text. Sie schreiben dein HTML um.

Wenn du in einem Rich-Text- oder WYSIWYG-Feld bearbeitest, liest der Editor die Seite oft in sein eigenes Modell ein und schreibt sie beim Speichern auf seine Weise wieder heraus. Bei diesem Hin und Her passiert der Schaden. Er lässt eine Klasse fallen, die er nicht kennt. Er tauscht ein <h2> gegen ein <p>, weil das sein Hausstil ist. Er verschmilzt zwei Elemente zu einem oder löscht still einen leeren Container, den er für Müll hält.

Und dein Layout hing an genau diesen Dingen.

Sagen wir, deine Überschrift ist <h2 class="hero-title">. Die Klasse hero-title ist das, was dein CSS benutzt, um Größe, Abstände und die Rasterspalte festzulegen, in der sie sitzt. Tipp die Worte im falschen Editor neu, und die Klasse kommt fehlend zurück — oder das Tag selbst hat sich geändert — und jetzt passt deine CSS-Regel auf nichts mehr. Der Text ist noch da. Er hat nur alles verloren, was ihn an seinem Platz hielt. Genau dieser Einsturz ist mir für einen fehlenden Buchstaben passiert.

Direkt im Browser zu bearbeiten hat dieselbe Falle. In dem Moment, in dem du die Struktur anfassen darfst, kannst du die Struktur kaputt machen — meist ohne es zu wollen, meist ohne es zu sehen, bis du speicherst.

was „die Struktur sperren" wirklich heißt

Ein Nur-Text-Modus dreht die ganze Sache um. Statt dir die ganze Seite zum Bearbeiten zu geben, gibt er dir nur die Worte.

Die Tags bleiben eingefroren. Die Klassen, die IDs, die Attribute, die Art, wie die Dinge ineinander verschachtelt sind — alles gesperrt. Du kannst die Zeichen zwischen den Tags ändern. Du kannst die Tags selbst nicht ändern, hinzufügen oder löschen. Also ist die Klasse, an der dein CSS hängt, hinterher noch da, weil du sie nie entfernen konntest.

Denk an ein Klingelschild an der Haustür. Der Nur-Text-Modus lässt dich den Namensstreifen herausziehen und einen neuen einschieben. Er lässt dich nicht den Rahmen abschrauben, ein neues Loch bohren oder das Schild abmontieren. Der Name ändert sich; das, was ihn hält, nicht. Das ist die ganze Idee, und deshalb kann das Layout nicht verrutschen — nichts Strukturelles hat sich geändert, also gibt es nichts umzubrechen.

Das ist eine andere Aufgabe als HTML allgemein visuell zu bearbeiten, wo du auch Blöcke verschieben oder umstylen könntest. Nur-Text ist die schmale, sichere Scheibe davon — nur Worte, alles andere stillgehalten.

also wie änderst du die Worte und behältst das Design

Ein paar Gewohnheiten tragen fast die ganze Sicherheit, egal welches Tool.

Arbeite an einer Kopie der Datei, nicht an der einzigen Version, die du hast. Ändere den Wortlaut, nicht die Form der Dinge. Schau dir eine Vorschau an, bevor du festmachst. Und wenn du Text aus einem Word-Dokument oder einem Google Doc einfügst, füg ihn als reinen Text ein — diese Apps schmuggeln verstecktes Markup mit, das sich mit deiner Seite streitet.

Mit einem Nur-Text-Tool ist der sichere Teil eingebaut. Du öffnest die .html-Datei, schaltest den Nur-Text-Modus ein, klickst die Zeile an und tippst. Der Modus ist das Geländer. Du könntest die Struktur nicht kaputt machen, selbst wenn du es versuchtest, weil sie nicht bearbeitbar ist, solange Nur-Text an ist.

Wenn du wirklich mal die Struktur ändern musst — eine Sektion verschieben, einen neuen Block hinzufügen, eine Karte umstylen — ist das eine andere Aufgabe, und dafür würdest du aus dem Nur-Text raus und in eine Code- oder volle visuelle Ansicht wechseln. Zu wissen, welche der beiden du gerade machst, ist die halbe Miete.

die Seite jemandem geben, der noch nie ein Tag gesehen hat

Hier zahlt sich eine gesperrte Struktur aus.

Stell dir vor, du gibst eine Seite an einen Kollegen oder einen Kunden, damit er den Text aktualisiert. Er soll den Preis korrigieren, die Überschrift auffrischen, einen Namen richtigstellen. Du willst nicht deinen Freitagnachmittag damit verbringen, ein Layout zu reparieren, das er aus Versehen verschoben hat.

Schalt den Nur-Text-Modus ein und gib ihm das. Er sieht die echte Seite, keine Wand aus spitzen Klammern. Er klickt den Absatz an, tippt ihn neu, fertig. Es gibt keine Taste, die er drücken könnte, um eine Klasse zu entfernen oder ein <div> zu löschen, weil das gar nicht in Reichweite ist. Das Beängstigende daran, „einen Nicht-Programmierer die Seite bearbeiten zu lassen", ist, dass er etwas kaputt macht, das er nicht versteht. Nimm ihm diese Möglichkeit, und die Angst geht mit.

Wenn du abwägst, welches Tool du ihnen in die Hand gibst — die ehrlichen Kompromisse zwischen den wichtigsten kostenlosen HTML-Editoren habe ich anderswo ausgebreitet. Für reine Textänderungen an einer Seite, die es schon gibt, ist Nur-Text das Ungefährlichste, das du jemandem geben kannst.

die tatsächlichen Schritte, vom Öffnen bis zum Speichern

Hier der komplette Durchlauf mit HTML Tweak, dem kostenlosen Tool, das ich baue. Es läuft im Browser und auch als eine einzelne Offline-Datei — kein Installer, keine Anmeldung.

1. Öffne die Seite. Geh zu HTML Tweak und öffne deine .html-Datei. Nichts wird hochgeladen — die Datei bleibt in deinem Browser, auf deinem Rechner.
2. Schalt den Nur-Text-Modus ein. Das sperrt die Tags, Klassen und das Layout und lässt nur die Worte bearbeitbar.
3. Klick den Text an, den du ändern willst. Die Überschrift, einen Absatz, eine Button-Beschriftung, einen Preis.
4. Tipp ihn neu. Ändere die Worte. Die Tags drumherum rühren sich nicht.
5. Schau dir die Vorschau an. Abstände und Layout sehen identisch aus, weil sich nichts Strukturelles geändert hat.
6. Speichere. In Chrome oder Edge schreibt es direkt in deine Datei zurück. In anderen Browsern lädt es eine bearbeitete Kopie zum Behalten herunter.

Das war's. Eine Minute Arbeit, und kein Teil des Designs in Gefahr.

wenn die Sperre dich trotzdem nicht rettet

Eine Handvoll kleiner Fehler macht die meisten „es ist trotzdem kaputtgegangen"-Nachrichten aus, die ich bekomme.

• Die einzige Kopie der Datei bearbeiten. Leg das Original irgendwo sicher ab, bevor du anfängst.
• Direkt aus Word oder Docs einfügen. Das schleppt verstecktes Format mit — füg stattdessen als reinen Text ein.
• Gegen den Modus ankämpfen. Wenn du versuchst, eine Sektion zu verschieben, während Nur-Text an ist, fühlt es sich fest an, weil es das soll. Das ist eine Struktur-Änderung, keine Text-Änderung.
• Von jedem Browser erwarten, dass er an Ort und Stelle speichert. Nur Chrome und Edge schreiben direkt in die Datei zurück. Andere geben dir eine heruntergeladene Kopie, was völlig in Ordnung ist — wisse nur, welche du bekommen hast.

Und eine Grenze, die man benennen sollte. Der Nur-Text-Modus ist für Inhalt und Wortlaut auf einer Seite, die du schon hast. Nicht für einen strukturellen Umbau, und HTML Tweak ist kein Verwalter für ein React- oder Next-Projekt aus mehreren Dateien — es öffnet eine Seite und hilft dir, sie fertigzustellen. Wenn dein Job „die Seite umformulieren" ist, passt es perfekt. Wenn er „die Seite neu aufbauen" ist, ist es nicht das Tool.

Wenn du bloß eine Zeile korrigieren willst, ohne die Angst, was das mit dem Rest der Seite anstellt, öffne deine Datei im Nur-Text-Modus und ändere die Worte. Das Design bleibt genau da, wo du es gelassen hast.