Text zu HTML Konverter

Warum einfacher Text umgewandelt werden muss

Wenn Sie in einen Texteditor tippen, sind die Zeilenumbrüche und Leerzeilen, die Sie sehen, echte Zeichen in der Datei. Ein Browser ignoriert sie jedoch: HTML fasst jede Folge von Leerraum, einschließlich Zeilenumbrüchen, zu einem einzigen Leerzeichen zusammen. Fügen Sie einen sauber formatierten Entwurf direkt in eine Webseite ein, wird er als ein einziger, ununterscheidbarer Absatz dargestellt. Um die Abstände zurückzubekommen, müssen Sie diese unsichtbaren Umbrüche in tatsächliches Markup übersetzen – und genau das tut dieser Konverter.

Er liest Ihren Text, findet die Absatzgrenzen und bettet jeden Block in semantische Tags ein, sodass der Browser den Inhalt so anordnet, wie Sie es beabsichtigt haben. Das Ergebnis ist sauberes, strukturiertes HTML, das Sie in ein CMS, eine E-Mail-Vorlage oder einen Blogbeitrag einfügen können, ohne ein einziges Tag von Hand zu tippen.

Wie Absätze und Zeilenumbrüche erkannt werden

Die Kernregel ist einfach und vorhersehbar: Eine Leerzeile markiert das Ende eines Absatzes und den Beginn des nächsten. Jeder Textblock zwischen Leerzeilen wird in ein eigenes p-Tag eingebettet, das richtige semantische Element für einen Absatz, das Ihnen durch die Standardstile des Browsers angemessene Abstände verschafft.

Einzelne Zeilenumbrüche innerhalb eines Absatzes sind eine eigene Frage. Standardmäßig werden sie zusammengefaltet, doch aktivieren Sie „Zeilenumbrüche beibehalten“, wird jeder einzelne Zeilenumbruch zu einem br-Tag, sodass eine Postanschrift oder ein kurzes Gedicht seine genaue Zeilenstruktur innerhalb eines Absatzes behält. Der Unterschied ist wichtig: p-Tags erzeugen getrennte Blöcke mit Außenabständen, während br-Tags einen Zeilenumbruch innerhalb eines Blocks erzwingen, ohne diesen zusätzlichen Abstand.

Ein Praxisbeispiel

Stellen Sie sich zwei kurze, durch eine Leerzeile getrennte Absätze vor, bei denen der erste Absatz auf zwei getippte Zeilen aufgeteilt ist. Bei aktivierter Absatzumwandlung und deaktivierter Option „Zeilenumbrüche beibehalten“ erhalten Sie zwei p-Elemente, und das erste liest sich als ein einziger, fließender Satz. Aktivieren Sie „Zeilenumbrüche beibehalten“, enthält das erste p nun ein br-Tag an der Stelle, an der Sie die Eingabetaste gedrückt haben, sodass die beiden getippten Zeilen untereinander bleiben. Dieselbe Eingabe, zwei unterschiedliche und völlig gültige Ergebnisse, gewählt durch ein einziges Kontrollkästchen.

Der Vorbehalt zur Maskierung, den Sie verstehen müssen

Dieser Konverter ist für Fließtext gebaut und behandelt Ihre Eingabe daher als Inhalt, der umschlossen werden soll, und nicht als Code, der entschärft werden müsste. Das bedeutet, dass Zeichen mit besonderer Bedeutung in HTML nicht automatisch maskiert werden. Enthält Ihr Text buchstäblich eine spitze Klammer oder ein kaufmännisches Und, so gelangt es unverändert ins Markup.

In der Praxis ist das beim gewöhnlichen Schreiben unproblematisch, doch gehen Sie bewusst vor, wenn Ihr Text Symbole enthält. Schreiben Sie über Code und enthält Ihr Absatz etwa ein Kleiner-als-Zeichen gefolgt von einem Tag-Namen, versucht ein Browser möglicherweise, dies als Markup zu interpretieren. Besteht dieses Risiko, maskieren Sie die gefährlichen Zeichen zunächst selbst und ersetzen Sie das kaufmännische Und durch &, das Kleiner-als-Zeichen durch < und das Größer-als-Zeichen durch >, damit sie als wörtlicher Text angezeigt und nicht geparst werden.

Klassen und vollständige Dokumente

Zwei Optionen passen die Ausgabe an ihren Bestimmungsort an. „Klasse zu Absätzen hinzufügen“ erlaubt Ihnen, jedem erzeugten p-Tag eine CSS-Klasse aufzuprägen, sodass der gesamte Inhaltsblock im Moment des Einfügens Ihre vorhandenen Stile übernimmt, ganz ohne manuelle Bearbeitung. Dies ist der schnellste Weg, umgewandelten Text an die Typografie einer Website anzupassen.

„In vollständiges HTML-Dokument einbetten“ erweitert den Schnipsel zu einer vollständigen, eigenständigen Datei mit html-, head- und body-Tags rund um Ihre Absätze. Lassen Sie diese Option aus, wenn Sie in eine bestehende Seite oder einen Editor einfügen, der diese Struktur bereits bereitstellt; aktivieren Sie sie, wenn Sie eine in sich geschlossene Datei möchten, die Sie speichern und direkt im Browser öffnen oder als HTML-Dokument anhängen können.

Wo das in einen echten Arbeitsablauf passt

Die häufigste Verwendung besteht darin, Geschriebenes aus einem einfachen Editor oder einer Notiz-App in ein Publishing-System zu überführen. Entwerfen Sie bequem in einfachem Text, schicken Sie ihn durch den Konverter und fügen Sie gültiges Markup in Ihr CMS ein – in dem Wissen, dass die Absatzumbrüche erhalten bleiben. Ebenso nützlich ist das für handgebaute HTML-E-Mails, bei denen viele Programme CSS entfernen und Sie ausdrückliche p- und br-Tags benötigen, statt sich auf Leerraum zu verlassen.

Entwickler verwenden es, um Vorlagen und Testdaten schnell zu bestücken, indem sie einen Textblock in fertiges Markup für eine Komponente oder eine Mock-Seite verwandeln. Wer Inhalte zwischen Plattformen migriert, kann damit unsauber eingefügten Text vor dem Import in einheitliche, semantische Absätze überführen.

Häufige Fehler, die Sie vermeiden sollten

Der klassische Fehler besteht darin, einen einzelnen Zeilenumbruch zu verwenden, wo Sie einen neuen Absatz meinten, und sich dann zu wundern, warum zwei Blöcke ineinander übergehen; fügen Sie zwischen echten Absätzen eine Leerzeile ein. Der gegenteilige Fehler ist, „Zeilenumbrüche beibehalten“ bei Fließtext aktiviert zu lassen, was br-Tags durch Ihren Text streut und den natürlichen Umbruch auf unterschiedlichen Bildschirmgrößen stört. Und wie oben erwähnt, gehen Sie nicht davon aus, dass das Tool Sonderzeichen bereinigt: Enthält Ihr Inhalt HTML-Symbole, die wörtlich angezeigt werden sollen, maskieren Sie sie vor der Umwandlung.