HTML stellt Elemente zur Verfügung, um eine Webseite semantisch zu strukturieren. Diese Elemente werden nicht direkt durch den Browser visuell dargestellt. Sie dienen mehr dazu, den Inhalt der Webseite in Funktionalitäten (wie zum Beispiel Header, Footer oder Menü) einzuteilen. Davon können auch Technologien, welche ein barrierefreies Arbeiten am Computer ermöglichen (zum Beispiel Screenreader) profitieren. Die Elemente können auch mit CSS visuell gestaltet werden (etwa die Hintergrundfarbe).
<!DOCTYPE html>
<html lang="de">
<head>
<!-- Weitere Elemente -->
</head>
<body>
<header>
<!-- Überschrift, Logo, ... -->
<nav>
<!-- Menü-Elemente -->
</nav>
</header>
<main>
<section>
<!-- Inhalt -->
</section>
<section>
<!-- Inhalt -->
</section>
</main>
<footer>
<!-- Autor, Impressum, Datenschutz, ... -->
</footer>
</body>
</html>
Verwenden Sie für jede Webseite eine semantische Struktur.
<header>
Das header-Element sollte als Erstes innerhalb des
body-Elements notiert werden. Der Inhalt des Elements ist meist ein
Banner, ein Logo, eine Überschrift und ein Slogan. Auch das Menü kann im header-Element
eingebaut werden. Der Header bleibt meist für die ganze Website identisch.
<header>
<!-- Banner, Logo, Überschrift, Menü ... -->
</header>
header-Element darf nicht mit dem head oder thead-Element
verwechselt werden!
<main>
Das main-Element beinhaltet den Inhalt für diese Webseite.
Es sollte deshalb nur einmal pro Webseite eingesetzt werden. Es wird
direkt im body-Element notiert und sollte auch nur dort benutzt
werden. Der Inhalt im main-Element kann mit section-Elementen
weiter strukturiert werden.
<main>
<!-- Weitere Unterteilung in z.B. Abschnitte (section) möglich ... -->
</main>
<section>
Das section-Element wird dazu benutzt, um eine Webseite in
Abschnitte zu unterteilen. Typischerweise wird innerhalb eines
section-Elements direkt eine Überschrift positioniert.
<section>
<!-- Überschrift mit passendem Inhalt (Paragraphen, Bilder, Links, ...) -->
</section>