Bisher haben wir uns vor allem mit Tags beschäftigt, mit denen wir unseren Text strukturieren und formatieren können. Oftmals ist aber ein Dokument, d.h. die HTML-Seite, in zusätzliche Bereiche untergliedert, in denen dann wiederum Texte oder auch Navigationsmenüs platziert werden. Dies dient vor allem dazu, die einzelnen Bereiche, dann (per CSS) optisch zu gestalten und im Layout dadurch von einander zu trennen.
Bevor HTML5 eingeführt wurde, hat man dafür meist den allgemeinen "Containertag" <div> verwendet. Dieser lässt sich natürlich auch weiterhin verwenden, wenn der Bereich einer Seite in einen Container gesteckt werden soll. Vorzuziehen sind nun allerdings die neueren "semantischen" Tags, die uns beim Lesen des Quelltextes schon darauf hinweisen, was ihre Funktion sein soll. Nun gibt es z.B. den <header>-Tag für den Kopfbereich der Seite, der oftmals ein Logo und die Hauptnavigation enthält (Achtung! Nicht zu verwechseln mit <head>, dieser Tag liegt ja außerhalb des <body>-Knotens und dient den Meta-Informationen über die Seite). Für die Bereich am Ende der Seite kann nun der Tag <footer> verwendet werden. Navigationen werden häufig vom Tag <nav> umschlossen. Ist die Seite zusätzlich in Teilbereiche unterteilt, kann dafür der Tag <section> verwendet werden, für Sidebars, d.h. zusätzliche Infospalten neben dem Hauptinhalt der Tag <aside> und für einzelne Artikel z.B. eines Blogs der Tag <article>.
Beispielhaft für diese Containerelemente führen wir nun in unserem Dokument eine einfache Kopfzeile und eine Fußzeile ein, die den bisherigen Text umschließen. Wir verwenden dafür die beiden HTML5-Tags <header> und <footer>.
Unser neuer Markup sieht nun wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Meine erste Website</title>
</head>
<body>
<header>HTML5 rocks!</header>
<h1>Willkommen im Web!</h1>
<p>HTML hilft uns dabei, unsere Ideen <strong>weltweit</strong>
zu verbreiten.<br>
Mit einer handvoll Tags lässt sich Text <em>klar strukturieren</em>
und <em>übersichtlich präsentieren</em>.</p>
<h2>Der Schlüssel</h2>
<p>Der <a href="http://de.wikipedia.org/wiki/Webbrowser" target="_blank"
title="Definition in Wikipedia aufrufen">Browser</a> ist das Fenster
in die Welt des WWW. Er ist heute in fast jeder Tasche und jederzeit
mit dem Internet verbunden.</p>
<p>Sogar am See kann man damit Surfen:</p>
<img src="https://webdev.raphael-rossmann.de/wp-content/uploads/see.jpg"
alt="Ein schöner See mit W" title="Ein schöner See mit W" width="600">
<h2>Alles in Ordnung?</h2>
<p>HTML hilft uns dabei, Texte zu ordnen:</p>
<ul>
<li>Durch Überschriften</li>
<li>Durch Absätze</li>
<li>Durch Listen</li>
<li>Durch optische Betonungen</li>
</ul>
<footer>KuD rocks even more!</footer>
</body>
</html>
Wenn wir uns wieder das Resultat im Browser betrachten, sehen wir, dass die neuen Container sich nicht wirklich vom Layout her abheben. Wir sind damit nun endgültig an dem Punkt angelangt, wo wir endlich Kontrolle über die grafische Darstellung unserer Seite übernehmen wollen und müssen. Alles was wir bisher vor uns sehen, wird durch die Voreinstellungen des Browsers erzeugt, wodurch zwar eine einigermaßen strukturierte Darstellung entsteht, aber keinerlei individuelle Note - von Webdesign kann man also noch gar nicht sprechen. Um diesen Zustand schnellstens zu beheben, erarbeiten wir uns im nächsten Hauptkapitel die Grundlagen zu CSS (Cascading Style Sheets).
Welche HTML-Tags haben wir bisher gelernt?
Das HTML-Cheatsheet enthält eine alphabetische Liste der wichtigsten Tags und erklärt deren Funktion.