HTML Grundlagen, die du beherrschen solltest

In diesem Kapitel des Kurses möchte ich dir die HTML Grundlagen verinnerlichen. Ich erwarte von dir nicht, dass du die Grundlagen auswendig lernst. Im Notfall kannst du jederzeit hier wieder vorbeischauen. Immerhin habe ich dafür das HTML Tutorial geschrieben.

Um dir die HTML Grundlagen näher zu bringen, gehe ich auf die Syntax der HTML Befehle ein. Nachdem du den Aufbau der HTML Befehle verinnerlichst hast, erkläre ich dir die Verschachtelung von HTML Tags und zeige dir, was es dabei zu beachten gibt. Zum Abschluss gehe ich auf die Attribute eines HTML Tags ein.

Der Aufbau eines HTML Befehls

Jede Programmiersprache verfolgt eine Reihenfolge an Zeichensätzen. Diese Zusammensetzung nennt man dann einen HTML Befehl / HTML Tag. So ist es auch in HTML. HTML ist allerdings keine Programmiersprache im eigentlichen Sinne. Viel mehr ist HTML eine Auszeichnungssprache. In HTML wird unterschieden zwischen öffnenden und schließenden Tags. Es gibt aber auch Tags ohne Inhalt, den sogenannten VOID-Tags. Die VOID-Tags werden noch im öffnenden Tag wieder geschlossen. Klingt erstmal kompliziert, aber sobald man sie einmal gesehen hat, sieht das Ganze wieder anders aus 🙂

Öffnende und schließende HTML Tags

Jeder öffnende HTML Tag beginnt mit einem <. Anschließend folgt der HTML Befehl und >. Zusammengefasst bezeichne ich dies als ein HTML Tag, dazwischen steht der HTML Befehl. Hier ein paar Beispiele von öffnenden Tags:

Zu jedem HTML Tag, der geöffnet wird gehört ein schließendes HTML Tag. Vom Aufbau unterscheidet sich der schließende HTML Tag nur geringfügig. Der schließende HTML Tag beginnt mit den Zeichen . Für schließende HTML Tags hier ein paar Beispiele:

Zwischen dem öffnenden und dem schließenden HTML Tag wird der Inhalt rein geschrieben, der nachher auf der Website sichtbar ist. Solltest du vergessen, einen öffnenden HTML Tag wieder zu schließen kann es passieren, dass dir unerwünschte Ergebnisse angezeigt werden. Heutige Browser erkennen sowas meist und versuchen damit umzugehen, allerdings gelingt dies nicht immer.

Kommentare in HTML

Jetzt wo wir wissen, wie man HTML Tags öffnet und schließt, können wir uns den HTML Kommentaren widmen. HTML Kommentare werden auf der Website nicht angezeigt und sind für den Benutzer somit nicht sichtbar. Sie können nur gelesen werden, wenn man in den Quellcode reingucken würde. Um ein Kommentar in HTML zu definieren, gibst du folgendes in deinen Editor ein:

Verschachtelung von HTML Tags

Man kann, nachdem man ein HTML Tag geöffnet hat, weitere HTML Tags reinschreiben, die sich ebenfalls öffnen und schließen lassen. Diesen Prozess nennt man dann Verschachtelung von HTML Tags. Und ich bin mir zu 100% sicher, dass du nicht drum herum kommen wirst, dass selbe zu tun. Genau deshalb führe ich dies in den HTML Grundlagen auf (ehrlich gesagt kenne ich aber auch keinen anderen Weg eine komplette Website mit HTML zu erstellen, ohne die Befehle zu verschachteln).

Bei der Verschachtelung von HTML Tags ist es wichtig, dass die Reihenfolge der öffnenden und schließenden Tags eingehalten wird. Klingt kompliziert? Kein Problem, hierfür mal ein kleines Beispiel:

HTML Tags ohne Inhalt (VOID-Tags)

In HTML gibt es neben den öffnenden und schließenden HTML Tags noch eine Art. Die dritte und somit letzte Art nennt sich Void-Tag. Das bedeutet nichts anderes als ein Element, wo kein Inhalt dazwischen steht. Geöffnet wird dieser Tag auch wieder mit einem <. Anschließend folgt der Befehl und />. Einen schließenden Tag gibt es nicht. Zur Verdeutlichung habe ich hier einige Beispiele von Void-Tags: