HTML5 Grundgerüst: Aufbau einer HTML-Seite (Dokumentstruktur mit Beispiel)
So ist der Aufbau einer HTML5-Seite: Der grundsätzliche Aufbau und die Dokumentstruktur von HTML erklärt. Ein beispielhaftes und typisches HTML5-Grundgerüst zum Lernen oder zum Verwenden als Vorlage für eigene Seiten.
Der Grundaufbau einer HTML5-Seite ist im Grunde genommen bei allen Seiten gleich. Zu den wichtigsten Bereichen von HTML findet man hier Erklärungen. Hier kommt zunächst der Aufbau und die Struktur einer typischen HTML5-Seite:
Aufbau in Form eines HTML5-Grundgerüstes
Dieses Grundgerüst in HTML5 zeigt die wichtigsten Bereiche. Das Beispiel zeigt die typischen Bestandteile einer Seite. Der Grundaufbau dient zum Lernen und kann als Vorlage für eigene Seiten dienen:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<title>Beispielseite</title>
<meta name="description" content="Beschreibungstext">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- header -->
<header>
Kopfbereich
</header>
<!-- navigation -->
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<!-- article -->
<article>
<h1>Überschrift</h1>
<p>Lorem ipsum dolor sit amet, consetetur elitr sadipscing.</p>
</article>
<!-- aside -->
<aside>
Seitenleiste
</aside>
<!-- footer -->
<footer>
Fußzeile
</footer>
</body>
</html>
Aufbau HTML5 Seite im Detail
Eine HTML5-Seite besteht im Grunde genommen aus den folgenden Bereichen:
- doctype (Deklaration des Dokumententyps)
- lang (Sprache auf der Seite)
- head (Kopfdaten wie Titel oder Beschreibung)
- body („Körper“, der den anzuzeigenden Inhalt der Seite enthält)
- header (Kopfbereich mit Logo etc.)
- navigation (Navigation auf der Seite)
- article (der eigentliche Beitrag, um den es geht)
- aside (Seitenleiste mit zusätzlichen Infos)
- footer (Fußzeile mit Links)
Es gibt zudem noch weitaus mehr Bereiche, die man mit HTML5 zusätzlich deklarieren kann. Für das Beispiel und zur Einführung in HTML5 gehen wir aber zunächst von den hier beschriebenen Grundaufbau aus:
Doctype – Deklaration des Dokumententyps
<!doctype html>Hierdurch wird der Browser in den Standard-Modus geschaltet. Ihm wird mitgeteilt, dass es sich um eine HTML5-Seite handelt, die es zu verarbeiten gilt.
Sprache auf der Seite
<html lang="de">Als nächstes möchte der Browser wissen: In welcher Sprache ist die Seite denn? Mit der Deklarierung „de“ wird ausgedrückt, dass es sich um eine deutschsprachige Seite handelt.
Head – Kopfdaten wie Titel oder Beschreibung
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<title>Beispielseite</title>
<meta name="description" content="Beschreibungstext">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="style.css">
</head>Die Kopfdaten enthalten das Wesentliche: Wie heißt denn die Seite? Wie lautet die Kurzbeschreibung? Um diese und weitere Fragen geht es hier. Im Head darf genau eine Title-Element stehen. Außerdem findet man im Kopfbereich Angaben zum Charakterset, der Skalierung für mobile Geräte sowie die Anbindungen der CSS-Datei und des Favicons.
Body – Inhalt der Seite
<body>
...
</body>Der Kopfbereich ist nun fertig. Jetzt geht es an den Inhalt der Seite. Dieser wird „body“ genannt. Der Bereich enthält die Inhalte, die auf der Seite sichtbar sein sollen.
Header – Kopfbereich
<header>
Kopfbereich
</header>Alles, was konstant oben auf allen Seiten erscheinen soll, wird in dem „Header“ zusammengefasst. Hiermit lassen sich Bereiche wie Logo, Suche, Social-Media-Links oder außerdem Willkommenstexte gruppieren.
Navigation auf der Seite
<nav>
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>Ohne Navigation geht nichts auf der Seite. Hier lassen sich die Links zu den Rubriken oder Einzelseiten setzen. Vorzugsweise als ungeordnete Liste, wie hier im Beispiel zu sehen.
Article – Darum geht’s ja eigentlich auf der Seite
<article>
<h1>Überschrift</h1>
<p>Lorem ipsum dolor sit amet, consetetur elitr sadipscing.</p>
</article>„Article“ umfasst den Inhalt, um den es hauptsächlich auf der Seite geht. Man kann sich das wie eine Zeitung vorstellen. Dort gibt es auch oben, unten und seitlich noch weitere Spalten oder Elemente, die mit dem Beitrag nichts zu tun haben. Den „wertvollen Inhalt“ zum Lesen findet man also hier im „Article“.
Aside – Die Seitenleiste
<aside>
Seitenleiste
</aside>Seitenleisten können nützlich sein, um den Leser noch weitere Informationen zu präsentieren und somit zum Verbleib auf der Seite anzuregen. Solche Randinfos sind dann mit „aside“ gruppiert.
Footer – Die Fußzeile
<footer>
Fußzeile
</footer>Zu guter Letzt gibt es da noch den „Footer“. Er bildet die Fußzeile der Seite und kann zum Beispiel Links zu den Rubriken, Kontakt-Informationen, Adressangaben und mehr enthalten. Zudem bietet der Footer die Gelegenheit, Infos zum Autor und zum Urheberrecht zu bringen.
Alles schön und gut, aber ich hänge seit Stunden daran fest es irgendwie wie eine vernünftige Webseite aussehen zu lassen.
Alles wird nur stumpf untereinander angezeigt.
Wie zum Teufel kann ich z.B. den Header den oberen Bereich der Seite einnehmen lassen, den Footer den unteren Bereich der Seite, die Navigation links der Mitte und die Main (den Artikel) den Rest?
Ich habe es auch schon mit CSS versucht, aber trotzdem wird der Footer nicht nach unten gesetzt und überall ist gaaaanz viel weißer Background.
Ich finde nirgendwo im Internet auch nur ein gutes Beispiel das es annähernd erklären würde.
So muss ich wohl oder übel auf die guten alten Tables zurückgreifen. Die funktionieren wenigstens so wie sie sollen :/
Leih dir ein HTML 5 buch aus und schau nach gibt ja nicht nur das Internet
Bringt aber jetzt wahrscheinlich auch nix mehr ^^