HTML-Dokumente bestehen aus Elementen, die durch die sogenannten Tags gekennzeichnet sind. Tags erkennt ihr an spitzen Klammern. Dabei sind fast alle HTML-Elemente durch ein einleitendes und abschließendes Tag gekennzeichnet. Das, was sich dazwischen befindet, nennt sich Gültigkeitsbereich.
Ein Beispiel:
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
Durch diese Syntax wird eine Überschrift der ersten Ordnung ins Dokument geschrieben. Das einleitende <h1>-Tag teilt dem Browser mit, dass es sich eben um eine solche Überschrift handelt. Das abschließende </h1> beendet die Überschrift. Ihr erkennt abschließende Tags an einer öffnenden spitzen Klammer, gefolgt von einem Schrägstrich </.
Eine Frage taucht hinsichtlich der Schreibweise der Elementnamen auf: Wie sieht es eigentlich mit Groß- und Kleinschreibung aus? Wie bereits beschrieben, liegt der Fokus in dieser Reihe auf HTML5. Hier könnt ihr tatsächlich zwischen Groß- und Kleinschreibung wählen. Persönlich favorisiere ich allerdings eine konsequente Kleinschreibung und werde das auch in dieser Reihe so handhaben. Prinzipiell wären nach HTML5 aber die folgenden Dinge korrekt:
<h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1> <H1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1> <h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</H1>
Elemente, die man öffnet, müssen auch wieder geschlossen werden. Wenn ihr also ein <h1> setzt, müsst ihr es nach dem Ende der Überschriftendefinition auch wieder schließen </h1>. Zwar gibt es in HTML5 hier auch Ausnahmen wie beispielsweise Listeneinträge und Absätze, dazu dann aber später mehr.
In HTML gibt es übrigens auch sogenannte Standalone-Tags. Diese bestehen nur aus einem Tag, nicht aus Anfangs- und End-Tag. Ein typisches Beispiel dafür ist <br />.
Das ist eine Zeile.<br /> Das ist eine andere Zeile.
Dieses <br /> definiert einen Zeilenumbruch.
Solche leeren Tags schließt man üblicherweise mittels Schrägstrich, auch wenn das in HTML5 nicht zwingend nötig ist. Hier würde auch Folgendes gehen:
<br>
Ihr werdet im Laufe dieser Reihe noch weitere dieser Standalone-Tags kennenlernen.
Elemente verschachteln
HTML-Elemente lassen sich übrigens auch verschachteln. Stellt euch vor, ihr wollt innerhalb einer Überschrift eine Passage kursiv gestalten. Für eine kursive Darstellung wird das i-Element verwendet.
<h1>PSD-Tutorials.de – <i>dein Grafik-, Web- & Lernportal</i></h1>
Achtet bei der Verschachtelung auf die richtige Reihenfolge. Man schließt als letztes das Element, das zuerst geöffnet wurde. Im vorliegenden Fall ist das also das h1-Element.
Attribute verwenden
Innerhalb öffnender Tags oder Standalone-Tags lassen sich sogenannte Attribute definieren. Diese Attribute können Elementen zusätzliche Eigenschaften zuweisen. In früheren HTML-Zeiten hat man den Elementen vergleichsweise viele Attribute zugewiesen. Das lag schlicht und ergreifend an der Vermischung zwischen Struktur und Design. So hat man beispielsweise Farbdefinitionen direkt dem HTML-Element über ein entsprechendes Attribut übergeben. Mittlerweile ist – natürlich auch dank CSS – eine strikte Trennung von Design und Struktur möglich, die auch eingehalten werden sollte. Daher gibt es nur noch vergleichsweise wenige Attribute, die eingesetzt werden.
Ein wichtiges Attribut ist id. Über dieses Attribut lässt sich einem HTML-Element ein eindeutiger Name zuweisen, über den es sich dann beispielsweise per CSS oder JavaScript ansprechen lässt.
<h1 id="head">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
Um ein Attribut zuzuweisen, fügt man hinter dem h1 ein Leerzeichen ein. Daran schließt sich der Name des Attributs an, der üblicherweise kleingeschrieben wird. Hinter dem Attributnamen folgt das Gleichheitszeichen. In Anführungszeichen gesetzt schließt sich der Attributwert an.
Man kann einem Element übrigens auch mehrere Attribute zuweisen. So ist es beispielsweise durchaus üblich, für ein Element eine sogenannte Klasse und eine ID zu definieren. Auch dazu ein Beispiel: Über id wird die Überschrift eindeutig identifiziert. Die Klasse ist hingegen dafür da, die Überschrift in eine bestimmte Kategorie einzuordnen. So kann man bestimmen, dass alle Elemente, denen die Klasse blue zugewiesen wird, in blauer Farbe angezeigt werden. (Mehr zu dieser CSS- und Farbenthematik dann natürlich später ausführlich).
<h1 id="head" class="blue">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
Die Attribute werden in diesem Fall durch ein Leerzeichen voneinander getrennt.
Den Code validieren
Einige grundlegende Syntaxregeln habt ihr nun bereits kennengelernt. Gerade am Anfang, wenn man HTML lernt, ist es wichtig, sich an diese Regeln zu halten. Was man sich nämlich einmal falsch angewöhnt hat, kriegt man nur schwer wieder aus dem Kopf. Ihr solltet daher euren HTML-Code immer auf Richtigkeit überprüfen bzw. validieren (lassen). Das müsst ihr natürlich nicht selbst machen. Hierfür gibt es entsprechende Online-Tools. Einen sogenannten Validator findet ihr beispielsweise unter http://validator.w3.org/.
Am besten wechselt ihr dort direkt in das Register Validate by direct Input. Hier kann man den zu überprüfenden HTML-Code direkt per Copy & Paste einfügen. Achtet unbedingt darauf, den kompletten Code der Datei einzufügen, also auch die DOCTYPE-Angabe.
Fügt, um den Validator zu testen, Folgendes in das Textfeld ein und klickt anschließend auf die Validate-Schaltfläche.
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1> </body> </html>
Das Ergebnis sollte folgendermaßen aussehen:
Hier ist alles in Ordnung. (An den zwei Warnungen müsst ihr euch in diesem Fall nicht stören). Erscheint also die Meldung This document was successfully checked as HTML5!, ist tatsächlich alles in Ordnung. Wie stellt sich das Ganze aber im Fehlerfall dar? Dazu könnt ihr einfach mal absichtlich einen Fehler in die Syntax einbauen.
<h1 id=head">PSD-Tutorials.de – dein Grafik-, Web- & Lernportal</h1>
Hier wurde das einleitende Anführungszeichen bei head vergessen. Lässt man die Syntax jetzt noch einmal validieren, wird der Fehler erkannt.
Der Validator gibt daraufhin eine entsprechende Meldung aus. Was genau schiefgelaufen ist, kann man im unteren Fensterbereich ablesen.
Hier ist dann auch sehr schön beschrieben, was eigentlich der Fehler ist.
Line 8, Column 12: " in an unquoted attribute value. Probable causes: Attributes running together or a URL query string in an unquoted attribute value.
<h1 id=head" >PSD-Tutorials.de</h1>
Ihr seht also direkt, in welcher Zeile eine fehlerhafte Eingabe erfolgte, und könnt diese korrigieren. Somit hilft euch der Validator also dabei, sauberen HTML-Code zu erstellen. Ihr solltet euren Code immer validieren lassen. Denn die Browser zeigen HTML-Code oftmals korrekt an, obwohl die Syntax fehlerhaft ist. In anderen Browsern, in denen ihr eure Seiten aber nicht testet, kann das hingegen ganz anders aussehen.
