Jede Website besteht im Kern aus vielen HTML-Elementen, die den Quelltext bilden. Dieser wird von einem Browser interpretiert und auf dem Bildschirm ausgegeben. Damit der Browser das HTML korrekt interpretieren kann und deine Website in voller Pracht auf dem Bildschirm ausgibt, muss jedes HTML-Dokument einem grundlegenden Aufbau folgen. Dem HTML-Grundgerüst.
Was bei einer HTML5-Seite alles in das HTML-Grundgerüst gehört und was die einzelnen Elemente bedeuten, klären wir jetzt. Außerdem präsentiere ich dir am Ende des Beitrags 3 Ergänzung für das Grundgerüst, welche in der Praxis äußerst sinnvoll sind.
Das HTML-Grundgerüst einer HTML5-Seite
Bevor du die ersten Inhalte zu deiner Website hinzufügen kannst, muss das HTML-Grundgerüst erstellt werden. Diese Struktur ist notwendig, damit du valides HTML erzeugst, welches den Vorgaben des W3C entspricht.
Der grundlegende Aufbau eines HTML-Dokuments besteht aus dem Dokumententyp und den folgenden 4 HTML-Elementen:
- <html>
- <head>
- <title>
- <body>
Korrekt notiert sieht das HTML-Grundgerüst dann wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Das ist alles. Mehr brauchst du nicht, um eine valide HTML5-Seite initial zu erstellen. Wenn du deine Website später produktiv einsetzen möchtest, solltest du aber lieber mein HTML-Grundgerüst verwenden, welches ich um 3 sinnvolle HTML-Elemente ergänzt habe.
Bevor du dir jetzt aber meine Kopiervorlage schnappst und um deine eigenen Inhalte ergänzt, müssen wir uns noch schnell die einzelnen Elemente des HTML-Grundgerüsts im Detail anschauen.
Die Elemente des HTML-Grundgerüsts im Detail
Insgesamt besteht das HTML-Grundgerüst aus 5 Elementen. Wofür diese stehen und was sie bewirken, dass schauen wir uns jetzt an.
Der DOCTYPE
Jedes HTML-Dokument sollte mit der Deklaration des Dokumententyps beginnen. Anhand dieser Deklaration weiß der Browser, welche HTML-Version dein Dokument nutzt und wie er dieses verarbeiten soll. Deshalb findest du am Anfang einer jeden HTML-Seite den DOCTYPE.
Der DOCTYPE sieht für jede HTML-Version etwas anders aus. Früher habe ich meine HTML-Seiten z.B. in XHTML geschrieben und musste folgenden DOCTYPE verwenden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ein solcher DOCTYPE bleibt nicht besonders gut im Gedächtnis und die Dokumententypen der anderen Version sahen früher ähnlich lang aus. Zum Glück benutzen wir heute aber hauptsächlich nur noch HTML5 und bei dieser Version sieht der DOCTYPE wie folgt aus:
<!DOCTYPE html>
Seitdem HTML5 zum Standard geworden ist, haben die anderen Dokumententypen ihre Bedeutung verloren und sind mehr oder weniger in Vergessenheit geraten. Möchtest du dir die älteren Dokumententypen anschauen, kannst du dies gerne auf der Seite des W3C’s tun.
Das <html>-Element
Nachdem du den Dokumententyp mit der Hilfe des DOCTYPES deklariert hast, wird es Zeit für das all umschließende HTML-Element. Bis auf den DOCTYPE werden nämlich alle Elemente einer Website innerhalb des <html>-Tags aufgelistet und es kann somit zu Recht als das Wurzelelement bezeichnet werden.
Neben der Funktion als all umschließender Container bietet dir der <html>-Tag auch die Möglichkeit, die Standardsprache des Dokuments mithilfe des lang-Attributs festzulegen. Dies ist besonders wichtig für Nutzer von Text-to-Speech-Systemen, Übersetzungstools und auch für Suchmaschinen wie Google nutzen die Sprachangabe als mögliches Filterkriterium.
Das folgende Beispiel zeigt die Struktur des Hauptcontainers. Die Dokumentensprache ist auf Deutsch eingestellt. Sind die Inhalte deiner Website in englischer Sprache verfasst, tauschst du das „de“ einfach gegen ein „en“ aus.
<html lang=“de“>
<!-- Weitere Elemente des HTML-Dokuments -->
</html>
Der Inhalt des <html>-Elements wird in zwei Teile unterteilt: einmal den Kopfbereich und das Body-Element.
Der Kopfbereich
Der Kopfbereich ist das erste Element innerhalb des <html>-Tags und gehört zu den Pflicht-Elementen eines HTML-Dokuments. Es enthält überwiegend Meta-Informationen zum Inhalt der jeweiligen HTML-Seite und kann aus den folgenden HTML-Elementen bestehen:
- Dokumententitel (<title>)
Der Dokumententitel ist der Titel des HTML-Dokuments und bietet eine gute Möglichkeit, das behandelte Thema kurz zu beschreiben. Wie der DOCTYPE, das <html>-Tag, der Kopfbereich oder auch das Body-Element, gehört der Dokumententitel zu den Pflicht-Elementen eines HTML-Grundgerüsts. Da der Titel u.a. in den Suchergebnissen von Google erscheint, sollte er aussagekräftig sein und nicht auf mehreren Seiten verwendet werden. - Stylesheet-Deklaration (<style>)
Die Stylesheet-Deklarationen innerhalb des Kopfbereichs eines HTML-Dokuments werden mit dem <style>-Tag definiert. Sie werden zur Festlegung der Stilinformationen von HTML-Elementen verwendet und gelten für das gesamte HTML-Dokument. - Das Skript-Tag (<script>)
Innerhalb des <script>-Elements können Anweisungen bestimmter Skriptsprachen in das HTML-Dokument eingebunden werden. Heutzutage werden hauptsächlich JavaScript-Anweisungen innerhalb des Skript-Tags deklariert oder es wird zur Einbindung externer JavaScript-Dateien genutzt. - Metadaten (<meta>)
Das <meta>-Tag enthält die Metadaten eines HTML-Dokuments. Es definiert benutzerdefinierte Attribute und Werte, die überwiegend der besseren Indexierung deiner Website durch Suchmaschinen dienen. - Verwandte Informationen (<link>)
Das <link>-Tag verweist auf Ressourcen, die in irgendeiner Weise mit dem aktuellen HTML-Dokument in Verbindung stehen. Es wird häufig dazu genutzt, externe Stylesheets oder Favicons in eine Webseite einzubinden. - Das <base>-Tag
Mit der Hilfe des <base>-Elements kannst du eine Adressbasis für referenzierte Dateien definieren.
Das folgende Beispiel zeigt einen typischen Kopfbereich eines HTML-Dokuments:
<head>
<title>Klickfieber - Erstelle deine eigene erfolgreiche Website</title>
<meta name="description" content="Mit der Hilfe von Kursen, Videos, Tools und Artikeln zeige ich dir, wie du deine eigene erfolgreiche Website erstellen und optimieren kannst.">
<meta name="keywords" content="Website erstellen, eigene Website, erfolgreiche Website">
<meta name="author" content="Enrico Lauterschlag">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="default.css">
<script src="jquery.min.js"></script>
</head>
Das Body-Element
Der Body ist der Container für die sichtbaren Inhalte deiner HTML-Seite und steht immer an zweiter Stelle des <html>-Tags. Hier deklarierst du Inhalte wie Überschriften, Absätze, Bilder, Verlinkungen oder Tabellen.
Ursprünglich gab es einige Attribute, die das Layout des Body-Elements beeinflussten. Zum Beispiel konntest du mit dem Attribut bgcolor="red" einen roten Hintergrund für den Bereich definieren. Diese sogenannten inline-Attribute des <body>-Tags sind aber mittlerweile veraltet und werden durch entsprechende Anweisungen im Stylesheet ersetzt.
3 sinnvolle Ergänzungen zum HTML-Grundgerüst
Soll deine Website später öffentlich im Internet aufrufbar sein, empfehle ich dir das HTML-Grundgerüst um 3 Elemente/Attribute zu ergänzen.
- Definition der verwendeten Sprache
- Definition des verwendeten Zeichensatzes
- Einstellungen für den Viewport
Das HTML-Grundgerüst würde dann wie folgt aussehen:
<!DOCTYPE html>
<html lang="de">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Inhalt des HTML-Dokuments -->
</body>
</html>
→ Hier kannst du mit dem Code herumspielen
Doch was bewirken die 3 Ergänzungen überhaupt und wofür sind sie gut?
Definition der verwendeten Sprache
Wie bereits im Abschnitt zum <html>-Element geschrieben, kann mit der Hilfe des lang-Attributes die verwendete Sprache des HTML-Dokuments definiert werden. Ist deine Website z.B. auf Deutsch, schreibst du einfach lang="de" als Attribut für das <html>-Element.
Definition des verwendeten Zeichensatzes
In der Informatik gibt es viele verschiedene Zeichensätze, die den nutzbaren Zeichenvorrat definieren. HTML-Dokumente nutzen standardmäßig die Zeichencodierung Unicode. Dieser Zeichensatz kennt aber keine Umlaute. Deutsche Webseiten müssen deshalb die utf-8 als Zeichencodierung verwenden.
Im Kopfbereich des HTML-Dokuments wird die Verwendung von utf-8 wie folgt definiert:
<meta charset=“utf-8“>
Einstellungen für den Viewport
Im Viewport des Browsers werden die Inhalte deiner Website dargestellt. Ist eine Website nicht für mobile Endgeräte optimiert und die Inhalte sind größer als der Viewport, werden diese stark verkleinert im Browser angezeigt.
Möchtest du dieses Verhalten des Browsers ändern, kannst du mit der folgenden Angabe dafür sorgen, dass deine Seite an den Viewport angepasst wird und ein Skalieren weiterhin möglich ist.
<meta name="viewport" content="width=device-width, initial-scale=1">
Zusammenfassung
Eine valide HTML5-Seite muss einem grundlegenden Aufbau folgen, damit sie den Vorgaben des W3C’s entspricht. Dieser grundlegende Aufbau wird auch HTML-Grundgerüst genannt. Er besteht aus dem DOCTYPE und den 4 HTML-Elementen <html>, <head>, <title> und <body>.
Soll eine Website später öffentlich über das Internet aufrufbar sein, ist es sinnvoll, das HTML-Grundgerüst um 3 Attribute/Anweisungen zu ergänzen. Diese definieren die verwendete Sprache, setzen den zu verwendeten Zeichensatz und nehmen Einstellungen für den Viewport des Browsers vor.
Hinterlasse einen Kommentar