Die kurze Antwort
Sauberes HTML heißt: Die Tags beschreiben, was der Inhalt ist (eine Überschrift, ein Absatz, eine Liste, eine Tabelle, ein Link), und nichts darüber, wie er in Word aussah. Keine Schriftnamen, keine Punktgrößen, keine Farben, keine Klassen wie MsoNormal, keine leeren span-Tags. Solches HTML passt sich dem Stylesheet deiner Website an und bleibt später leicht zu bearbeiten.
Word selbst kann das nicht erzeugen, weil sein Export versucht, die Seite exakt nachzubilden. Ein strukturbasierter Konverter liest das Dokument genau andersherum: Er schaut, welche Formatvorlage jeder Absatz nutzt, und ordnet ihr ein Tag zu. Leg eine .docx auf den Konverter unten, lass Umwandeln in auf HTML, prüf die Vorschau neben dem Code und drück dann Kopieren oder Herunterladen.
Hier ausprobieren: Word in HTML
Vollständige Tool-Seite öffnenWarum das HTML aus Word so unordentlich ist
Word bietet Als Webseite speichern und Webseite, gefiltert an. Beide wollen, dass das HTML wie die gedruckte Seite aussieht, und schreiben deshalb jedes optische Detail in den Code. Ein einziger kurzer Absatz kann so zu mehreren Zeilen Markup werden, mit einer Klasse, einem style-Attribut mit Schriftfamilie, Größe und Abständen und verschachtelten span-Tags für jeden Formatwechsel.
Kopieren aus Word und Einfügen in ein Content-Management-System macht über die Zwischenablage etwas Ähnliches: Der Editor bekommt das HTML von Word und behält einige oder alle dieser Stile. Das Ergebnis ist Text, der nicht zum Rest der Website passt, Schriften, die von Absatz zu Absatz wechseln, und Seiten, die schwer zu bearbeiten sind, weil unsichtbare Formatierung immer wieder auftaucht.
| Methode | Überschriften und Listen | Inline-Stile und Office-Markup | Bilder |
|---|---|---|---|
| Als Webseite speichern | Erhalten, als formatierte Absätze | Sehr viel, dazu Office-eigene Tags | Eigener Ordner |
| Webseite, gefiltert | Erhalten, als formatierte Absätze | Weniger, aber Klassen und Inline-CSS bleiben | Eigener Ordner |
| Kopieren und in ein CMS einfügen | Hängt vom Editor ab | Oft erhalten | Oft verloren oder mit lokalen Dateien verknüpft |
| Google Docs, Herunterladen als Webseite | Erhalten | Generierte Klassennamen und ein style-Block | Eigener Ordner in einer ZIP |
| Konverter auf dieser Seite | Echte h1 bis h6, ul, ol | Keine | Eingebettet oder weggelassen |
Was erhalten bleibt und was wegfällt
Der Konverter behält alles, was Bedeutung trägt, und lässt alles weg, was nur das Aussehen steuert:
- Bleibt: Überschriften aus den Word-Formatvorlagen Überschrift 1 bis Überschrift 6, die Formatvorlage Titel (als h1) und Untertitel (als h2), Absätze, fett und kursiv (als strong und em), Aufzählungen und nummerierte Listen mit ihrer Verschachtelung, Tabellen, Links, Fußnoten, Zitate mit der Formatvorlage Zitat und Bilder.
- Fällt weg: Schriftarten, Schriftgrößen, Farben, Hervorhebungen, Ausrichtung, Zeilenabstand, Seitenränder, Kopf- und Fußzeilen sowie Kommentare aus Word.
- Bilder: Mit Haken bei Bilder einfügen werden sie als Data-URIs ins HTML eingebettet, sodass der Code für sich allein funktioniert. Ohne Haken bekommst du schlankeren Code, wenn du die Bilder separat in dein CMS hochlädst.
- Vollständige HTML-Seite: Setz den Haken für eine komplette Datei mit Doctype, Zeichensatz und Titel, die sich allein im Browser öffnen lässt. Lass ihn weg, wenn du den Inhalt in eine bestehende Seite einfügst.
Das Dokument für ein sauberes Ergebnis vorbereiten
Das Ergebnis kann nur so strukturiert sein wie das Dokument. Die häufigste Überraschung ist eine Überschrift, die als normaler fetter Absatz herauskommt. Das passiert, wenn jemand den Text von Hand groß und fett gemacht hat, statt eine Überschriften-Formatvorlage zu nutzen; Word zeigt ihn wie eine Überschrift, aber in der Datei steht, dass es ein normaler Absatz ist.
- Nutze die eingebauten Formatvorlagen von Word: Zeile markieren und im Formatvorlagenkatalog auf der Registerkarte Start Überschrift 1, Überschrift 2 und so weiter wählen.
- Nutze echte Listen. Zeilen, die mit einem getippten Strich oder einer Zahl beginnen, werden zu Absätzen, nicht zu Listenpunkten; nimm stattdessen die Schaltflächen Aufzählungszeichen und Nummerierung.
- Vermeide leere Absätze als Abstand. Jedes Enter in einer leeren Zeile wird zu einem leeren Absatz.
- Halte Tabellen einfach: eine Kopfzeile, möglichst keine verbundenen Zellen und keine Tabellen, die nur dem Layout dienen.
- Eigene Formatvorlagen ohne HTML-Entsprechung werden als normale Absätze umgewandelt, und der Konverter weist dich mit einem kurzen Hinweis unter dem Ergebnis darauf hin.
Das HTML in WordPress, Shopify und andere Editoren einfügen
Die meisten Editoren haben eine Code- oder HTML-Ansicht. Wechsle vor dem Einfügen dorthin; fügst du HTML in die visuelle Ansicht ein, zeigt der Editor die Tags als Text. Im WordPress-Blockeditor fügst du einen Block Individuelles HTML hinzu oder öffnest das Blockmenü und wählst Als HTML bearbeiten. Im klassischen Editor nutzt du den Reiter Text, in der Produktbeschreibung von Shopify die Schaltfläche HTML anzeigen.
Weil der Code keine Inline-Stile hat, übernimmt der Text sofort Schriften, Größen und Farben deines Themes. Wirkt eine Überschriftenebene für dein Design zu groß, ändere das Tag (zum Beispiel h2 in h3) statt einen Stil hinzuzufügen, damit die Gliederung der Seite für Suchmaschinen und Screenreader korrekt bleibt.
Für E-Mail-Vorlagen ist sauberes HTML ein guter Ausgangspunkt, aber viele E-Mail-Programme brauchen Inline-Stile, um überall gleich auszusehen. Füge sie in deinem E-Mail-Tool hinzu, nicht in Word.
Häufige Probleme
- Die Datei ist .doc statt .docx: Der Konverter liest nur .docx. Öffne die Datei in Word oder LibreOffice, speichere sie als .docx und versuch es noch einmal.
- Überschriften fehlen: Sie wurden von Hand formatiert. Weise in Word Überschriften-Formatvorlagen zu und wandle erneut um.
- Das HTML ist sehr groß: Eingebettete Bilder machen den größten Teil aus, und Data-URIs sind etwa ein Drittel größer als die Bilddatei. Entferne den Haken bei Bilder einfügen und lade die Bilder separat hoch.
- Textfelder, Formen und SmartArt fehlen oder stehen an der falschen Stelle: Das sind Zeichnungsobjekte, kein Text im normalen Fluss des Dokuments. Verschiebe wichtigen Text vor dem Umwandeln in normale Absätze.
- Umlaute und Sonderzeichen sehen nach dem Einfügen falsch aus: Speichere oder liefere das HTML als UTF-8 aus. Die Option für die vollständige Seite enthält die UTF-8-Angabe bereits.
Datenschutz und Sicherheit
Verträge, Angebote und interne Dokumente sollten nicht bei unbekannten Konvertern hochgeladen werden. Hier wird die .docx in deinem Browser geöffnet und umgewandelt, und das Dokument verlässt nie dein Gerät. Wenn die Seite einmal geöffnet war, funktioniert sie auch offline.
Das erzeugte HTML wird gegen eine Liste erlaubter Tags geprüft, sodass Skripte, Event-Attribute und javascript:-Links nie im Ergebnis landen können, selbst wenn das Dokument sie enthielt.