1.6 Syntax
Wir haben ein erstes, grobes Grundgerüst für Webseiten erstellt. Sehen wir uns den HTML5 Code noch einmal schrittweise etwas genauer an. Der Fokus liegt jetzt auf dem Aufbau und der Anordnung der einzelnen Anweisungen im Quellcode.
<!DOCTYPE html>
<html lang="de">
|
| <head>
| |
| |
| Kopfbereich
| |
| |
| </head>
|
| <body>
| |
| |
| Rumpf
| |
| |
| </body>
|
</html>
1.6.1 Groß- und Kleinschreibung
In HTML5 wird nicht zwischen Groß- und Kleinschreibung unterschieden. Damit handelt es sich um eine Computersprache die nicht case sensitive ist! Sie könnten die HTML Elemente eben so gut in Großbuchstaben notieren. Wir einigen uns allerdings an dieser Stelle auf eine einheitliche Kleinschreibung, dies entspricht der allgemeinen Konvention!
1.6.2 Zeilenumbrüche und Texteinrückungen
Zur besseren Übersicht im Quelltext kann der Code mit Hilfe von Zeilenumbrüchen und Texteinrückungen strukturiert werden.
<!DOCTYPE html> <html lang="de"> <head>...</head> <body>...</body> </html>
<!DOCTYPE html> <html lang="de"> <head> ... </head> <body> ... </body> </html>
Für den Browser unterscheidet sich der Quelltext der beiden Listings nicht voneinander, allerdings sehen Sie bereits bei diesem einfachen Beispiel, dass sich die Lesbarkeit durch Zeilenumbrüche und Texteinrückungen deutlich verbessern lässt. Gewöhnen Sie sich also eine lesbare Schreibweise an!
1.6.3 White-Space
Der Freiraum zwischen den einzelnen Elementen, sowie der Freiraum zwischen den Tags und deren Inhalt wird als White-Space bezeichnet. Dieser kann aus Leerzeichen, Tabulatorzeichen und Zeilenumbrüchen bestehen. Mehrere aufeinander folgende White-Space-Zeichen werden vom Parser zu einem Leerzeichen zusammengefasst!
<!DOCTYPE html> <html lang="de"> <head> ... </head> <body> <p> Hier steht ein Text! </p> </body> </html>
Die Anweisungen werden nacheinander bearbeitet und dargestellt, egal wie viel Raum Sie zwischen den Elementen frei lassen.
Ebenso wird der freie Raum innerhalb der Elemente - hier innerhalb des <p> Elements - zu je einem
Leerzeichen zusammengefasst. Das obige Listing führt daher zu der Darstellung: Hier steht ein
Text!
Um bei der Darstellung im Browser "freien Raum" zu erhalten, müssen die entsprechenden CSS Eigenschaften genutzt werden.
1.6.4 Anweisungen
Den Aufbau der Elemente haben Sie bereits kennengelernt. An dieser Stelle sei aber noch folgendes erwähnt.
- Verschachtelung:
-
Die einzelnen Elemente können verschachtelt werden. Achten Sie darauf, dass Sie das zuletzt geöffnete Tag als erstes wieder schließen!
<tag_name01> Inhalt <tag_name02> Inhalt </tag_name02> </tag_name01>
Listing 1.6.5: Verschachtelung - Standalone Tag:
-
Einige Elemente besitzen gar keinen Inhalt. Diese sog. Standalone-Tags werden ohne schließendes Tag notiert.
<standalone_tag_name>
Listing 1.6.6: Standalone Tag - Standalone Attribute:
-
Es gibt auch Attribute ohne Wert, sog. Standalone Attribute.
<tag_name attribut>
Listing 1.6.7: Standalone Attribute
1.6.5 Über Tags
Sie haben gelernt, dass Tags in der Form <tag> ... </tag> und sog.
Standalone Tags in der Form <tag> notiert werden. Soweit so gut!
Aber: Nicht jedes Element, welches aus einem öffnenden und einem schließenden Tag besteht, benötigt theoretisch auch sein schließendes Tag. Der Parser des Browsers ist in der Lage, bei der Analyse des Quellcodes, die schließenden Tags an die entsprechende Stelle zu setzen. Allerdings gilt das nicht für alle Elemente!
Deshalb: Gewöhnen Sie sich an, bei allen Elementen, an der entsprechenden Stelle ein schließendes Tag zu setzen. Sie verlieren ansonsten den Überblick. Die Gefahr, dass Sie ein schließendes Tag bei einem Element vergessen, welches dieses aber zwingend benötigt, ist zu groß.
1.6.6 Beziehungen zwischen den Tags
HTML5 Elemente stehen in einer Beziehung zueinander. Um das zu verstehen, betrachten wir nochmals unser leicht verändertes Grundgerüst aus Listing 1.6.4.
<!DOCTYPE html> <html lang="de"> <head> ... </head> <body> <p> Hier steht ein Text! </p> </body> </html>
Das <html> Element umschließt alle folgenden Elemente und wird daher als Wurzelelement bezeichnet.
Direkte Nachkommen, also Kindelemente sind das <head> Element und das <body>
Element.
Betrachten wir jetzt das <body> Element. Auch dieses Element besitzt Nachkommen. Dabei handelt es sich um
das <p> Element. Aus der Sicht dieses Elementes, bildet das <body> Element wiederum das übergeordnete
Elternelement.
Die Beziehungen zwischen den Elementen sei an dieser Stelle nur kurz erwähnt. Später wird dieser Sachverhalt eine wichtige Rolle bei der Arbeit mit HTML5, CSS und JavaScript einnehmen!