<main>: Das Main-Element
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das <main> HTML-Element repräsentiert den dominanten Inhalt des <body> eines Dokuments. Der Hauptinhalt besteht aus Inhalten, die direkt mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung verbunden sind oder diese erweitern.
Probieren Sie es aus
<header>Gecko facts</header>
<main>
<p>
Geckos are a group of usually small, usually nocturnal lizards. They are
found on every continent except Antarctica.
</p>
<p>
Many species of gecko have adhesive toe pads which enable them to climb
walls and even windows.
</p>
</main>
header {
font:
bold 7vw "Arial",
sans-serif;
}
Ein Dokument darf nicht mehr als ein <main> Element haben, das nicht das hidden-Attribut spezifiziert hat.
Attribute
Dieses Element beinhaltet nur die globalen Attribute.
Nutzungshinweise
Der Inhalt eines <main> Elements sollte einzigartig für das Dokument sein. Inhalte, die über einen Satz von Dokumenten oder Dokumentabschnitten hinweg wiederholt werden, wie Seitenleisten, Navigationslinks, Copyright-Informationen, Website-Logos und Suchformulare, sollten nicht einbezogen werden, es sei denn, das Suchformular ist die Hauptfunktion der Seite.
<main> trägt nicht zur Gliederung des Dokuments bei; das heißt, im Gegensatz zu Elementen wie <body>, Überschriften wie h2 und ähnlichen, beeinflusst <main> nicht das Konzept der Struktur der Seite im DOM. Es ist rein informativ.
Barrierefreiheit
Landmark
Das <main> Element verhält sich wie eine main-Landmark. Landmarks können von unterstützender Technologie verwendet werden, um große Abschnitte des Dokuments schnell zu identifizieren und zu navigieren. Verwenden Sie bevorzugt das <main> Element anstelle der Deklaration von role="main", es sei denn, es gibt Bedenken bezüglich der Unterstützung älterer Browser.
Navigation überspringen
Navigation überspringen, auch bekannt als "skipnav", ist eine Technik, die es Benutzern mit assistiver Technologie ermöglicht, große Abschnitte von wiederholten Inhalten (Hauptnavigation, Infobanner, etc.) schnell zu umgehen. Dies ermöglicht es dem Benutzer, schneller auf den Hauptinhalt der Seite zuzugreifen.
Das Hinzufügen eines id-Attributes zum <main> Element ermöglicht es, ein Ziel eines Links zur Navigation überspringen zu sein.
<body>
<a href="#main-content">Skip to main content</a>
<!-- navigation and header content -->
<main id="main-content">
<!-- main page content -->
</main>
</body>
Lesemodus
Die Browser-Lesemodus-Funktionalität sucht nach dem Vorhandensein des <main> Elements sowie nach Überschriften und Inhaltsstrukturierungselementen, wenn Inhalte in eine spezielle Leseransicht konvertiert werden.
Beispiele
<!-- other content -->
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>
These bright red apples are the most common found in many supermarkets.
</p>
<p>…</p>
<p>…</p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for apple pies.</p>
<p>…</p>
<p>…</p>
</article>
</main>
<!-- other content -->
Ergebnis
Technische Zusammenfassung
| Inhaltskategorien | Fließender Inhalt, spürbarer Inhalt. |
|---|---|
| Erlaubter Inhalt | Fließender Inhalt. |
| Tag-Auslassung | Keine; sowohl der Anfangs- als auch der Endtag sind obligatorisch. |
| Erlaubte Eltern |
Wo
fließender Inhalt
erwartet wird, aber nur, wenn es ein
hierarchisch korrektes main Element
ist.
|
| Implizite ARIA-Rolle |
main
|
| Erlaubte ARIA-Rollen | Keine role erlaubt |
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Specification |
|---|
| HTML # the-main-element |
Browser-Kompatibilität
Loading…