Seitenstruktur

Unsere Seite hat schon einige Teile: Links zu anderen Seiten, eine Überschrift mit einem Foto, ein Inhaltsverzeichnis, Abschnitte mit Text, ein Video und einen Link zur Quelle. Im Code sehen aber viele davon gleich aus. Ein div gruppiert Elemente nur; es sagt nichts darüber aus, was sie sind.

Deshalb hat HTML Elemente, die sagen, was jeder Teil einer Seite ist:

• header: der einleitende Teil oben auf der Seite, mit der Hauptüberschrift und oft einem Logo oder Links,
• nav (Navigation): eine Gruppe von Links, um sich auf der Website oder der Seite zu bewegen,
• main: der Hauptinhalt der Seite,
• section: ein Teil des Inhalts zu einem einzelnen Thema, meist mit eigener Überschrift,
• footer: das Ende der Seite mit zusätzlichen Informationen, etwa dem Autor, Kontakten oder Quellen.

In der Vorschau sehen sie genauso aus wie ein div. Der Unterschied ist, dass Browser, Screenreader und Suchmaschinen daran erkennen, was jeder Teil der Seite ist. Ein Screenreader kann zum Beispiel direkt zum Hauptinhalt oder zur Navigation springen.

Eine Seite aus diesen Elementen kann so aussehen:

<body>
	<header>
		<nav>...</nav>
		<h1>...</h1>
	</header>
	<main>
		<section>...</section>
		<section>...</section>
	</main>
	<footer>...</footer>
</body>

Eine Seite kann mehr als ein nav haben. Unsere bekommt zwei: eines mit den Links zu den anderen Seiten und eines mit dem Inhaltsverzeichnis. In dieser Übung fügen wir unserer Seite header, nav und footer hinzu, in der nächsten main und section.

Tipp: Wenn du Elemente in ein neues Element setzt, rücke sie eine Ebene weiter ein, damit der Code gut lesbar bleibt. Markiere dazu einfach die Zeilen und drücke die Tab-Taste.