Markup: Text mit HTML formatieren

Wer ein Content Management System benutzt, wird das kennen: Es gibt zwar einen so genannten WYSIWYG-Editor, in dem eigentlich alles so aussehen sollte, wie es dann auch auf der Webseite dargestellt werden soll, aber letztendlich funktioniert das nur begrenzt. Dazu müsste man dann eigentlich den Text mit HTML formatieren. Aber wie geht das?

HTML, oder in diesem Fall nur ein bisschen einfacher Markup, ist ganz einfach, wenn man das System einmal verstanden hat. In diesem Artikel erkläre ich, wie Markup überhaupt funktioniert und welche Tags man kennen sollte, um ordentlich formatierten Text zu erhalten. Damit wären wir auch schon bei der ersten Frage:

Was ist ein Tag?

Markup – und damit auch HTML – basieren auf so genannten Tags. Das ist ein englisches Wort, das nichts weiter „auszeichnen“ bedeutet. Man zeichnet den Text aus, das heißt, man beschreibt die Bestandteile des Textes: Überschrift, Absatz, Zeilenumbruch, fett, kursiv, unterstrichen usw. Also muss man auch sagen, wann so ein Abschnitt anfängt und wann er aufhört. Dazu benutzt man bestimmte Kürzel in spitzen Klammern. <h1> bedeutet, dass eine Überschrift erster Ordnung beginnt und </h1> sagt, wo die Überschrift zuende ist.

Es gibt folgende Tags:

<h1></h1> Heading 1 – Überschrift erster Ordnung

<h6></h6> Heading 6 – Überschrift sechster Ordnung
<p></p> Paragraph – Ein Absatz mit einem kleinen Abstand zum nächsten Textelement
<b><b> bold – fett
<i></i> italic – kursiv
<u></u> underline – unterstrichen

Beispiele zur Benutzung:
Überschriften

sieht so aus:

Überschrift

Absätze und fett gedruckter Text

Sieht so aus:

Je größer die Zahl bei den Überschriften ist, desto größer ist Überschrift

Mit diesen Tags lässt sich ein Text schon mal ohne größere Probleme leserlich und übersichtlich gestalten. Es gibt aber noch ein paar Besonderheiten, die im Internet durchaus weiter helfen können.

Besonderheiten

Was ist noch nicht erklärt habe, ist, wie man einen normalen Zeilenumbruch erzeugt. Da ein Zeilenumbruch an der Stelle, an der er anfängt auch schon wieder aufhört, macht das System mit dem Anfangs- und Endtag überhaupt keinen Sinn. Deshalb braucht man für einen Zeichenumbruch nur ein einziges Tag: <br />

Beispiel:

Sieht so aus:

Manchmal möchte ich einfach nur in eine neue Zeile wechseln
und nicht gleich in einen neuen Absatz.

In der Welt des Internets auch nicht gerade unwichtig sind Links. Hier ist die Sache etwas komplizierter, weil das Tag noch Attribute erhält:

<a ...></a> Markiert den Text als Link. Dabei ist das, was zwischen <a ...> und </a> steht, der Text, der tatsächlich angezeigt wird. In die Anführungsstriche von href="" gehört die Zieladresse, auf die verwiesen werden soll. Optional ist der target-Befehl. Wird er weggelassen, wird der Link statt der bereits geöffneten Seite im selben Tab oder Fenster geladen. Schreibt man jedoch target="_blank" hinzu, wird der Link in einen neuen Tab oder ein neues Fenster geladen.

Verschachtelung

Zum Abschluss sei noch angemerkt, dass die Tags durchaus verschachtelt werden dürfen. Aber eine Überschrift hat nichts in einem Absatz verloren. Wie oben an den Beispielen mit <b> und <br/> zu sehen ist, können aber alle anderen hier erwähnten Tags innerhalb eines Absatzes verwendet werden. Wichtig ist nur, dass zuerst das zuletzt genutzte Tag beendet wird.

Falsch:

Richtig:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.