<main> HTML Hauptelement
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das <main> HTML-Element repräsentiert den dominierenden 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 enthält nur die globalen Attribute.
Nutzungshinweise
Der Inhalt eines <main>-Elements sollte einzigartig für das Dokument sein. Inhalte, die in einer Reihe von Dokumenten oder Dokumentabschnitten wiederholt werden, wie Seitenleisten, Navigationslinks, Copyright-Informationen, Seitensymbole und Suchformulare, sollten nicht enthalten sein, es sei denn, das Suchformular ist die Hauptfunktion der Seite.
<main> trägt nicht zur Strukturierung des Dokuments bei; das heißt, anders als Elemente wie <body> oder Überschriftselemente wie h2, beeinflusst <main> nicht das Strukturkonzept des DOMs der Seite. Es ist rein informativ.
Barrierefreiheit
Landmark
Das <main>-Element verhält sich wie eine main-landmark Rolle. Landmarks können von unterstützenden Technologien genutzt werden, um schnell große Abschnitte des Dokuments zu identifizieren und zu navigieren. Es wird bevorzugt, das <main>-Element zu verwenden, anstatt role="main" zu deklarieren, es sei denn, es gibt Bedenken hinsichtlich der Unterstützung älterer Browser.
Navigation überspringen
Navigation überspringen, auch bekannt als "skipnav", ist eine Technik, die es einem Benutzer unterstützender Technologien ermöglicht, schnell große Abschnitte wiederholter Inhalte (Hauptnavigation, Info-Banner usw.) zu überspringen. Dies ermöglicht es dem Benutzer, den Hauptinhalt der Seite schneller zu erreichen.
Das Hinzufügen eines id-Attributs zum <main>-Element ermöglicht, dass es das Ziel eines Navigations-Skip-Links wird.
<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 Lesemodus-Funktionalität des Browsers sucht nach dem Vorhandensein des <main>-Elements sowie von Überschriften und Inhaltsabschnitten, um Inhalte in eine spezialisierte Leseransicht umzuwandeln.
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 | Flussinhalte, greifbare Inhalte. |
|---|---|
| Erlaubte Inhalte | Flussinhalte. |
| Tag-Auslassung | Keine; sowohl das Start- als auch das End-Tag sind obligatorisch. |
| Erlaubte Eltern |
Wo
Flussinhalte
erwartet werden, aber nur, wenn es sich um ein
hierarchisch korrektes main-Element handelt.
|
| Implizierte ARIA-Rolle |
main
|
| Erlaubte ARIA-Rollen | Keine role erlaubt |
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-main-element |