Aufbau und Strukturierung eines HTML Dokuments
Im letzten Kapitel dieses HTML5 und CSS3 Tutorials haben wir uns bereits einen groben Überblick über den Aufbau eines HTML Dokuments verschafft. Jetzt sehen wir uns ein einfaches HTML Grundgerüst einmal an, auf das wir dann weiter aufbauen können.
Wie wir in dem vorangegangenen Beispiel sehen können unterteilt sich das HTML-Dokument in drei Bereiche:
- <!DOCTYPE> - Der HTML-Dokumententyp gibt die verwendete HTML Version an.
- <head> - Der Kopfbereich enthält für gewöhnlich die nicht im Webbrowser darstellbaren Informationen zum Dokument
- <body> - Der Dokumentkörper enthält den darzustellenden Inhalt für den Webbrowser
<!DOCTYPE> die HTML5 Dokumententyp-Deklaration
Die DOCTYPE-Deklaration ist immer die erste Angabe in einem HTML-Dokument und befindet sich somit noch vor dem öffnenden <html>-Tag. Bei der Dokumententyp-Deklaration handelt es sich nicht um ein HTML-Element, vielmehr ist es als Anweisung für den Webbrowser zusehen, in welcher HTML-Version das HTML-Dokument vorliegt bzw. erstellt wurde.
Bei älteren HTML-Versionen war der DOCTYPE noch wesentlich umfangreicher als bei HTML5, da zusätzlich noch eine Dokumententyp-Definition hinterlegt werden musste. Die <!DOCTYPE> Deklaration wird von den Webbrowsern verarbeitet die diese Zeile benötigen. <!DOCTYPE html> wird von allen Webbrowsern verstanden, auch jenen die HTML5 gar nicht beherrschen. Aus diesem Grund ist diese Zeile nur noch vorhanden um eine Abwärtskompatibilität mit älteren Browsern sicher zu stellen. Die DOCTYPE ist nicht case-sensitiv, das bedeutet, dass es egal ist ob Du diese in Groß- oder Kleinbuchstaben schreibst.
<html> </html> Element – Der Beginn und das Ende unseres HTML5 Dokuments
Das <html></html>-Element nennt man Wurzelelement (eng. root element) auf manchen Websites und Bücher auch Stammelement genannt. Dieses Element umschließt alle anderen HTML-Elemente in unserem HTML Dokument. Direkt nach der DOCTYPE findet man das öffnende <html>-Tag und ganz am Ende des HTML-Dokuments das schließende </html>-Tag. Dazwischen findet man den <head> und den <body> mit dessen Inhalt. Das <html>-Element besitzt immer zwei, und nur zwei, Kindelemente, eben das <body>- und das <head>-Element. In meinem html-Beispiel von oben haben wir auch gleich ein Attribut dem öffnenden <html>-Tag hinzugefügt. Das Attribut „lang“ mit dem Attribut-Wert „de“ informiert zum Beispiel Suchmaschinen und Screen Reader über die Sprache unserer Website damit diese besser eingeschätzt bzw. vorgelesen werden kann.
lang=“de“ – Attribut für die verwendete Sprache in HTML5
Das lang-Attribut in HTML5 ist ein globales Attribut, das bedeutet, dass es in jedem HTML-Element zur Verwendung kommen kann. So könnte eine Website, welche in Deutsch gehalten ist, ein Zitat in einer anderen Sprache beinhalten, und dennoch hätten Suchmaschinen und Screen Reader keine Probleme beim Zuordnen bzw. beim Vorlesen des Inhaltes. Neben dem von uns verwendeten primären Sprachcode kann man noch einen weiteren Subcode mit angeben um die Sprache noch weiter zu definieren.
Beispiele für erweiterte Sprach-Attribute:
de-CH – Schweizerdeutsch
de-AT – österreichisches Deutsch
en-GB – britisches Englisch
en-US – amerikanisches Englisch
en-CA – kanadisches Englisch
<head> der Kopf unseres HTML-Dokuments
Im Kopfbereich unseres HTML-Dokuments werden unterschiedliche Informationen hinterlegt, die bis auf eine Ausnahme, keine Anzeige in einem Webbrowser finden. Die Ausnahme von der ich gesprochen habe ist das <title></title> Element welches den darin hinterlegten Inhalt im Tab unseres Webbrowsers anzeigt. Der Kopfbereich unseres HTML-Dokuments liegt innerhalb des <head></head>-Elements.
Die Meta Charset Angaben im <head> unseres HTML-Dokuments
Über das <meta charset=“utf-8“> definieren wir den zu verwendenden Zeichensatz (utf-8) um unsere Webseite zu rendern. Nicht jeder Zeichensatz verfügt über die in der deutschen Sprache nötigen Zeichen. Unter anderem finden wir zum Beispiel in einem Zeichensatz für die englische Sprache keine Umlaute, und somit würden diese falsch angezeigt wenn wir hier den falschen Zeichensatz definieren würden.
Die <title> Angaben im <head> unseres HTML-Dokuments
Über das <title></title>-Element können wir einen Titel für unsere Webseite definieren der dann im Webbrowser-Tab angezeigt wird. Dieser Titel wird nicht nur verwendet damit der Tab im Webbrowser den Namen der Seite trägt sondern dient auch den Suchmaschinen als anklickbarer Titel in den Suchergebnissen. Des Weiteren dient der Titel als Namensvorschlag wenn ein Besucher die Seite in seinen Bookmarks speichern möchte.
Das <link> Element im <head> unseres HTML-Dokuments
Über das <link>-Element referenzieren wir in diesem Fall eine CSS Datei die die CSS-Anweisungen für unsere Webseite beinhaltet. Sehen wir uns die Attribute von diesem <link> Element einmal genauer an:
- rel – Relation, gibt an in welchem Verhältnis die referenzierte Datei zu unserem HTML-Dokument steht. In unserem Fall handelt es sich um ein „stylesheet“
- type - damit geben wir den MIME-Typ des zu verlinkenden Dokuments an. In unserem Fall handelt es sich um eine Textdatei und um genauer zu sein um eine CSS-Datei.
- href – hier geben wir die URL/Pfad zur verknüpften Ressource an. In unserem Beispiel liegt die referenzierte CSS-Datei im gleichen Ordner wie unser HTML-Dokument.
<body> der Körper unseres HTML-Dokuments
Beim <body></body>-Element sprechen wir vom sichtbaren Bereich unseres HTML-Dokuments. Alles was zwischen dem öffnenden <body> Tag und dem schließenden </body> Tag steht wird im Webbrowser-Fenster dargestellt. Wie wir nun den Body unseres HTML-Dokuments strukturieren und den dann darin enthaltenen Text formatieren können, erfährst Du im nächsten Abschnitt meines HTML5 und CSS3 Tutorials für Einsteiger
Klicke hier um das Video zu laden!