HTML in sauberes Markdown umwandeln

So wandelst du HTML in Markdown um

1. Füge dein HTML hinzu. Füge Markup in das Feld ein, öffne eine lokale .html-Datei oder kopiere einen Abschnitt einer beliebigen Webseite und füge ihn ein: Mit aktiviertem Rich-Paste nimmt der Konverter das formatierte HTML aus der Zwischenablage statt des reinen Texts.
2. Setz eine Basis-URL, wenn Links relativ sind. Aus dem Quelltext einer Seite kopiertes Markup enthält oft Links wie /docs/setup. Gib die Seitenadresse ein, und jeder relative Link und jedes Bild wird absolut.
3. Wähle deinen Markdown-Stil. Die Voreinstellungen (ATX-Überschriften, Bindestrich-Aufzählungen, eingezäunter Code, Inline-Links, GFM an) passen zu GitHub, GitLab, Obsidian, den meisten Static-Site-Generatoren und KI-Werkzeugen.
4. Kopieren oder herunterladen. Das Ergebnis aktualisiert sich beim Tippen. Kopiere es in die Zwischenablage oder speichere es als .md-Datei, benannt nach der ersten Überschrift.

Was konvertiert wird, Element für Element

Markdown hat einen viel kleineren Wortschatz als HTML, die eigentliche Aufgabe eines Konverters ist also zu entscheiden, was aus jedem Element wird. Das liefert dieses Tool:

• Überschriften <h1>–<h6> werden zu # bis ######. Setext unterstreicht nur H1 und H2, weil die Syntax nicht mehr kann; H3 und tiefer nutzen weiterhin #.
• Fett und kursiv (<strong>, <b>, <em>, <i>) verwenden die Begrenzer, die du wählst.
• Links werden zu [Text](URL "Titel") oder, wenn du Referenzlinks wählst, zu nummerierten Verweisen am Dokumentende. Links, die Skripte ausführen (javascript:) oder data:-Inhalte tragen, werden auf ihren Text reduziert.
• Bilder werden zu ![Alt-Text](src). Verzögert geladene Bilder, die die echte Adresse in data-src halten, werden ebenfalls erkannt. Eingebettete data:-Bilder werden weggelassen, weil ein Base64-Block eine Markdown-Datei unlesbar macht.
• Listen, auch mehrfach verschachtelte, werden unter ihrem übergeordneten Eintrag eingerückt. Nummerierte Listen behalten ihre start-Zahl, eine Liste, die bei 4 beginnt, beginnt also weiter bei 4.
• Zitate werden zu >-Zeilen, verschachtelte Zitate eingeschlossen.
• Code: Inline-<code> wird zu Backticks; <pre>-Blöcke werden zu eingezäunten Blöcken mit der Sprache, sofern eine angegeben ist (siehe unten).
• Tabellen werden zu GFM-Pipe-Tabellen. Details und Grenzen stehen im nächsten Abschnitt.
• Durchgestrichenes und Aufgabenlisten: <del>, <s> und <strike> werden zu ~~Text~~; Listeneinträge, die mit einer Checkbox beginnen, werden zu - [ ] oder - [x].
• Komplett entfernt: <script>, <style>, <noscript>, <template>, iframes, Embeds, SVG und Canvas. Layout-Hüllen wie <div> und <span> werden aufgelöst, nur ihr Text bleibt, und genau das macht Markdown kleiner und lesbarer als das HTML, aus dem es stammt.

Tabellen: Was Markdown halten kann und was nicht

Die GitHub-Flavored-Markdown-Spezifikation (englisch) definiert eine Tabelle als Kopfzeile, Trennzeile aus Strichen und Datenzeilen. Drei Regeln der Spezifikation bestimmen, wie HTML-Tabellen konvertiert werden:

• Eine Kopfzeile ist Pflicht. Viele HTML-Tabellen, besonders aus Tabellenkalkulationen oder alten CMS-Seiten eingefügte, haben gar keine <th>-Zellen. Unverändert könnten sie keine Pipe-Tabellen werden, deshalb macht der Konverter standardmäßig die erste Zeile zur Kopfzeile. Entferne das Häkchen, wenn du solche Tabellen lieber als HTML behalten willst.
• Blockinhalt passt nicht in eine Zelle. Die Spezifikation legt fest, dass Block-Elemente nicht in eine Tabelle eingefügt werden können, deshalb werden Absätze und Zeilenumbrüche in einer Zelle auf eine Zeile geglättet. Listen in Zellen verlieren ihre Struktur; wenn eine Tabelle reichen Inhalt hält, behalte sie besser als HTML.
• Ein wörtlicher senkrechter Strich muss maskiert werden. Ein | in einer Zelle würde eine neue Spalte beginnen, deshalb schreibt der Konverter ihn als \|, was die Spezifikation überall in einer Zelle erlaubt, auch in Code-Spans.

Verbundene Zellen werden teilweise unterstützt: Auf eine Zelle mit colspan="3" folgen zwei leere Zellen, damit die Spalten ausgerichtet bleiben. Zeilenverbünde haben kein Markdown-Gegenstück und werden nicht nachgebildet. Eine <caption> wandert als eigener Absatz über die Tabelle, und die Spaltenausrichtung aus align-Attributen wird zu :--, :-: oder --: in der Trennzeile.

Codeblöcke und Syntaxhervorhebung

Eingezäunte Codeblöcke können hinter dem öffnenden Zaun eine Infozeichenfolge tragen, etwa ```python, die Renderer zum Einfärben des Codes nutzen. Der Konverter sucht die Sprache dort, wo Highlighter sie ablegen: in den Klassen language-* und lang-* (Prism, highlight.js und die meisten Markdown-Renderer), in GitHubs Hülle highlight-source-* und in den Attributen data-lang oder data-language. Ein <pre> ohne inneres <code>-Element wird trotzdem als Codeblock behandelt und nicht als maskierter Fließtext.

Der Codetext wird wortgetreu übernommen, Highlighter-Markup (all die farbigen <span>-Elemente) verschwindet also, ohne den Code anzutasten. Enthält der Code selbst eine Folge von drei Backticks, wird der Zaun länger als diese Folge gemacht, weil die Spezifikation verlangt, dass der schließende Zaun mindestens so lang ist wie der öffnende; so bleibt Markdown-Dokumentation über Markdown intakt.

Die Optionen erklärt

ATX- oder Setext-Überschriften

ATX-Überschriften (# Titel) funktionieren für alle sechs Ebenen und sind das, was nahezu jedes Werkzeug erwartet. Setext-Überschriften unterstreichen den Text mit === oder ---; manche Styleguides bevorzugen sie für H1 und H2, aber H3 und tiefer können sie nicht ausdrücken.

Inline- oder Referenzlinks

Inline-Links halten jede URL neben ihrem Text, was zu kurzen Dokumenten und KI-Prompts passt. Referenzlinks verschieben URLs in eine nummerierte Liste am Ende, was lange Absätze im reinen Texteditor lesbar hält und in Dokumentations-Repositories üblich ist.

Markdown-Zeichen maskieren

Text wie 2024. Ein gutes Jahr oder datei_name_hier würde als Liste oder Kursivschrift missverstanden, deshalb maskiert der Konverter solche Zeichen mit Backslashes. Das ist richtig für alles, was gerendert wird. Geht die Ausgabe in einen Chat mit einem KI-Modell, einen Suchindex oder eine reine Textnotiz, entferne das Häkchen für saubereren Text.

Basis-URL

Relative URLs ergeben nur auf der Seite Sinn, aus der sie stammen. Mit gesetzter Basis-URL wird ../images/chart.png auf https://example.com/blog/post zu https://example.com/images/chart.png, aufgelöst nach denselben Regeln wie im Browser.

Eine ganze Webseite konvertieren

Dieser Konverter ruft keine URLs ab. Eine Seite in deinem Browser kann das HTML einer anderen Website nur lesen, wenn diese es erlaubt, und viele moderne Seiten setzen ihren Inhalt nach dem Laden per JavaScript zusammen, sodass ein serverseitiger Abruf oft nur eine leere Hülle liefern würde. Kopieren aus der gerenderten Seite umgeht beides: Markiere den Artikel, kopiere, füge hier ein. Du bekommst den Text, den du wirklich siehst, mit Links und Formatierung, und nichts von der Navigation, den Cookie-Bannern oder der Werbung, die du nicht markiert hast. Willst du stattdessen alle Links einer Seite herausziehen, nimm den Link-Extraktor (englisch).

Häufige Probleme und Lösungen

• Eine Tabelle erscheint in der Ausgabe als HTML. GFM ist aus, oder die Kopfzeilen-Option ist aus und die Tabelle hat keine Kopfzeile. Schalte eine der beiden Optionen wieder ein.
• Links zeigen an die falsche Stelle. Sie waren relativ. Trag die Seitenadresse als Basis-URL ein.
• Zeilenumbrüche sehen seltsam aus. Ein <br> wird zu zwei Leerzeichen am Zeilenende und einem Zeilenumbruch, dem harten Zeilenumbruch von CommonMark. Manche Editoren entfernen Leerzeichen am Zeilenende beim Speichern, was ihn wieder zum weichen Umbruch macht.
• Text fehlt. Stammt das HTML aus „Seitenquelltext anzeigen“ einer JavaScript-lastigen Seite, steht der Inhalt womöglich gar nicht im Markup. Kopiere stattdessen aus der gerenderten Seite.
• Alles ist ein einziger Absatz. Die Quelle hat für Absätze <div> statt <p> genutzt. Markdown kennt nur die semantischen Elemente, eine aus gestylten Divs gebaute Seite wird also zu zusammenhängendem Text.

Warum überhaupt HTML in Markdown umwandeln?

Markdown behält, was Bedeutung trägt (Überschriften, Betonung, Links, Listen, Tabellen, Zitate und Code), und lässt Layout-Markup und Inline-Stile weg. So lässt es sich leichter bearbeiten, in der Versionsverwaltung prüfen, in eine Wissensdatenbank wie Obsidian oder eine Doku-Seite übernehmen oder an ein KI-Modell geben, ohne dessen Kontext für class-Attribute zu verbrauchen. Entwickler nutzen es, um CMS-Inhalte in eine statische Seite zu migrieren, Schreibende, um Entwürfe zwischen Editoren zu verschieben, Forschende, um saubere Kopien von Quellen zu behalten. Wenn du Quellen sammelst statt sie umzuwandeln, kann Marqly Recherche-Links organisieren in einer durchsuchbaren Bibliothek, und die Seite Marqly für Entwickler zeigt, wie gespeicherte Doku und Snippets auffindbar bleiben.

Privat von Grund auf

Der Konverter ist die quelloffene Bibliothek Turndown mit ihrem Plugin für GitHub-Markdown, dazu die eigene Behandlung von Tabellen, Code und Links dieser Seite, alles in die Seite eingebunden. Er funktioniert nach dem Laden offline, und eingefügter Text, Dateien und Einstellungen bleiben auf deinem Gerät. Für einen schnellen Größencheck vor oder nach der Konvertierung zählt auch der Lesezeit-Rechner Wörter und Zeichen lokal.