Zum Inhalt springen

main-Element

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 18.10.2026

Das main-Element umschließt den Inhalt, für den eine Seite da ist. Alles, was sich auf jeder Unterseite wiederholt, gehört nicht hinein.

main-Element

Bereich mit dem Hauptinhalt eines Dokuments, ohne die auf jeder Seite wiederkehrenden Bestandteile.
Beispiel: „Pro Seite ist genau ein sichtbares main-Element vorgesehen.“

Die Abgrenzung

Fünf ineinanderliegende Kästen: oben der header mit der nav darin, darunter links das main mit einem article und rechts daneben das aside, ganz unten der footer.
Der linke große Bereich: alles, was diese eine Seite ausmacht.

Was auf jeder Unterseite gleich aussieht, gehört nicht hinein: Logo, Hauptnavigation, Fußzeile. Was die Seite von anderen unterscheidet, gehört hinein. Bei einem Blogbeitrag ist das der Beitrag, bei einer Leistungsseite der Text zur Leistung.

Nur eines pro Seite

Mehrere sichtbare main-Elemente sind nicht vorgesehen. Hilfsmittel bieten den Sprung zum Hauptinhalt an, und das funktioniert nur, wenn es einen eindeutigen Ort gibt.

Genau darauf zielt auch der Sprunglink am Anfang vieler Seiten: Er zeigt auf das main-Element und erlaubt Tastaturnutzern, die Navigation zu übergehen.

Was das in der Praxis ändert

In den meisten Projekten ist das eine Zeile Arbeit, weil das Layout ohnehin einen Container um den Inhalt legt. Aus diesem Container wird ein main, und die Seite hat einen benannten Hauptbereich.

Siehe auch:

Header

Oberer Bereich einer Seite, der sich auf allen Seiten einer Website wiederholt und Logo und Hauptnavigation trägt.

#Website-Struktur #Frontend-Entwicklung (HTML, CSS, JavaScript)

Footer

Unterer Bereich einer Seite, der sich auf allen Seiten wiederholt und Pflichtangaben, Kontakt und weiterführende Links sammelt.

#Website-Struktur #Frontend-Entwicklung (HTML, CSS, JavaScript)

article-Element

Ein Inhalt, der für sich allein stehen könnte.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

Semantisches HTML

Elemente nach ihrer Bedeutung wählen statt nach ihrem Aussehen.

#Frontend-Entwicklung (HTML, CSS, JavaScript)

Body-Element

Der Bereich, in dem alles steht, was auf der Seite zu sehen ist.

#Frontend-Entwicklung (HTML, CSS, JavaScript)