Aufbau einer HTML5-Seite (Dokumentstruktur mit Beispiel)

So ist der Aufbau einer HTML5-Seite aufgebaut: Der grundsätzliche Aufbau und die Dokumentstruktur von HTML erklärt. Ein beispielhaftes und typisches HTML-Grundgerüst zum Lernen oder zum Verwenden als Vorlage für eigene Seiten.

Grundgerüst HTML5-Seite

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 HTML5 in Form eines 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:

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.

5 3

Kommentieren

Ich akzeptiere die Datenschutzerklärung.