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 steht für „Hyper Text Markup Language“. Das bedeutet kurz gesagt: HTML ist keine Programmiersprache, sondern eine Sprache zur Auszeichnung von Text mit Tags. Und das ist ganz einfach, wenn man einmal das System verstanden hat. In diesem Artikel erkläre ich, welche Begriffe man kennen sollte und wie die Grundkonzepte funktionieren.
Was ist ein Tag?
HTML basiert 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. <tag> bedeutet, dass ein Tag beginnt und das gleiche mit einem Schrägstrich </tag> sagt, wo dieses Element zuende ist.
Zwischen dem öffnenden oder schließenden Tag befindet sich entweder Text oder möglicherweise weitere Tags (Stichwort: Verschachtelung).
Welche HTML-Tags gibt es?
Mit HTML kann man unterschiedliche Bereiche einer Seite beeinflussen. Daher kann man hier zwischen folgenden Themenbereichen unterscheiden:
- HTML zur Textauszeichnung
Textauszeichnung bedeutet, dass man alle sichtbaren Elemente kennzeichnet: Überschriften, Absätze, Zeilenumbrüche, Formatierungen wie fett, kursiv und unterstrichen, Listen, Links, Zitate uvm.
Weiterlesen: HTML zur Textauszeichnung - HTML zum Seitenaufbau
Zum Aufbau eines Layouts gibt es noch einige weitere Tags, die nicht direkt sichtbar sind. Beispielsweise ist es möglich, der Seite Informationen über den Inhalt mitzugeben, die Struktur der Seite zu bestimmen, Stylesheets für Farbgestaltung und Design sowie Scripts für zusätzliche Funktionalität der Seite einzufügen.
Wie kann ich HTML-Tags verschachteln?
Das wichtigste beim Schreiben von HTML ist eigentlich eine gute Formatierung: Der Code muss ordentlich eingerückt werden, denn dann ist das Verschachteln gar nicht so schwierig.
Die Regel lautet: alle Tags müssen in umgekehrter Reihenfolge geschlossen werden, in der sie geöffnet wurden.
Beispiel
<p><a href="https://susanne-lueders.de">Link</a></p>
Der Link befindet sich im Absatz. Daher muss zuerst der Link durch geschlossen werden und dann erst der Absatz.
Was sind Attribute?
Im Beispiel mit dem Link <a href="https://susanne-lueders.de">Link</a> kommt etwas ins Spiel, das ich bislang noch nicht erklärt habe. Im a-Tag hängt noch ein weiterer Wert, nämlich href="https://susanne-lueders.de". Solche „Anhängsel“ nennt man Attribut. Es gibt sie in unterschiedlichster Form. Sinn und Zweck von Attributen ist, einem Tag weitere Informationen mitzugeben. Im Falle des Links ist die weitere Information der Ziel des Links.
