<main>: Das Hauptelement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das <main>
HTML Element repräsentiert den dominierenden Inhalt des <body>
eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die direkt mit dem zentralen Thema eines Dokuments oder der zentralen Funktionalität einer Anwendung zusammenhängen oder diese erweitern.
Probieren Sie es aus
Ein Dokument darf nicht mehr als ein <main>
Element haben, bei dem das hidden
Attribut nicht spezifiert ist.
Attribute
Dieses Element enthält nur die globalen Attribute.
Nutzungshinweise
Der Inhalt eines <main>
Elements sollte einzigartig für das Dokument sein. Inhalte, die über eine Reihe von Dokumenten oder Dokumentabschnitten hinweg wiederholt werden, wie Seitenleisten, Navigationslinks, Urheberrechtsinformationen, 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 dergleichen, beeinflusst <main>
nicht das DOM Verständnis der Struktur der Seite. Es ist rein informativ.
Zugänglichkeit
Landmark
Das <main>
Element verhält sich wie eine Hauptlandmarke (main
). Landmarken können von unterstützenden Technologien verwendet werden, um schnell große Abschnitte des Dokuments zu identifizieren und zu navigieren. Bevorzugen Sie die Nutzung des <main>
Elements gegenüber der Deklaration von role="main"
, es sei denn, es gibt Bedenken hinsichtlich unterstützter älterer Browser.
Navigation überspringen
Navigation überspringen, auch bekannt als "skipnav", ist eine Technik, die einem Benutzer von unterstützender Technologie ermöglicht, schnell große Abschnitte von wiederholtem Inhalt (Hauptnavigation, Informationsbanner, etc.) zu überspringen. Dies ermöglicht es dem Benutzer, schneller auf den Hauptinhalt der Seite zuzugreifen.
Das Hinzufügen eines id
Attributs zum <main>
Element ermöglicht es, dass es das Ziel eines Links zum Überspringen der Navigation wird.
<body>
<a href="#main-content">Skip to main content</a>
<!-- navigation and header content -->
<main id="main-content">
<!-- main page content -->
</main>
</body>
Leseansicht
Die Leseransichts-Funktionalität des Browsers sucht nach dem Vorhandensein des <main>
Elements sowie Überschriften und Inhaltsabschnitten, um den Inhalt in eine spezialisierte Leseansicht 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 | Fließender Inhalt, greifbarer Inhalt. |
---|---|
Erlaubter Inhalt | Fließender Inhalt. |
Tag-Auslassung | Keine; sowohl das Start- als auch das End-Tag sind zwingend erforderlich. |
Erlaubte Eltern |
Wo
fließender Inhalt
erwartet wird, aber nur, wenn es ein
hierarchisch korrektes main Element
ist.
|
Implizierte ARIA-Rolle | main |
Erlaubte ARIA-Rollen | Keine role erlaubt |
DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-main-element |
Browser-Kompatibilität
BCD tables only load in the browser