<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 HTML-Element <main> repräsentiert den dominanten Inhalt des <body> eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die direkt mit dem zentralen Thema eines Dokuments zusammenhängen oder dieses erweitern, oder aus der zentralen Funktionalität einer Anwendung.
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;
}
Attribute
Dieses Element umfasst nur die globalen Attribute.
Hinweise zur Verwendung
Ein Dokument darf nicht mehr als ein <main>-Element enthalten, für das das Attribut hidden nicht angegeben ist.
Der Inhalt eines <main>-Elements sollte für das Dokument eindeutig sein. Inhalte, die über eine Gruppe von Dokumenten oder Dokumentabschnitten hinweg wiederholt werden, wie Seitenleisten, Navigationslinks, Copyright-Informationen, Website-Logos und Suchformulare, sollten nicht enthalten sein, 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 Ähnlichem beeinflusst <main> nicht das DOM-Konzept der Seitenstruktur. Es dient ausschließlich der Information.
Barrierefreiheit
Landmark
Das <main>-Element verhält sich wie die main-Landmark-Rolle. Landmarks können von assistiven Technologien verwendet werden, um große Abschnitte eines Dokuments schnell zu identifizieren und zu ihnen zu navigieren. Verwenden Sie vorzugsweise das <main>-Element statt role="main" zu deklarieren, sofern keine Bedenken hinsichtlich der Unterstützung älterer Browser bestehen.
Navigation überspringen
Das Überspringen der Navigation, auch als „skipnav“ bekannt, ist eine Technik, die es Nutzenden assistiver Technologien ermöglicht, große Bereiche wiederholter Inhalte (Hauptnavigation, Informationsbanner usw.) schnell zu überspringen. Dadurch können sie schneller auf den Hauptinhalt der Seite zugreifen.
Das Hinzufügen eines id-Attributs zum <main>-Element ermöglicht es, dass dieses das Ziel eines Links zum Überspringen der Navigation ist.
<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 von Browsern sucht beim Umwandeln von Inhalten in eine spezielle Leseansicht nach dem Vorhandensein des <main>-Elements sowie von Überschriften und Elementen zur Inhaltsgliederung.
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 | Flow content, wahrnehmbarer Inhalt. |
|---|---|
| Erlaubter Inhalt | Flow content. |
| Weglassen von Tags | Keine; sowohl das Start- als auch das End-Tag sind obligatorisch. |
| Erlaubte Elternelemente |
Dort, wo
Flow content
erwartet wird, jedoch nur, wenn es sich um ein
hierarchisch korrektes main-Element
handelt.
|
| Implizite ARIA-Rolle |
main
|
| Erlaubte ARIA-Rollen | Keine role erlaubt |
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-main-element |