Unsauberes HTML bereinigen: Mit Markdown den Code entrumpeln

Jeder, der schon einmal Text aus Word, aus einer E-Mail oder aus einem Webseiten-Baukasten in ein anderes System kopiert hat, kennt das Ergebnis: Aus zwei einfachen Absätzen wird ein Wust aus Dutzenden von Zeilen Code, voller inline-Styles, leerer Container und kryptischer Klassen. Solches HTML ist schwer zu pflegen, lädt langsam und verhält sich in jedem System anders. Die gute Nachricht: Es gibt einen erstaunlich einfachen Trick, um diesen Ballast loszuwerden, nämlich den Umweg über Markdown.

Was unsauberes HTML ausmacht

Mit dirty HTML, also schmutzigem HTML, bezeichnet man Code, der zwar funktioniert, aber mit überflüssigem Beiwerk durchsetzt ist. Typische Merkmale sind:

• Inline-Styles an jedem Element: Jeder Absatz, jede Überschrift trägt eigene style-Angaben für Schriftart, Farbe und Abstände. Das bläht den Code auf und macht ein einheitliches Aussehen unmöglich.
• Leere und verschachtelte Container: Mehrere ineinander gepackte div- oder span-Elemente, die nur Layout-Zwecke hatten und keinen eigenen Inhalt tragen.
• Tracking-Markup: Unsichtbare Elemente mit Daten-Attributen, die nur dazu dienten, Klicks oder Aufrufe zu zählen.
• Doppelte Formatierungen: Fett, das gleichzeitig über ein b-Tag und ein style-Attribut erzwungen wird, oder geschachtelte Hervorhebungen, die sich gegenseitig überlagern.
• Nicht-sichtbare Platzhalter: Absätze, die nur ein geschütztes Leerzeichen enthalten, um Abstände zu erzeugen.

So ein Schnipsel sieht in der Praxis schnell wie das folgende Beispiel aus. Der eigentliche Inhalt sind zwei kurze Sätze, der Rest ist Ballast:

<div class="post-body" style="font-family:Arial">
  <div>
    <span style="font-weight:700; color:#222">Unsere Öffnungszeiten</span>
  </div>
  <p style="margin:0 0 12px 0">
    Wir haben <b><span style="color:#222">Montag bis Freitag</span></b> geöffnet.
  </p>
  <div class="ad-tracking" data-track="view"></div>
  <p style="margin:0">&nbsp;</p>
</div>

Wie der Umweg über Markdown automatisch aufräumt

Der Trick beruht auf einer Eigenschaft von Markdown, die sonst als Einschränkung gilt: Markdown kennt kein Styling, keine Skripte und keine bedeutungslosen Container. Wenn Sie HTML in Markdown umwandeln, muss der Konverter jedes Element auf seine inhaltliche Bedeutung reduzieren. Alles, was sich nicht in eine Markdown-Entsprechung übersetzen lässt, fällt dabei weg.

Konkret heißt das: Inline-Styles verschwinden, weil Markdown keine Farben und Schriften abbildet. Leere div- und span-Hüllen lösen sich auf, weil sie keinen Inhalt tragen. Tracking-Markup und Skripte werden entfernt, weil sie in Markdown keine Bedeutung haben. Doppelte Fett-Auszeichnungen werden zu einer einzigen. Übrig bleibt das, was wirklich zählt: Text, Überschriften, Listen, Links und Bilder. Wie die Umwandlung im Detail abläuft, beschreibt der Ratgeber HTML in Markdown umwandeln.

Vorher und nachher im Beispiel

Wandelt man das verschmutzte HTML von oben in Markdown um, bleibt nur der Kern übrig:

**Unsere Öffnungszeiten**

Wir haben **Montag bis Freitag** geöffnet.

Aus über zehn Zeilen unübersichtlichem Code sind drei klare Zeilen geworden. Der leere Tracking-Container ist weg, der nur ein geschütztes Leerzeichen enthaltende Absatz ist verschwunden, die doppelten Fett-Angaben sind zu einer sauberen Hervorhebung zusammengeführt. Der Inhalt ist vollständig erhalten, der Ballast ist fort. Genau das ist der Effekt, den man sich beim Entrümpeln wünscht.

Optional zurück zu sauberem HTML

Oft ist das Markdown selbst schon das gewünschte Ergebnis, etwa wenn der Inhalt in eine Dokumentation oder ein Markdown-fähiges CMS wandert. Manchmal brauchen Sie aber wieder HTML, nur eben sauberes. Dann wandeln Sie das bereinigte Markdown einfach zurück. Aus dem schlanken Markdown von oben entsteht dieser kompakte, gut lesbare HTML-Code:

<p><strong>Unsere Öffnungszeiten</strong></p>

<p>Wir haben <strong>Montag bis Freitag</strong> geöffnet.</p>

Dieses HTML enthält keine inline-Styles, keine leeren Container und kein Tracking mehr. Es lässt sich problemlos in ein System einfügen, das das Aussehen über eine zentrale Stylesheet-Datei steuert. Wie der Rückweg im Tool funktioniert, erklärt der Ratgeber Markdown in HTML umwandeln.

Grenzen bei stark verschachteltem HTML

So nützlich der Trick ist, ehrlich gesagt hat er Grenzen. Bei einfacher und mittlerer Verschmutzung funktioniert die Bereinigung zuverlässig. Bei stark verschachteltem HTML kann das Ergebnis vom Original abweichen, weil Markdown bestimmte Strukturen gar nicht kennt.

Konkret betrifft das mehrspaltige Layouts, die in Markdown keine Entsprechung haben und untereinander geordnet werden. Tabellen mit verbundenen Zellen über colspan oder rowspan lassen sich nicht originalgetreu abbilden. Verschachtelte Tabellen, also Tabellen innerhalb von Tabellen, werden vereinfacht. Auch Konstrukte, deren Bedeutung allein im CSS steckt, gehen verloren, weil sie keinen inhaltlichen Anker haben. Das ist kein Fehler, sondern die logische Folge davon, dass Markdown bewusst schlank ist. Für reinen Fließtext mit Überschriften, Listen, Links und Bildern liefert die Methode dagegen hervorragende Ergebnisse.

Workflow für die CMS-Migration

Besonders wertvoll ist diese Technik, wenn Inhalte von einem alten System in ein neues umziehen. Beim Wechsel des Content-Management-Systems schleppt man sonst leicht den ganzen Ballast des alten Systems mit. Ein bewährter Ablauf sieht so aus:

• Schritt eins: Den HTML-Quelltext eines Beitrags aus dem alten System kopieren.
• Schritt zwei: Auf html-md.de in Markdown umwandeln, sodass aller Ballast wegfällt.
• Schritt drei: Das Markdown kurz prüfen und bei Bedarf nachschärfen, etwa Überschriftenebenen korrigieren.
• Schritt vier: Je nach Ziel das Markdown direkt übernehmen, falls das neue CMS Markdown versteht, oder es zurück in sauberes HTML wandeln.

Das Ergebnis ist ein einheitlicher, schlanker Inhalt, dessen Aussehen vollständig vom neuen System bestimmt wird. So profitieren die migrierten Beiträge sofort vom Design des neuen Auftritts, statt alte Schriften und Farben mitzubringen. Gerade bei vielen Beiträgen spart dieser Weg enorm Zeit gegenüber dem Aufräumen von Hand. Und weil alles lokal im Browser läuft, verlassen auch sensible Inhalte das Gerät nicht. Mehr dazu im Ratgeber Markdown-Converter und Datenschutz. Am besten probieren Sie es direkt mit einem eigenen Schnipsel im Konverter aus.

Häufige Fragen