1.5 HTML5 Grundgerüst
Das Grundgerüst eines HTML5 Dokuments hat die folgende Struktur. Auf den ersten Blick erkennen Sie vier Bereiche, die mit Hilfe von Elementen markiert sind. Die Doctype - Definition, den HTML-, den Head- und den Bodybereich. Lassen Sie uns in den nächsten Abschnitten diese Bereiche genauer betrachten.
<!DOCTYPE html>
<html lang="de">
|
| <head>
| |
| |
| Kopfbereich
| |
| |
| </head>
|
| <body>
| |
| |
| Rumpf
| |
| |
| </body>
|
</html>
1.5.1 Die Doctype - Definition
In der ersten Zeile, noch vor dem allumfassenden <html> Block, wird die
Doctype - Definition notiert.
<!DOCTYPE html>
Anhand der DTD (Doctype Definition) können Browser und andere Parser erkennen, um welchen Typ von Dokument es sich handelt und so die zu verwendende Grammatik und Syntax bestimmen. Die Angabe stellt sicher, dass der Browser den richtigen Modus zum Rendern der Dokumente nutzt.
In der Vergangenheit wurden die DTDs aufgrund der verschiedenen Versionen und weiteren Konventionen immer komplexer. Dies änderte sich mit der Einführung von HTML5 grundlegend. HTML5 wird ständig weiterentwickelt, eine neue Versionsnummer wird es nicht mehr geben.
1.5.2 Das <html> Element
Es folgt der allumfassende <html> Block. Zwischen diesen beiden Tags
befindet sich der gesamte HTML5 Quellcode.
<html lang="de">
|
|
|
|
|
|
</html>
In der zweiten Zeile wird also das öffnende <html> Tag, in der letzten
Zeile das schließende </html> Tag notiert. Dem öffnenden Tag sollte unbedingt
das Attribut lang mit dem Wert der verwendeten Sprache
(hier: "de" für "deutsch") zugewiesen werden. So können
Suchmaschinen und Screenreader erkennen, in welcher Landessprache der Inhalt
des Dokuments geschrieben ist.
Ausführliche Beschreibung: Übersicht der Elemente - <html>
1.5.3 Kopfbereich <head>
Jedes Dokument verfügt über einen eigenen Kopfbereich. Dieser wird nach dem öffnenden <html>
Tag notiert. Zur Markierung dient das <head> Element.
<head> | | | Kopfbereich | | | </head>
Ausführliche Beschreibung: Übersicht der Elemente - <head>
Im Kopfbereich stehen Informationen über das Dokument. Diese Informationen dienen dem Browser und werden nicht zur Ansicht gebracht!
<head> <meta name="..." content="..."> <title>...</title> <link ... > </head>
- <meta>
-
Die Meta Tags sind zur Übergabe von Informationen an den Browser bzw. zum Notieren von Informationen über die Seite oder den Autoren gedacht. Beachten Sie, dass es sich hierbei um sog. Standalone Tags handelt. Es existiert kein schließendes
</meta>Tag!Der Aufbau der verschiedenen Meta Tags ist (mit einigen Ausnahmen) identisch. Dem Tag folgen zwei Attribute mit fester Wertzuweisung. Zuerst wird das gewünschte Meta Tag durch
name="..."notiert. Mit Hilfe voncontent="..."wird diesem Tag die gewünschte Option mitgegeben.<meta name="..." content="...">
Listing 1.5.6: Meta Tag Ausführliche Beschreibung: Übersicht der Elemente - <meta>
- <title>
-
Jedes Dokument sollte einen Titel besitzen! Der Titel wird zum Beispiel von Suchmaschinen genutzt, wird in der Browserleiste als Name der Seite angezeigt, wird im Verlauf gespeichert oder wird als Name eines Lesezeichens verwendet.
Pro Dokument darf nur ein
<title>Element angegeben werden. HTML Markierungen dürfen innerhalb dieses Elements nicht notiert werden.<title>...</title>Listing 1.5.7: <title> Element Ausführliche Beschreibung: Übersicht der Elemente - <title>
- <link>
-
Das
<link>Element dient zum Einbinden von externen Dateien (CSS / Skripte) bzw. zur Angabe der logischen Beziehungen von verschiedenen Dokumenten untereinander. Beachten Sie, dass es sich hierbei um sog. Standalone Tags handelt. Es existiert kein schließendes</link>Tag!<link href="...">Listing 1.5.8: <link> Element Ausführliche Beschreibung: Übersicht der Elemente - <link>
1.5.4 Rumpf <body>
Der Bodybereich ist der sichtbare Bereich einer HTML Seite. Hier werden die
Elemente notiert, die zur Ausgabe von Texten, Bildern u.ä. im
Browser führen. Zur Markierung dient das <body> Element.
<body> | | | Rumpf | | | </body>
Für den Bodybereich stehen Ihnen zahlreiche HTML5 Elemente zur Verfügung. Diese Elemente können, unter Beachtung von bestimmten Regeln, miteinander verschachtelt werden. Die ersten Elemente lernen Sie in Kapitel 1.8 Erste HTML5 Webseite kennen.
Ausführliche Beschreibung: Übersicht der Elemente - <body>