Was ist gemeint, wenn jemand von Markdown spricht? Und: Was ist der Unterschied zwischen Markup und Markdown?

Markdown ist eine einfache und übersichtliche Art einer Markup-Sprache. Sowohl Markup im Allgemeinen und Markdown im Speziellen verwenden sogenannte Tags, die strukturelle Elemente in einem Text markieren, z. B. fett gedruckten Text oder eine Liste. Die Tags in Markdown sind jedoch besonders einfach und leserlich.

Am besten ist, ich zeige Ihnen einige Beispiele und beschreibe mehr Details, also los:

Markup und Markdown auf einen Blick

Übrigens: Im Handel bedeuten die beiden Wörter etwas ganz anderes. Ein Markup ist dort ein Preisaufschlag auf den Einkaufspreis, ein Markdown eine Preisherabsetzung. Mit Texten hat das nichts zu tun. Wie man den Aufschlag berechnet, zeige ich in meinem Artikel Was ist Markup?

Wenn Markdown eine Markup-Sprache ist, was bedeutet dann überhaupt Markup?

Eine Markup-Sprache ist ein recht allgemeines, aber zugleich einfaches Konzept: Sie haben z. B. einen Text vor sich und möchten Teile davon hervorheben. Wenn Sie ein Buch lesen und sich wichtige Dinge für später markieren möchten, können Sie einen gelben Leuchtstift nehmen und die wichtige Passage im Text damit anstreichen. Oder Sie nehmen einen Bleistift und markieren am Buchrand alle wichtigen Zeilen mit einem senkrechten Strich.

Was auch immer Sie tun, sie haben damit der markierten Textpassage im Buch die Eigenschaft wichtig zugewiesen. Was beim Markup jedoch im Vordergrund steht, ist nicht die Erscheinung oder Darstellung dessen, was wichtig ist, sondern die Struktur. In unserem Beispiel wäre das: Wo beginnt der wichtige Teil und wo endet er? Diese Information ist für die wichtige Textpassage immer gleich, unabhängig davon, ob Sie nun einen gelben Leuchtstift oder einen Bleistift verwendet haben.

Um solche Strukturen in elektronischen Texten (oder Daten) zu markieren, verwendet man sogenannte Tags. Das sind Befehle, die im Ausgangs-Text bzw. Quelltext vorhanden sind, um die Struktur abzugrenzen. Diese Tags werden dann beim Umwandeln des Quelltexts in das fertige Dokument geeignet dargestellt. Wichtig kann z. B. als fettgedruckter oder kursiver Text dargestellt werden.

Mehr und grundlegendere Informationen über Markup und Markup-Sprachen finden Sie in einem weiteren sehr empfehlenswerten Artikel hier auf WebsiteBerater.com. Er heißt Was ist Markup? Bedeutung auf Deutsch, Beispiele, 21 Fakten. Dort erfahren Sie unter anderem:

• wie viele Markup-Sprachen es gibt
• warum man die direkte Eingabe von Markup beim Schreiben sogar mögen kann
• ob HTML eigentlich XML ist oder nicht
• woher das „H“ in „HTML“ stammt
• warum Sie Markup verstehen sollten, um erfolgreiche Suchmaschinenoptimierung auf Ihrer Website zu ermöglichen

Apropos Suchmaschinenoptimierung: Wenn Sie dieses Thema interessiert, dann ist Googles eigener Startleitfaden zur Suchmaschinenoptimierung ein guter, kostenloser Einstieg.

Der Unterschied von Markup Tags im Allgemeinen und Markdown Tags im Speziellen

Typische Tags in Markup-Sprachen verwenden spitze Klammern, in denen dann der Befehl steht. Für fettgedruckten Text schreibt man z. B. <b>Das ist fettgedruckter Text</b> und erhält Das ist fettgedruckter Text. Der Befehl „b“ kommt dabei vom englischen Wort „bold“ für „fettgedruckt“. Andere Strukturen werden mit anderen Befehlen markiert.

Dieser Markup-Tag hat also eine Version für den Beginn einer Struktur (<struktur>) und eine für das Ende der Struktur, die durch einen Schrägstrich gekennzeichnet ist: </struktur>. Durch diese Art, Strukturen in elektronischen Dokumenten zu kennzeichnen, kann der Quelltext allerdings recht unleserlich werden.

Die Markup-Sprache Markdown ist der Versuch, bereits gut leserlichen Quelltext schreiben zu können, der dann auch noch umgewandelt und formatiert werden kann, wie in allen Markup-Sprachen. Um den obigen fettgedruckten Text in Markdown zu erzeugen, schreibt man einfach **Das ist fettgedruckter Text**, also einen Doppel-Asterisk vor und nach der zu markierenden Passage.

Bei fett gedrucktem Text ist der Unterschied zwar noch nicht so deutlich, aber hier sind noch ein paar andere Beispiele:

Der direkte Vergleich von Markup und Markdown: Typische Befehle

Vergleichen wir Markdown z. B. mit HTML, der Markup-Sprache, die von Ihrem Internet-Browser gelesen und in das umgewandelt wird, was Sie gerade lesen. Zwei konkrete Vergleiche möchte ich Ihnen hier noch zeigen. Zunächst fettgedruckten, kursiven Text und danach eine ungeordnete Liste.

Um in HTML fettgedruckten und kursiven Text zu erzeugen, schreibt man <b><i>Etwas Text</i></b> (also zwei separate Tags; das zuletzt geöffnete wird zuerst geschlossen) und erhält Etwas Text. In Markdown schreibt man dazu ***Etwas Text***.

Um in HTML eine ungeordnete Liste, z. B. mit drei Einträgen, zu erzeugen, schreibt man <ul><li>Erster Eintrag</li><li>Zweiter Eintrag</li><li>Dritter Eintrag</li></ul> und erhält:

• Erster Eintrag
• Zweiter Eintrag
• Dritter Eintrag

Um das gleiche in Markdown zu erreichen, schreibt man:

* Erster Eintrag
* Zweiter Eintrag
* Dritter Eintrag

Dabei hat also der Text in Markdown bereits eine gewisse Struktur. Die braucht man zwar in HTML nicht, dafür ist der Code aber unübersichtlicher und im Allgemeinen auch etwas länger. Klarerweise schreibt man grundsätzlich auch HTML-Code in etwas schönerem Format, doch was davon Inhalt ist und was Tags ist nicht so deutlich:

<ul>
  <li>Erster Eintrag</li>
  <li>Zweiter Eintrag</li>
  <li>Dritter Eintrag</li>
</ul>

Die wichtigsten Befehle im Vergleich: So sehen die häufigsten Auszeichnungen in Markdown und in HTML aus.

Markdown erzeugt für fett und kursiv übrigens <strong> und <em>, also Auszeichnungen nach Bedeutung statt nach Aussehen. Warum das der bessere Weg ist, erkläre ich in meinem Artikel Was ist Markup?

Herkunft und Entwicklung von Markup und Markdown

Die Entwicklung von Markup-Sprachen geht auf Entwicklungen im Drucksatz zurück, wo man einzelne Passagen, so wie im Beispiel oben, in einem anderen Schriftstil setzen oder anders hervorheben wollte. Die dazu eingeführten Markups, die entsprechende Passagen kennzeichnen, sind die Vorbilder für die Markup-Tags in elektronischen Texten.

Damit bei Dokumenten oder Informationen eine Struktur geschaffen werden kann, die je nach Vorliebe verschieden angezeigt werden kann (oder auch versteckt), hat man verschiedene Markup-Sprachen eingeführt. Diese erlauben im Prinzip auch selbst eingeführte Tag-Bezeichnungen (im XML) und sind somit sehr vielseitig anwendbar.

Markdown wurde ursprünglich als gut leserliche Markup-Sprache im Hinblick auf z. B. reine Text-Dateien bzw. Emails entwickelt. Mit der Zeit hat es sich darüber hinaus zu einer Anwendung als einfaches Eingabeformat für Texte entwickelt, die letztlich für das WWW gedacht sind. Eine Unterstützung von Markdown in einigen der aktuell gebräuchlichen Programmiersprachen ist ebenfalls dazu gekommen.

Markdown stammt von John Gruber, der die Version 1.0.1 im Dezember 2004 veröffentlichte; Aaron Swartz hat mit seinen Rückmeldungen wesentlich zur Syntax beigetragen. Weil Grubers Beschreibung manches offen ließ, entstanden mit der Zeit viele Varianten. Seit 2014 gibt es mit CommonMark eine genaue Spezifikation; GitHub Flavored Markdown (GFM) erweitert sie um Tabellen, durchgestrichenen Text und Aufgabenlisten.

Einsatzgebiete von Markup und Markdown

Aus Quelltext in Markdown wird bei der Umwandlung HTML (Grubers ursprüngliches Programm erzeugte noch XHTML). Markdown lässt sich daher überall einsetzen, wo aus einfachem Text eine HTML-Datei für eine Website erzeugt werden soll.

Für das Web gibt es zwar verschiedene Editoren, die direkt HTML-Code erzeugen, manchmal möchte man aber verhindern, dass HTML-Tags direkt für das Markup verwendet werden.

Das gilt z. B. für Internet-Foren oder ähnliche Fälle, in denen Gäste einer Website dort Inhalte schreiben können. Bei Foren-Einträgen oder Kommentaren auf einer Website wäre es riskant, einem Besucher zu erlauben, Text mit darin enthaltenen beliebigen HTML-Tags direkt auf z. B. der eigenen Website zu publizieren.

Dabei könnten ungewollte Elemente oder Links eingeschleust werden, durch die andere Besucher dann geschädigt oder auf andere ungewollte Inhalte umgeleitet werden könnten. Um das und ähnliche Dinge zu verhindern, werden HTML-Tags standardmäßig aus solchen Einträgen von Besuchern auf Websites entfernt.

Ein Zwischenschritt über Markdown ermöglicht es jedoch, trotzdem den Text zu formatieren, einfach zu gliedern, oder einzelne Passagen hervorzuheben. Die Übersetzung in HTML wird dabei kontrolliert ausgeführt, und nur erlaubte HTML-Elemente können erzeugt werden.

Welche Plattformen unterstützen bzw. nutzen Markdown?

Markdown wird in der einen oder anderen Form auf einigen bekannten Web-Plattformen eingesetzt, z. B. auf GitHub oder Stack Overflow. Andere Systeme wie etwa Wikipedia nutzen zwar ebenfalls eine vereinfachte Markup-Sprache, es handelt sich dabei jedoch nicht um Markdown, sondern z. B. im konkreten Beispiel von Wikipedia um Wikitext.

GitHub verwendet dabei GitHub Flavored Markdown, Stack Overflow verweist in seiner Hilfe auf die CommonMark-Spezifikation. Auch die gängigen Content-Management-Systeme für Websites verstehen Markdown, entweder von Haus aus oder über eine Erweiterung. Der Block-Editor von WordPress z. B. wandelt einige Markdown-Befehle schon beim Tippen um; für mehr verwendet man ein Plugin.

Auch KI-Assistenten schreiben Markdown. OpenAI legt in seinen Richtlinien für die eigenen Modelle fest, dass Antworten standardmäßig in Markdown formatiert werden, mit Überschriften, Fettdruck, Tabellen und Code-Blöcken. Das Chatfenster zeigt daraus formatierten Text an.

Sie verwenden WordPress auf Ihrer Website, so wie ich? Dann sollten Sie als nächstes unbedingt lesen, wie man die Markup-Sprache Markdown in WordPress einsetzen kann, gleich hier auf WebsiteBerater.com.

Dort beschreibe ich, was die beiden Standard-Editoren in WordPress (der Classic Editor und der neue WordPress Block-Editor Gutenberg) bereits an Markdown-Befehlen beherrschen und was nicht. Außerdem beschreibe ich, dass es eine Rolle spielt, ob Sie dort Markdown hineinkopieren oder direkt schreiben.

Braucht man verschiedene Editoren für Markup bzw. Markdown?

Um Text in Markdown oder einer beliebigen anderen Markup-Sprache zu schreiben, braucht man keinen speziellen Editor. Ein simpler Text-Editor genügt. Text-Editoren, die auch Syntax-Highlighting in verschiedenen Programmiersprachen beherrschen, erleichtern das Schreiben von Markup, z. B. in HTML, allerdings deutlich.

Bei Syntax-Highlighting werden Elemente der jeweiligen Programmiersprache farblich hervorgehoben, während der eigentliche Text unscheinbar bleibt. Nehmen Sie als Beispiel die oben eingeblendete Liste in HTML. Hier ist sie nochmal:

<ul>
  <li>Erster Eintrag</li>
  <li>Zweiter Eintrag</li>
  <li>Dritter Eintrag</li>
</ul>

Sind diese Code-Beispiele übrigens nicht super praktisch und wunderschön anzusehen? Wie man solche Code-Beispiele in WordPress anzeigt, habe ich (dringende Empfehlung!) in meinem Artikel So geht’s: Code-Beispiele auf der WordPress-Website im Detail beschrieben. Das spezifische Plugin, das ich benutze, beschreibe ich in Das Enlighter WordPress-Plugin: Installation, Einstellungen, Vorteile.

Um für Markup oder Markdown bereits beim Schreiben eine Vorschau der formatierten Ausgabe zu sehen, braucht man allerdings einen Editor, der die Umwandlung der Tags beherrscht. Bei Foren im Internet kann dafür ein Vorschau-Kasten eingeblendet sein, in dem man sehen kann, was aus dem geschriebenen Markdown wird.

Andere Fälle sind sogenannte What-you-see-is-what-you-get (WYSIWYG)-Editoren, in denen man mehr oder weniger ein Dokument samt Formatierung für das WWW erstellt. In WordPress ist das seit Version 5.0 vom Dezember 2018 der Block-Editor (Projektname Gutenberg). Er hat den älteren Editor auf Basis von TinyMCE abgelöst, den es als offizielles Plugin Classic Editor weiterhin gibt; laut wordpress.org ist es auf mehr als acht Millionen Websites aktiv.

Das Resultat ist in beiden Fällen HTML-Code, nur dass man bei WYSIWYG-Editoren bereits in einer beinahe akkuraten Darstellung arbeitet, ähnlich wie wir das von modernen Textverarbeitungsprogrammen gewohnt sind. Solche Editoren können die Verwendung von Markdown also im Prinzip auch ersetzen.

Muss, kann oder soll ich Markdown herunterladen?

Markdown an sich ist eine Konvention für die Übersetzung von Zeichen in Formatierung und kann per se nicht heruntergeladen werden. Herunterladen kann man jedoch die Unterstützung von Markdown für Programme auf dem eigenen Computer oder spezielle Markdown-Editoren.

Die Unterstützung für Markdown findet man auch oft Online auf Websites und Plattformen, die es Besuchern ermöglichen, Web-Inhalte zu formatieren. Dabei findet auch die Übersetzung von Markdown in HTML online statt. Um Word-Dokumente in Markdown umzuwandeln oder umgekehrt, eignet sich das kostenlose Kommandozeilen-Werkzeug Pandoc.

Als Editor mit Vorschau eignet sich z. B. der kostenlose Visual Studio Code von Microsoft: Er läuft unter Windows, macOS und Linux und zeigt eine Markdown-Datei auf Knopfdruck formatiert an. Wenn ein Dokument als Markdown gespeichert ist, kann es direkt an der entsprechenden Stelle im WWW, in Emails oder sonstigen geeigneten Orten eingesetzt werden.

Wo finde ich Tutorials für Markup-Sprachen bzw. Markdown?

Tutorials für die vielen verschiedenen Markup-Sprachen findet man recht einfach im WWW. Für Markdown im Speziellen gibt es aufgrund des vergleichsweise begrenzten Umfangs der Syntax einige gute Cheat-Sheets, die das Wichtigste abdecken.

Denn alles, was man braucht, ist de facto eine Liste der Befehle. Hilfreich finde ich persönlich z. B. die beiden Auflistungen auf markdownguide.org und markdown.de. Zum Abschluss möchte ich hier noch ein etwas fortgeschrittenes Beispiel in Markdown anbringen, das den Unterschied in Lesbarkeit zu HTML noch etwas deutlicher macht.

Fortgeschrittenes Beispiel: Tabelle in Markdown

Tabellen gehörten übrigens nicht zum ursprünglichen Markdown und stehen auch nicht in der CommonMark-Spezifikation. Sie sind eine Erweiterung, die z. B. GitHub Flavored Markdown festlegt; der WordPress-Block-Editor macht aus einer eingefügten Markdown-Tabelle einen Tabellen-Block.

Eine Tabelle in Markdown ist recht einfach und übersichtlich zugleich. Hier ist ein Beispiel:

| Überschrift 1 | Überschrift 2 | Überschrift 3 | Überschrift 4 |
|---------------|---------------|---------------|---------------|
| Katze         | Adler         | Forelle       | Fliege        |
| Hund          | Mäusebussard  | Karpfen       | Biene         |
| Pferd         | Fink          | Hecht         | Ameise        |

Die gleiche Tabelle in HTML sähe folgendermaßen aus:

<table>
  <thead>
    <tr>
      <th>Überschrift 1</th>
      <th>Überschrift 2</th>
      <th>Überschrift 3</th>
      <th>Überschrift 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Katze</td>
      <td>Adler</td>
      <td>Forelle</td>
      <td>Fliege</td>
    </tr>
    <tr>
      <td>Hund</td>
      <td>Mäusebussard</td>
      <td>Karpfen</td>
      <td>Biene</td>
    </tr>
    <tr>
      <td>Pferd</td>
      <td>Fink</td>
      <td>Hecht</td>
      <td>Ameise</td>
    </tr>
  </tbody>
</table>

Dargestellt auf der Website schließlich erhält man folgendes Ergebnis:

Somit kennen Sie jetzt bereits ein deutlich fortgeschrittenes Beispiel einer Markdown-Anwendung. Tabellen sind übrigens auch per se und in WordPress ein fortgeschrittenes Thema. Neugierig? Dann lesen Sie als nächstes unbedingt meinen Artikel Tabellen in WordPress, einfach erklärt.

Ihr Feedback zu diesem Artikel

Über Feedback zu diesem Artikel freue ich mich. Lassen Sie unten einen Kommentar für mich da, ob Lob, Kritik oder eine Frage, die ich hier nicht beantwortet habe, ich bin immer für Hinweise und Anregungen dankbar, die diesen Artikel verbessern. Bitte beachten Sie: Um Spam zu vermeiden, lese ich jeden Kommentar persönlich und gebe ihn dann erst frei. Seien Sie also nicht überrascht, wenn es ein bisschen dauert, bis er zu sehen ist. Danke für Ihr Verständnis!

Weitere Informationen

Zum Schluss nochmal die Links zu meinen beiden Detail-Artikeln, die Sie unbedingt als nächstes lesen sollten, je nachdem, ob Sie sich eher für Markdown oder Markup interessieren. Und falls Sie eigentlich eher an WordPress-Websites interessiert sind, dann verpassen Sie auf keinen Fall die Übersicht zur Komplettanleitung für eine WordPress Website!