2 Strukturierende Elemente

Eine Webseite besteht in der Regel aus verschiedenen Bereichen, die die Struktur der Webseite bestimmen. Im HTML-Code fassen wir alle Elemente eines Bereichs zusammen, indem wir sie in ein Element einschließen, das die Bedeutung des jeweiligen Bereichs deutlich macht.

img/Abb_2_1_Strukturierende_Elemente.jpg
Abb. 2-1: Strukturierende Elemente in der Startseite index.html (Vorschau auf die fertige Version)

HTML5 stellt hierfür folgende strukturierende Elemente zur Verfügung:

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.
<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.
<main> Beinhaltet den Hauptinhalt der Webseite. Es darf daher pro Webseite auch nur einmal verwendet werden.
<nav> Enthält das Navigationsmenü der Webseite.
<article> Gruppiert einen eigenständigen Inhalt, der unabhängig von den übrigen Inhalten der Webseite sein kann. Bei Bedarf kann ein article-Element eigene strukturierende Elemente wie header, footer oder section enthalten.
<section> Dient dazu verschiedene Abschnitte einer Webseite zu gruppieren. Ein section-Element kann zum Beispiel auch mehrere article-Elemente enthalten, aber auch selbst Teil eines article-Elements sein.
<div> Wird verwendet, wenn der Bereich keinem der anderen strukturierenden Elemente zugeordnet werden kann. Dies ist zum Beispiel der Fall, falls der Bereich ausschließlich aus Formatierungsgründen angelegt wird.
Abb. 2-2: Strukturierende Elemente
HTML
<!DOCTYPE html>

<html lang="de">

    <head>
        <meta charset="utf-8">
        <title>Kaufmännische Schule Tauberbischofsheim</title>
    </head>

    <body>
        <div>
            <header>
                <img src="img/logo.png" alt="Logo der Kaufmännischen Schule Tauberbischofsheim">
                <h1>Kaufmännische Schule Tauberbischofsheim</h1>
                <nav>
                    <ul>
                        <li> <a href="index.html">Startseite</a> </li>
                        <li> <a href="bildungswege.html">Bildungswege</a> </li>
                        <li> <a href="termine.html">Termine</a> </li>
                        <li> <a href="impressum.html">Impressum</a> </li>
                    </ul>
                </nav>
            </header>

            <main>
                <h2>Herzlich Willkommen</h2>
                <img src="img/eingang.jpg" alt="Haupteingang der Kaufmännischen Schule Tauberbischofsheim">
                <p>Wir freuen uns über Ihr Interesse und<br>hoffen Ihnen auf den folgenden Seiten einen kleinen Einblick in unsere Schule geben zu können.</p>
            </main>
        </div>
    </body>

</html>
Abb. 2-3: Startseite index.html (Zwischenstand Kapitel 2)