Die meisten Texterinnen und Texter schreiben ihre Texte noch immer mit dem guten alten Microsoft Word. Egal ob Broschüre, Flyer, Newsletter, Blogpost oder Internetauftritt – am Ende wird ein Manuskript mit der Endung .docx oder .doc abgeliefert. Bei Webtexten wird das zum Problem.

Denn im Gegensatz zu Grafikern, die Word-Manuskripte für Broschüren, Flyer oder Magazine meist ohne Murren via Copy-Paste mühselig ins InDesign übertragen, sind Programmierer und Content-Manager immer seltener bereit, die Texte im angelieferten Manuskript in HTML-Code zu verwandeln. Die wollen lieber direkt HTML.

Texte in HTML-Code schreiben, macht keinen Spass

HTML ist keine Hexerei. Wer sich als Texter noch nicht damit beschäftigt hat, sollte das unbedingt nachholen. Zum Beispiel jetzt. Hier ein superkurzer Crash-Kurs für Anfänger, von denen es in der Gilde der Texter schrecklich viele gibt.

Los gehts. Wer in Microsoft Word Formatvorlagen benutzt, kapiert das Konzept auf Anhieb. Wenn ich einen Text als Überschrift 1 definieren will, setze ich vor und nach dem Text eine Klammer mit h1 für Headline 1:

<h1>Das ist der Text für Überschrift 1</h1>

Der Schrägstrich in der zweiten Klammer schliesst die Klammer. Wenn ich den Text als Überschrift 2 definieren will, sieht das so aus:

<h2>Das ist der Text für Überschrift 2</h2>

Möchte ich einen Text fett haben, mache ich ihn stark:

<strong>Das ist fetter Text</strong>
<b>Das ist fetter Text</b>`

Statt strong funktioniert auch ein b für bold. Und wenn ich etwas kursiv haben will, setze ich in die Klammer ein i für italic:

<i>Das ist kursiver Text</i>

Dann möchte ich meine Textblöcke in Abschnitte gliedern:

<p>Dieser Text ist ein erster Abschnitt.</p>
<p>Dieser Text ist der zweite Abschnitt.</p>

Das Web lebt von Links. Hier ein Beispiel:

<a href="www.supertext.ch">Das ist der Link</a>

Und dann habe ich noch eine Liste mit Gründen, warum man als Texter unbedingt HTML beherrschen sollte:

<ul>
<li>Grund 1</li>
<li>Grund 2</li>
<li>Grund 3</li>
</ul>

Noch komplizierter wird es mit nummerierten Listen. Aber zuerst bauen wir noch ein Zitat ein:

<blockquote>Ich bin ein Berliner.</blockquote>

So. Das sind die absoluten Basics. Und die reichen meistens. Viel mehr Struktur brauchen die wenigsten Texte. Wer bis jetzt nur Bahnhof versteht, findet im Web schaufelweise ausführliche HTML-Crash-Kurse.

Fasse ich einen ganzen Text in HTML ab, wird es gern schnell unübersichtlich:

<h1>Das ist der Titel.</h1><h2>Das ist der Untertitel</h2><p>Und hier beginne ich nun mit einem Abschnitt, der ziemlich <strong>fett</strong> ist, mit vielen <i>kursiven Wörtern</i> gespickt ist. Und auch noch einen Link zu <a href="http://www.supertext.ch">Supertext</a> enthält.</p>

Im Browser sieht das dann so aus:

Das ist der Titel.
Das ist der Untertitel
Und hier beginne ich nun mit einem Abschnitt, der ziemlich fett ist, mit vielen kursiven Wörtern gespickt ist. Und auch noch einen Link zu Supertext enthält.

Grauenhaft, das HTML, oder? Als Texter verliert man sich und das, was man schreiben will, nur allzu schnell zwischen all den Code-Blöcken.

Und genau hier kommt Markdown ins Spiel.

HTML-Texte in Markdown schreiben, ist genial

Markdown ist, genau wie HTML, eine Sprache für das Formatieren von Texten. Markdown ist jedoch kein Ersatz für HTML. Sondern vielmehr eine Vereinfachung der wichtigsten HTML-Tags.

Markdown wurde von John Gruber erfunden und von E-Mails inspiriert, die in Plain Text verfasst sind. Wer E-Mails wie ich nur in Plain Text verfasst, kennt das Problem. Man kann respektive muss weder die Schriftart noch die Schriftgrösse definieren. Man übermittelt nur Text. 24 Buchstaben und ein paar Sonderzeichen. That’s it. HTML und jede andere Programmiersprache funktioniert so. Und genau das ist der grosse Vorteil: es ist nur Text.

Aber wie strukturiere ich meinen Text? Man verwendet Tags. HMTL-Tags sagen dem Browser wie er Text darstellen soll. Siehe oben.

Vor die Überschrift 1 setze ich eine Raute, vor Überschrift 2 zwei Rauten, etc.:

# Überschrift 1
## Überschfift 2
### Überschrift 3

Um Textpassagen kursiv oder fett zu markieren, setze ich vor und nach dem Text einen, bzw. zwei Sterne:

**fett**
*kursiv*

Um den Text in Abschnitte zu gliedern lässt man einfach eine Zeile aus. Listen funktionieren wie im Word:

- Grund 1
- Grund 2
- Grund 3

Oder nummeriert:

1. Grund
2. Grund
3. Grund

Zitate sind ebenfalls simpel:

> Ich bin ein Berliner

Links baut man wie folgt ein:

[Link zu Supertext][http://www.supertext.ch]

Im Gegensatz zu HTML sieht ein Text in Markdown immer noch sehr lesbar aus. Und es macht Spass damit zu schreiben:

# Das ist der Titel
## Das ist der Untertitel

Und hier beginne ich nun mit einem Abschnitt, der ziemlich **fett** ist, mit vielen *kursiven Wörtern* gespickt ist. Und auch noch je einen Link zu [Supertext Zürich][1] und zu [Supertext Berlin][2] enthält.

[1]: http://www.supertext.ch
[2]: http://www.supertext.de

Das sieht doch schon viel angenehmer als HTML aus. Eine schöne Übersicht über alle Markdwon-Tags gibt es auf Englisch im Original von John Gruber oder auf Deutsch.

Ich kann Markdown in jedem Textprogramm der Welt schreiben. Sogar in Microsoft Word. Am Ende wollen wir aber HTML-Code abliefern. Ich kann dafür einen Converter verwenden. Oder einen der vielen supercoole Markdown-Editoren benutzen, die Markdown in HTML konvertieren.

Mashable hat hier eine schöne Zusammenfassung mit 78 Markdown-Tools. Hier meine zwei aktuellen Favoriten:

• Ulysses 3
  Mein Top-Favorit. Benutze ich mittlerweilen für alle meine Texte. Design ist ähnlich simpel wie der ebenfalls wunderschöne iA Writer aber mit einigen tollen Zusatzfeatures für längere Texte. Leider nur für den Mac. Eine iPad-Version ist in Entwicklung.
• StackEdit
  Ein praktischer Online-Markdwon-Online-Editor mit Split-Screen. Links schreibt man Markdown und rechts sieht man gleich wie der Text in HTML dargestellt wird. Funktioniert in jedem Browser, ist kostenlos und synchronisiert mit meinem Google Drive.

StackEdit bietet eine guten, schnellen und kostenlosen Einstieg. Wer jedoch mehr als einen Online-Editor will, ist bei Ulysses 3 goldrichtig.

Titelbild via Flickr: HTML Protest – Guy Dickinson (CC BY-SA 2.0)