## Äußere Struktur eines HTML Dokumentes

Bisher haben wir mehr generische und wiederverwendbare Elemente in einem HTML-Dokument gesehen
Aber eine wichtige Sache fehlt dem noch:

- Menü?
- Navigationselemente wie Breadcrumbs?
- Normalerweise gibt es auch einen Footer
- Wo fängt der "eigentliche" Content an?

### Der "Kopf" einer Website

- Ein Logo
- Navigation zu Unterseiten
- Bei größeren Anwendungen: Eine "User-Section"
- Ggf Suche?

Das <header> Element existiert zu diesem Zweck
Zusätzlich wertvoll für die Accessibility einer Website

### Wo der eigentliche Content liegt

Innerhalb des `<main>` Elementes wird der eigentliche Website-Inhalt präsentiert.
Es darf nicht mehr als ein `<main>` auf einer Website befindlich sein.

### Das Ende einer Seite

Meistens befindet sich am Ende einer Website zusätzliche, aber zunächst nicht relevante Informationen für den Besucher.
Beispielsweise befinden sich hier Social-Media Links, eine Copyright-Info und Funktionen/Weiterleitungen zu ggf rechtlich notwendigen Unterseiten.
Hierfür wird das <footer> Element verwendet

### Inhalte innerhalb einer Seite strukturieren

#### `<article>`

- Enthält ein alleinstehendes "etwas"
- Beispielsweise einen Foren-Post, Zeitungsartikel, Blog-Post, einen Nutzer-Kommentar, etc...
- Kann auch ein alleinstehendes interaktives Element sein (Formular)
- Kann geschachtelt vorkommen (z.B einen Nuzter-Kommentar innerhalb eines Blog-Post)
- Sollte eine Überschrift beinhalten

#### `<section>`

- Generischer als ein `<article>`
- Falls ein styling-wrapper benötigt wird, lieber ein `<div>` verwenden
- Eine section sollte auch eine Überschrift beinhalten

#### `<aside>`

- Präsentiert Inhalt der indirekt mit dem Eigentlichen Seiteninhalt zusammenhängt
- Wird oft zum Beispiel als Sidebar angezeigt
- Alternativ auch als "Callout"-Box

### `<nav>`igation

- Dient als container für Navigations-Links innerhalb der (Web)Seite
- Repräsentiert nur die "Sektion", eigentliche Links innerhalb dieses Elementes können weiter verschachtelt sein (zum Beispiel mit `ul`)
- Neben der Hauptnavigation auch für Unter-Navigation gedacht
- Inhaltsverzeichnisse, Breadcrumbs, etc.

### Aber warum eigentlich?

Wozu benötigen wir eigentlich diese speziellen Tags?
Reicht es nicht einfach ein `div` überall zu verwenden?

In erster Linie dienen all diese Tags um Nutzern mit Assistiven Technologien (ScreenReadern) Sprungpunkte zu ermöglichen. So kann ein User von Section zu Section springen, zur Navigation springen usw.

Zusätzlich gibt es uns den Entwicklern auch etwas "Dokumentation" in Bezug darauf wo etwas innerhalb der Seitenstruktur zu finden ist, beziehungsweise was sich innerhalb eines Tags befindet das wir im Code sehen.