LU02a - Inhalt strukturieren
Eine saubere Struktur der Inhalte …
Sie lernen die Elemente <nav>, <main>, <header>, <footer>, <section> und <article> kennen.
Erweitertes Gerüst
Im Abschnitt LU02a - HTML Grundgerüst haben Sie eine sehr rudimentäres Gerüst kennen gelernt. Dieses Gerüst wollen wir um einige Elemente mit der Struktur für die späteren Inhalte erweitern.
<!doctype html> <html lang='de'> <head> <meta charset='utf-8'> <title>HTML5-Seite mit Grundstruktur</title> </head> <body> <header> <nav> </nav> </header> <main> <article> <section> </section> <section> </section> </article> </main> <footer> </footer> </body> </html>
<header> und <footer>
Siehe auch selfhtml - header und footer
Wie ein Worddokument haben auch Webseiten in der Regel eine Kopf- und Fusszeile. Diese enthalten Logos, Name der Seite, Copyright, … Besonders bei einem Webauftritt mit mehreren Seiten helfen einheitliche Kopf- und Fusszeilen dem Betrachter bei der Orientierung.
Auch wenn der Tag sehr ähnlich heisst, ist <head> etwas völlig anderes als <header>.
Im Bereich <head> befinden sich Metainformationen, die nicht Teil der sichtbaren Webseite sind.
<nav>
Siehe auch selfhtml - nav
Das Element <nav> umschliesst die Navigation unseres Webauftritts.
Es wird häufig innerhalb von <head> platziert.
<main>
Siehe auch selfhtml - main
Der Inhalt unserer Webseite wird innerhalb von <main> geschrieben.
Dieser Bereich kann durch <article> und <section> weiter unterteilt werden.
<article>
Siehe auch selfhtml - article
Ein Artikel stellt einen in sich geschlossenen Teil des Inhalts dar.
Dieser kann aus mehreren Abschnitten (<section>) bestehen.
<section>
Siehe auch selfhtml - section
Das Element <section> bezeichnet einen Abschnitt innerhalb eines Artikels.
Kevin Maurizi, Marcel Suter