2 Moderne Seitenstruktur
Eine Webseite besteht in der Regel aus verschiedenen Bereichen, wie zum Beispiel Kopfbereich, Hauptinhalt, Fußbereich und Navigationsleiste. Mit HTML5 wurden neue Elemente eingeführt, mit deren Hilfe diese Bereiche gekennzeichnet werden können.
Element | Beschreibung |
---|---|
<header> |
Fasst alle Elemente des Kopfbereichs der Webseite oder eines Abschnitts zusammen. Er kann zum Beispiel ein Logo, den Titel der Webseite oder das Navigationsmenü enthalten. |
<main> |
Beinhaltet den Hauptinhalt der Webseite. Es darf daher pro Webseite auch nur einmal verwendet werden. |
<footer> |
Fasst alle Elemente des Fußbereichs der Webseite oder eines Ab-schnitts zusammen. Er kann zum Beispiel Copyright-Hinweise oder Links zum Impressum bzw. zu den Kontaktdaten enthalten. |
<nav> |
Enthält das Navigationsmenü der Webseite. |
<article> |
Gruppiert einen eigenständigen Inhalt, der unabhängig von den übrigen Inhalten der Webseite ist und auch in einem anderen Dokument wiederverwendet werden könnte. Dies unterscheidet ihn von einem section -Element. Ein article -Element besitzt in der Regel eine Überschrift und kann eigene strukturierende Elemente wie header , footer oder section enthalten. |
<section> |
Dient dazu Elemente, deren Inhalt zusammen einen thematischen Abschnitt bilden, als zusammengehörend zu kennzeichnen. Typischerweise besitzt jedes section -Element eine eigene Überschrift. section -Elemente können auch verschachtelt sein, um Unterabschnitte zu kennzeichnen. In einem article -Element können einzelne Abschnitte, die thematisch zusammmengehören und über eine eigene Überschrift verfügen, jeweils in ein section -Element zusammengefasst werden. Umgekehrt kann ein section -Element auch verschiedene article -Elemente enthalten. Ein Beispiel hierfür wäre ein Internetblog, der aus verschiedenen Artikeln besteht. |
<div> |
Wird verwendet, wenn der Bereich keinem sematischen Element zugeordnet werden kann. Dies ist zum Beispiel der Fall, falls der Bereich ausschließlich aus Formatierungsgründen angelegt wird. |
Aufgabe 2-1: Impressum
Aufgabe
Erstellen Sie gemäß der Vorlage Impressum ein neues HTML-Dokument namens impressum.html. Übernehmen Sie den Kopf- und Fußbereich aus der Startseite index.html.
LösungLösung
Aufgabe 2-2: Bildungswege
Aufgabe
Erstellen Sie gemäß der Vorlage Bildungswege ein neues HTML-Dokument namens bildungswege.html. Übernehmen Sie den Kopf- und Fußbereich aus der Startseite index.html.
Lösung