Markdown in HTML umwandeln: Anleitung

Wenn du schon einmal eine README-Datei auf GitHub geöffnet und dich gefragt hast, wie aus einfachem Text ordentliche Überschriften, fetter Text und klickbare Links werden, ist diese Anleitung zum Umwandeln von Markdown in HTML genau richtig für dich. Markdown ist eine leichtgewichtige Auszeichnungssprache: Du schreibst Text mit ein paar einfachen Zeichen wie # und *, und ein Konverter verwandelt ihn in sauberes HTML, das du überall verwenden kannst. In dieser Anleitung lernst du die wichtigste Markdown-Syntax — Überschriften, Hervorhebungen, Listen, Links, Bilder, Codeblöcke und Tabellen — jeweils mit einem kopierfertigen Beispiel und dem daraus entstehenden HTML. Am Ende schreibst du Markdown mit Selbstvertrauen und wandelst es in Sekunden in HTML um.

Was Markdown ist und warum Entwickler es lieben

Markdown wurde 2004 von John Gruber (mit Hilfe von Aaron Swartz) geschaffen, um formatierten Text zu schreiben, der auch in Rohform lesbar bleibt. Die Idee war simpel: Verwende Zeichen, die du ohnehin tippst — wie Sternchen und Rauten — statt spitzer Klammern, und überlasse einem Konverter die Übersetzung in HTML. Genau diese Philosophie lieben Entwickler. Markdown-Dateien sind reiner Text, funktionieren also in jedem Editor, spielen gut mit Versionskontrolle zusammen und sehen auf GitHub, GitLab und Dokumentationsseiten großartig aus.

Heute dominieren zwei Varianten. CommonMark ist die standardisierte Spezifikation, die die Regeln festlegt, während GitHub Flavored Markdown (GFM) praktische Extras wie Tabellen, Aufgabenlisten und Durchgestrichenes hinzufügt. Die meisten Konverter unterstützen beide. Der Lohn ist Geschwindigkeit: Du tippst ein paar Zeichen und erhältst vollständig strukturiertes HTML, ohne ein einziges Tag anzufassen. Wenn du sehen willst, wie dein Markdown zu echtem Markup wird, erledigt ein Markdown-in-HTML-Konverter das sofort — Text einfügen, HTML kopieren.

Überschriften, Fett und Listen: die Markdown-in-HTML-Grundlagen

Überschriften, Hervorhebungen und Listen decken den Großteil des alltäglichen Markdown ab: Beherrsche diese drei, und du kannst fast jedes Dokument schreiben. Schauen wir sie uns einzeln an — mit dem HTML, das jeweils dabei herauskommt.

Überschriften

Verwende Rauten: eine # für die größte Überschrift, bis zu sechs für die kleinste. Lass nach den Rauten immer ein Leerzeichen.

# Heading 1
## Heading 2
### Heading 3

Daraus wird:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

Fett und kursiv

Setze Text in einfache Sternchen oder Unterstriche für kursiv, in doppelte für fett und in dreifache für beides. GFM unterstützt außerdem Durchgestrichenes mit doppelter Tilde.

*italic* or _italic_
**bold** or __bold__
***bold and italic***
~~strikethrough~~

Das wird zu:

<em>italic</em> or <em>italic</em>
<strong>bold</strong> or <strong>bold</strong>
<strong><em>bold and italic</em></strong>
<del>strikethrough</del>

Listen

Beginne ungeordnete Einträge mit Bindestrich, Sternchen oder Pluszeichen; geordnete Einträge mit Zahlen. Rücke für verschachtelte Listen zwei Leerzeichen ein und nutze - [ ] für GFM-Aufgabenlisten.

- Apples
- Oranges
  - Blood oranges

1. First step
2. Second step

- [ ] Write the draft
- [x] Publish the article

Die HTML-Ausgabe:

<ul>
  <li>Apples</li>
  <li>Oranges
    <ul>
      <li>Blood oranges</li>
    </ul>
  </li>
</ul>
<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

Links und Bilder: die Syntax

Bei Links und Bildern spielt Markdown seine Stärke aus: Die Syntax bleibt kompakt und erzeugt trotzdem korrekte HTML-Anker und Bild-Tags.

Links

Die Grundform ist [Linktext](URL). Optional kannst du nach der URL einen Titel in Anführungszeichen ergänzen, der zum title-Attribut wird.

[Visit Toolinga](https://toolinga.com "Free online tools")

Ergibt:

<a href="https://toolinga.com" title="Free online tools">Visit Toolinga</a>

Für bloße URLs wandelt GFM alles in spitzen Klammern automatisch in Links um: <https://toolinga.com> wird sofort klickbar. Wenn du dieselbe URL oft wiederverwendest, halten Referenz-Links deinen Text ordentlich: Definiere [label]: https://example.com einmal am Dokumentende und schreibe [label], wo du es brauchst.

Bilder

Bilder funktionieren genau wie Links, nur mit einem Ausrufezeichen davor. Der Text in eckigen Klammern wird zum alt-Attribut — wichtig für Barrierefreiheit und SEO.

![A cat sitting on a laptop](cat.jpg "A helpful cat")

Wird zu:

<img src="cat.jpg" alt="A cat sitting on a laptop" title="A helpful cat">

Codeblöcke und Tabellen

Entwickler schreiben ständig Dokumentation, daher ist die Markdown-Unterstützung für Code und Tabellen erstklassig.

Inline-Code und Codeblöcke

Setze kurze Snippets in einfache Backticks: `npm install` wird als <code>npm install</code> dargestellt. Für mehrzeilige Blöcke rahme sie mit drei Backticks ein und gib die Sprache für das Syntax-Highlighting an:

```python
def greet(name):
    return f"Hello, {name}!"
```

Daraus entsteht ein <pre><code>-Block mit einer Sprachklasse, die dein Highlighter nutzen kann:

<pre><code class="language-python">def greet(name):
    return f"Hello, {name}!"</code></pre>

Tipp: Enthält dein Code selbst dreifache Backticks, rahme ihn stattdessen mit vier Backticks ein. Brauchst du einen wörtlichen Backtick im Inline-Code? Setze ihn in doppelte Backticks.

Tabellen

Tabellen sind eine GFM-Erweiterung und nicht Teil der ursprünglichen Spezifikation, aber fast jeder Konverter unterstützt sie. Trenne die Kopfzeile mit einer Strichzeile ab und steuere die Ausrichtung mit Doppelpunkten.

| Tool | Free | Rating |
| :--- | :---: | ---: |
| Toolinga | Yes | 5 |
| Others | Sometimes | 3 |

Wird zu einer vollständigen HTML-Tabelle:

<table>
  <thead>
    <tr><th>Tool</th><th>Free</th><th>Rating</th></tr>
  </thead>
  <tbody>
    <tr><td>Toolinga</td><td>Yes</td><td>5</td></tr>
    <tr><td>Others</td><td>Sometimes</td><td>3</td></tr>
  </tbody>
</table>

Dabei bedeutet :--- linksbündig, :---: zentriert und ---: rechtsbündig. Halte die senkrechten Striche in deiner Quelle ausgerichtet, damit es lesbar bleibt — Konvertern ist das egal, aber deinem zukünftigen Ich nicht.

Dein Markdown sofort umwandeln

Die Syntax zu kennen ist die halbe Miete; sie umzuwandeln die andere Hälfte. Hier ein komplettes Mini-Dokument und genau das, was ein Konverter daraus macht — ein echtes Praxisbeispiel dieser Anleitung zum Umwandeln von Markdown in HTML in Aktion.

Deine Markdown-Eingabe:

## Weekend Project

This weekend I built a **simple** website. Two wins:

- Faster load times
- Cleaner design

Read the full story on [my blog](https://example.com/blog).

Die HTML-Ausgabe:

<h2>Weekend Project</h2>
<p>This weekend I built a <strong>simple</strong> website. Two wins:</p>
<ul>
  <li>Faster load times</li>
  <li>Cleaner design</li>
</ul>
<p>Read the full story on <a href="https://example.com/blog">my blog</a>.</p>

Beachte, wie jede Markdown-Abkürzung genau einem HTML-Element zugeordnet wurde — ganz ohne Überraschungen. Probiere es selbst aus: Füge beliebiges Markdown in einen kostenlosen Markdown-in-HTML-Konverter ein und kopiere das Ergebnis direkt in deine Website, dein CMS oder deine E-Mail-Vorlage. Falls das erzeugte HTML überflüssige Leerzeichen oder wortreiche Formatierung enthält, jage es vor dem Veröffentlichen durch einen HTML-Minifizierer, um die Dateigröße zu schrumpfen.

Anleitung zum Umwandeln von Markdown in HTML: Häufige Fragen

Ist Markdown schwieriger als HTML?

Nein — es ist bewusst einfacher. HTML verlangt für alles öffnende und schließende Tags; Markdown braucht nur ein paar intuitive Zeichen. Eine Überschrift kostet ein # statt <h1>...</h1>, und ein Konverter übernimmt die Übersetzung, sodass du kaum je an Tags denkst.

Wo kann ich Markdown verwenden?

Fast überall, wo Entwickler schreiben: GitHub- und GitLab-READMEs, Dokumentationsseiten, Static-Site-Generatoren wie Jekyll und Hugo, Foren wie Reddit und Stack Overflow, Chat-Apps wie Discord und Slack sowie Notiz-Tools wie Obsidian und Notion. Auch viele Blog-Plattformen akzeptieren es.

Unterstützt Markdown Tabellen?

Ja, dank der Pipe-Syntax von GitHub Flavored Markdown — dem Format aus dieser Anleitung. Die ursprüngliche Spezifikation von 2004 enthielt keine Tabellen; wenn dein Konverter wörtliche Pipes ausgibt, wechsle zu einem mit GFM-Unterstützung.

Wird Markdown HTML ersetzen?

Nein, und das war nie das Ziel. Markdown ist eine Abkürzung, um HTML schneller zu schreiben, kein Ersatz: Alles, was Markdown nicht ausdrücken kann (eigene Klassen, Formulare, eingebettete Mediaplayer), braucht weiterhin reines HTML — das du praktischerweise direkt in jedes Markdown-Dokument mischen kannst.

Diese Anleitung zum Umwandeln von Markdown in HTML hat alles abgedeckt, was Einsteiger brauchen: Überschriften, Hervorhebungen, Listen, Links, Bilder, Codeblöcke und Tabellen — jede eine kleine Abkürzung, die sich zu korrektem HTML entfaltet. Am schnellsten verinnerlichst du das durch Übung: Schreibe deine nächste README, deinen nächsten Blog-Entwurf oder deine nächste Projektnotiz in Markdown und sieh zu, wie sie sich verwandelt. Füge deine Arbeit in den kostenlosen Markdown-in-HTML-Konverter ein und erhalte in Sekunden sauberes, publikationsfertiges HTML.