Die Struktur von HTML

Vor der Verwendung von HTML ist es wichtig, dass man die Struktur von HTML versteht. Da HTML eine Auszeichnungssprache ist, zeichnet man einige Elemente des Inhalts gesondert aus - ähnlich wie mit einem Textmarker. Man markiert also gewisse Passagen um diese hervorzuheben.

HTML Elemente

HTML besteht aus einzelnen Elementen und eben diese Elemente benutzt man um seine Hervorhebungen zu machen. Es folgt ein Beispiel wie man zum Beispiel einen einfachen Textabschnitt hervorhebt und kennzeichnet.

<p>This paragraph is part of my content</p>

Was wir hier haben ist ein normaler Satz, nämlich "This paragraph is part of my content" der eingefasst wird in <p> und </p>. Das <p> und </p> bezeichnet man als Tags. Jedes einzelne Tag besteht aus einer öffnenden Klammer <p>, einer Abkürzung und einer schließenden Klammer </p>. In diesem Fall ist das "p" die Abkürzung für paragraph (also Absatz). Kombiniert bilden das <p> und das </p> ein Element. Jedes HTML Element beginnt mit einem öffnenden Tag (in diesem Fall <p>) und meistens auch aus einem schließenden Tag (wie hier das </p>). Zwischen dem öffnenden und schließenden Tag befindet sich dann der Inhalt. Dieser ist im Gegensatz zu einer richtigen Programmiersprache hier im Klartext lesbar.

Leere Elemente

Die meisten HTML Elemente sehen aus wie unser <p> </p> Element, aber manche sind ein wenig anders und werden als Leere Elemente bezeichnet. Das Zeilenumbruch Element ist zum Beispiel ein sogenanntes Leeres Element und sieht wie folgt aus:

<br />

Wie man eindeutig sehen kann gibt es hier kein schließendes Tag und das Element enthält auch keinen Inhalt. Und das ist auch der Grund warum man es als Leeres Element bezeichnet. Und da es ein leeres Element ist, wird es direkt am Ende des Tags abgeschlossen, dass ist dann mit dem / erfolgt. Man muss am Ende eines leeren Elements keinen "/" verwenden, aber es sieht generell besser aus und man kann sich daran gewöhnen. (Wie zuvor gesagt besteht ein Tag auch immer aus einer Abkürzung, in diesem Fall das br für break, was einen Zeilenumbruch bewirkt)

Tipp!

Wenn Browser ihr HTML5 Dokument durchgehen interessiert es sie nicht ob die Tags in Klein- oder Großbuchstaben geschrieben sind. Aber andere Entwickler schon! Auch wenn man das Zeilenumbruch Tag auf viele verschiedene Arten schreiben kann, wie im folgenden zu sehen:

<BR />
<bR />
<Br />
<br />

so gehört es doch irgendwie zum guten Ton, die Tags in Kleinbuchstaben zu schreiben. Das steigert die Lesbarkeit und es ist einfach eine gute Handwerkskunst sich daran zu halten und die Tags klein zu schreiben.

Was wir bisher gelernt haben

• Ein HTML Element beginnt mit einem öffnenden Tag
• Ein HTML Element schließt mit einem schließenden Tag
• Ein HTML Tag beginnt mit einem < und endet mit einem >
• Die Buchstaben zeichen dem < und > sind Abkürzungen
• Der Inhalt eines Elements ist alles zwischen dem öffnenden und dem schließenden Tag
• Manche HTML Elemente sind leer
• Leere Elemente werden bereits im öffnenden Tag geschlossen
• Macht es euch zur Angewohnheit alle Tags in Kleinbuchstaben zu verfassen - es hat sich bewährt