Tutorials

Word-Dokument (.docx) verlustfrei in HTML umwandeln: Methoden zur Erhaltung von Formatierung

Melden

Dieses Tutorial zeigt dir verschiedene Wege, wie du ein Microsoft Word-Dokument (.docx) in HTML umwandeln kannst, während die Formatierung (Überschriften, Fettdruck, Listen, Tabellen) erhalten bleibt.

Wir unterscheiden zwischen drei Ansätzen:

  1. Der schnelle Weg (Direkt in Word)
  2. Der saubere Weg (Online-Konverter für Web-Entwickler)
  3. Der professionelle Weg (Pandoc für maximale Kontrolle)

Methode 1: Microsoft Word "Speichern unter" (Schnell & Einfach)

Word hat eine eingebaute Funktion, um Dokumente als HTML zu exportieren.

Schritte:

  1. Öffne dein Word-Dokument.
  2. Klicke auf Datei > Speichern unter.
  3. Wähle als Dateityp Webseite (.htm; .html).
    • Wichtig: Wähle "Webseite, gefiltert", wenn du einen etwas saubereren Code möchtest (entfernt Word-spezifische XML-Tags).
  4. Klicke auf Speichern.
  • Vorteil: Keine Zusatzsoftware nötig.
  • Nachteil: Der erzeugte Code ist sehr "messy" (viele unnötige Styles), was die Ladezeit der Website erhöhen kann.

Methode 2: Word2CleanHTML / Mammoth (Sauberer Code)

Wenn du den Inhalt für einen Blog (wie WordPress) oder eine Website brauchst, willst du keinen "Müll-Code". Hier sind Tools wie Mammoth ideal, da sie Word-Stile direkt in semantisches HTML umwandeln.

Option A: Mammoth.js (Online Demo)

  1. Gehe auf die Mammoth Demo Seite.
  2. Lade deine .docx Datei hoch.
  3. Das Tool zeigt dir direkt das HTML an.
  4. Kopiere das HTML.

Option B: Word2CleanHTML

  1. Gehe zu word2cleanhtml.com.
  2. Kopiere den Inhalt deines Word-Dokuments (Strg+A, Strg+C).
  3. Füge ihn in das Textfeld auf der Website ein.
  4. Klicke auf Convert. Du erhältst sauberes HTML ohne Inline-Styles.
  • Vorteil: Sehr sauberer, semantischer Code (<h1>, <p>, <ul>).
  • Nachteil: Komplexe Layouts (Textfelder, spezielle Formen) gehen verloren.

Methode 3: Pandoc (Die Profi-Lösung)

Pandoc ist das "Schweizer Taschenmesser" für Dokumentenkonvertierung. Es wird über die Kommandozeile (Terminal) bedient.

Schritte:

  1. Installiere Pandoc von pandoc.org.
  2. Öffne dein Terminal (CMD oder PowerShell unter Windows).
  3. Nutze folgenden Befehl:
pandoc mein_dokument.docx -f docx -t html -s -o index.html

Erklärung der Parameter:

  • -f docx: Ausgangsformat ist Docx.
  • -t html: Zielformat ist HTML.
  • -s: Erstellt eine "Standalone"-Datei (mit <head> und <body>).
  • -o index.html: Name der Ausgabedatei.

Tipp für Bilder: Wenn dein Dokument Bilder enthält, nutze diesen Befehl, um sie in einem Ordner zu speichern:

pandoc mein_dokument.docx --extract-media=./bilder -o index.html

Methode 4: Visual Studio Code (Für Entwickler)

Wenn du VS Code nutzt, gibt es eine großartige Extension: "Office Viewer" oder "Docx to HTML".

  1. Installiere die Extension "vscode-pandoc".
  2. Öffne die .docx Datei.
  3. Drücke Strg + Shift + P und tippe Pandoc Render.
  4. Wähle html.

Zusammenfassung: Welches Tool für wen?

Ziel Empfohlene Methode
Nur schnell eine lokale Datei ansehen Word "Speichern unter"
Inhalt für Blog / CMS (sauberer Code) Mammoth.js oder Word2CleanHTML
Ganze Webprojekte / Automatisierung Pandoc
Programmierung (Python) Bibliothek mammoth oder pypandoc

Profi-Tipp für das Styling

Word-HTML sieht oft langweilig aus. Um das HTML hübsch zu machen, kannst du ein modernes CSS-Framework wie Picnic CSS oder Milligram im <head> verlinken:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">

Damit sieht dein konvertiertes Dokument sofort professionell aus!

0