Kurz gesagt
Markdown in HTML umwandeln geht so: Markdown in das linke Feld des Konverters einfügen, das HTML erscheint sofort rechts und im Vorschau-Tab sehen Sie das fertige Ergebnis. Sie entscheiden, ob Sie nur das HTML-Fragment oder ein komplettes Dokument exportieren. Alles läuft im Browser, kein Upload, kostenlos.
Markdown ist bequem zum Schreiben, aber Browser, Newsletter-Systeme und viele Redaktionssysteme verstehen nur HTML. Die Umwandlung schlägt die Brücke: Aus dem leicht tippbaren Markdown wird gültiges HTML, das überall korrekt dargestellt wird. Dieser Ratgeber zeigt den Ablauf mit Live-Vorschau, erklärt den wichtigen Unterschied zwischen Fragment und komplettem Dokument und geht auf Sicherheit und Grenzen ein.
Im Hintergrund passiert dabei etwas Einfaches und zugleich Mächtiges: Eine Markdown-Bibliothek liest Ihren Text Zeile für Zeile, erkennt die Struktur und übersetzt sie in die passenden HTML-Elemente. Aus einer Zeile, die mit einer Raute beginnt, wird eine Überschrift, aus einem mit Sternchen umschlossenen Wort wird fett ausgezeichneter Text, aus einer Aufzählung wird eine Liste. Sie müssen sich um diese Übersetzung nicht kümmern, sondern schreiben weiter in der bequemen Markdown-Notation und erhalten am Ende sauberes, standardkonformes HTML. Genau diese Trennung von Schreiben und Ausgabe ist der Grund, warum Markdown in der technischen Welt so verbreitet ist.
Schritt für Schritt mit Vorschau
Der Konverter zeigt links das Markdown und rechts das Ergebnis. So gehen Sie vor:
- Markdown einfügen: Tippen Sie direkt oder fügen Sie bestehenden Markdown-Text in das linke Feld ein. Das HTML wird live berechnet, ohne separaten Knopf.
- Vorschau-Tab nutzen: Wechseln Sie auf den Vorschau-Tab, um das gerenderte Ergebnis genau so zu sehen, wie es ein Browser darstellt. So erkennen Sie sofort, ob Überschriften und Listen sitzen.
- Exportformat wählen: Entscheiden Sie, ob Sie nur das Fragment oder ein komplettes Dokument möchten.
- Kopieren oder herunterladen: Übernehmen Sie das HTML in die Zwischenablage oder speichern Sie es als .html-Datei.
Aus diesem Markdown:
# Überschrift
Ein Absatz mit **fettem** Text und einem [Link](https://example.com).
- Punkt eins
- Punkt zweiwird dieses HTML-Fragment:
<h1>Überschrift</h1>
<p>Ein Absatz mit <strong>fettem</strong> Text und einem
<a href="https://example.com">Link</a>.</p>
<ul>
<li>Punkt eins</li>
<li>Punkt zwei</li>
</ul>Ein Wort zur Live-Vorschau, weil sie im Alltag der wertvollste Teil des Tools ist. Beim Schreiben von Markdown ist es schwer, im Kopf zu behalten, wie viele Leerzeilen eine Liste braucht oder ob eine Tabelle richtig ausgerichtet ist. Die Vorschau nimmt Ihnen dieses Raten ab: Sie tippen links und sehen rechts in Echtzeit das Ergebnis. Stimmt etwas nicht, korrigieren Sie es sofort, statt erst nach dem Export Fehler zu suchen. Gerade Einsteiger lernen so nebenbei die richtige Schreibweise, weil sie jede Auswirkung unmittelbar beobachten. Wer den Quelltext lieber roh prüfen möchte, wechselt einfach vom Vorschau-Tab zurück zur HTML-Ansicht.
Fragment oder komplettes Dokument?
Die wichtigste Entscheidung beim Export ist, wie viel HTML Sie brauchen. Ein Fragment enthält nur den Inhalt. Ein komplettes Dokument bringt zusätzlich die Hülle mit, also <!doctype html>, <html>, <head> und <body>. Die folgende Tabelle hilft bei der Wahl.
| Kriterium | Fragment | Komplettes Dokument |
|---|---|---|
| Enthält | Nur den Inhalt | Inhalt plus Hülle |
| Wann nutzen | Einfügen in CMS, Blog, bestehende Seite | Eigenständige Datei zum Öffnen |
| Direkt im Browser? | Nein | Ja |
Ein komplettes Dokument sieht im Grundgerüst so aus:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Mein Dokument</title>
</head>
<body>
<h1>Überschrift</h1>
<p>... hier folgt der Inhalt ...</p>
</body>
</html>Faustregel: Wer den Inhalt in eine bestehende Webseite oder ein CMS einsetzt, nimmt das Fragment. Wer eine fertige Datei zum Doppelklicken braucht, nimmt das komplette Dokument.
Der Unterschied wirkt klein, hat aber praktische Folgen. Fügen Sie ein komplettes Dokument samt <html> und <head> in das Inhaltsfeld eines Redaktionssystems ein, entstehen oft doppelte Hüllen und das System verschluckt sich daran. Umgekehrt lässt sich ein reines Fragment nicht einfach per Doppelklick im Browser öffnen, weil ihm der Rahmen fehlt, den ein Browser zum Anzeigen einer Seite erwartet. Wer das passende Format wählt, erspart sich nachträgliches Aufräumen. Im Zweifel hilft die Frage: Existiert am Zielort bereits eine Seite, in die der Inhalt nur eingesetzt wird? Dann genügt das Fragment. Soll etwas völlig Eigenständiges entstehen, ist das komplette Dokument richtig.
GFM-Tabellen und Code-Blöcke nach HTML
Bei aktivem GitHub Flavored Markdown werden auch erweiterte Elemente sauber überführt. Eine Markdown-Tabelle wie diese:
| Spalte A | Spalte B |
| -------- | -------- |
| Wert 1 | Wert 2 |
wird zu einer echten HTML-Tabelle mit <table>, <thead> und <tbody>. Wie Sie solche Tabellen schreiben, zeigt der Ratgeber Markdown-Tabelle erstellen. Code-Blöcke mit Sprachangabe werden zu <pre><code> mit einer Sprachklasse, sodass eine Syntaxhervorhebung im Zielsystem greifen kann.
Wichtig ist, dass das erzeugte HTML semantisch korrekt ist. Eine Tabelle wird nicht mit Leerzeichen oder Bildern nachgebaut, sondern als echte Tabelle ausgegeben, die Suchmaschinen und Screenreader richtig verstehen. Genau das unterscheidet die saubere Umwandlung von einfachem Suchen und Ersetzen. Auch Listen werden als <ul> oder <ol> mit <li>-Einträgen ausgegeben, Zitate als <blockquote>. Dieses strukturierte HTML ist die beste Grundlage, falls Sie das Ergebnis später noch mit eigenem CSS gestalten möchten.
Rohes HTML im Markdown: Verhalten und Sicherheit
Markdown erlaubt es, mitten im Text rohes HTML zu schreiben. Beim Umwandeln wird dieses HTML in der Regel unverändert durchgereicht. Das ist praktisch, etwa für ein eingebettetes Element, das Markdown selbst nicht kennt. Es birgt aber ein Risiko: Stammt das Markdown aus fremder Quelle, könnte darin ein schädliches Skript stecken.
Deshalb wird die Live-Vorschau auf html-md.de mit DOMPurify bereinigt, einer etablierten Bibliothek, die gefährliche Inhalte wie <script> entfernt, bevor etwas im Browser ausgeführt wird. Ihre Eingabe wird also gefahrlos angezeigt. Wenn Sie das erzeugte HTML weiterverarbeiten und es Inhalte aus fremder Hand enthält, sollten Sie es vor dem Veröffentlichen ebenfalls bereinigen. Mehr zum Thema Datensicherheit im Ratgeber Markdown-Converter und Datenschutz.
HTML für E-Mail und Newsletter oder für die Webseite?
Nicht jedes HTML passt zu jedem Ziel. Für eine normale Webseite ist das erzeugte HTML in der Regel sofort verwendbar, weil moderne Browser den vollen Funktionsumfang verstehen. Bei E-Mail und Newsletter ist die Lage strenger: Viele E-Mail-Programme unterstützen nur einen reduzierten HTML-Umfang und ignorieren externe Stylesheets.
Für Newsletter brauchen Sie daher meist tabellenbasiertes Layout und Inline-Styles, was über die reine Markdown-Umwandlung hinausgeht. Das vom Konverter erzeugte HTML ist ein sauberer Ausgangspunkt, den Sie für den E-Mail-Versand noch anpassen. Für Webseiten genügt das Ergebnis dagegen fast immer ohne Nacharbeit.
Praktisch heißt das: Schreiben Sie den Inhalt Ihres Newsletters bequem in Markdown, wandeln Sie ihn in HTML um und übergeben Sie dieses HTML dann an ein E-Mail-Werkzeug, das sich um die E-Mail-typischen Eigenheiten kümmert. So trennen Sie das angenehme Schreiben vom technischen Versand. Für eine normale Webseite oder einen Blogbeitrag entfällt dieser Zwischenschritt meist ganz, weil Browser den vollen HTML-Umfang verstehen und das Design über das Stylesheet der Seite kommt. Diese Flexibilität ist einer der Gründe, warum so viele Redaktionen ihre Texte zuerst in Markdown verfassen und erst beim Veröffentlichen in HTML überführen.
Grenzen, ehrlich benannt
Der Konverter deckt den Kern von Markdown und die wichtigsten GFM-Erweiterungen ab. Einige Funktionen liegen aber außerhalb: Fußnoten werden je nach Eingabe nur teilweise umgesetzt, mathematische Formeln in LaTeX und Diagramme in Mermaid werden gar nicht gerendert. Diese Erweiterungen sind kein Teil des Markdown-Kerns und benötigen eigene Werkzeuge im Zielsystem.
Wer solche Spezialinhalte braucht, sollte sie im Zielsystem ergänzen. Für klassische Texte mit Überschriften, Listen, Links, Bildern, Tabellen und Code ist die Ausgabe vollständig und sofort einsetzbar.
Ein häufiges Missverständnis betrifft die Optik. Reines HTML aus Markdown bringt keine Farben, Abstände oder Schriftarten mit, weil Markdown selbst kein Aussehen beschreibt. Die Live-Vorschau im Konverter zeigt das Ergebnis mit einer schlichten Standarddarstellung, damit Sie die Struktur prüfen können. Wie die Seite später wirklich aussieht, entscheidet das CSS Ihres Zielsystems. Wer das weiß, ist nicht überrascht, wenn das exportierte HTML zunächst nüchtern wirkt: Das ist beabsichtigt und genau richtig, denn so fügt sich der Inhalt nahtlos in das Design der Zielseite ein.
Häufige Fragen
Was ist der Unterschied zwischen Fragment und komplettem Dokument?
Ein Fragment ist nur der Inhalt zum Einfügen in eine bestehende Seite. Ein komplettes Dokument bringt die Hülle mit doctype, head und body mit und lässt sich direkt im Browser öffnen.
Ist rohes HTML im Markdown gefährlich?
Es wird durchgereicht. Die Vorschau wird mit DOMPurify bereinigt. Bei Inhalten aus fremder Quelle sollten Sie das HTML vor dem Einsatz immer bereinigen.
Werden GFM-Tabellen korrekt umgewandelt?
Ja. Markdown-Tabellen werden zu HTML-Tabellen mit table, thead und tbody. Code-Blöcke mit Sprachangabe werden zu pre und code mit Sprachklasse.
Eignet sich das HTML für Newsletter?
Als Ausgangspunkt ja, aber E-Mail-Programme verstehen nur reduziertes HTML. Für den Versand sind meist Inline-Styles und tabellenbasiertes Layout nötig.