<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 dominanten Inhalt des <body> eines Dokuments. Der Hauptinhaltsbereich besteht aus Inhalten, die direkt mit dem zentralen Thema eines Dokuments in Verbindung stehen oder dieses erweitern, oder mit 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; } Ein Dokument darf nicht mehr als ein <main>-Element haben, das nicht das hidden-Attribut spezifiziert.
Attribute
Dieses Element enthält nur die globalen Attribute.
Hinweise zur Nutzung
Der Inhalt eines <main>-Elements sollte für das Dokument einzigartig sein. Inhalte, die über mehrere Dokumente oder Dokumentabschnitte hinweg wiederholt werden, wie Seitenleisten, Navigationslinks, Urheberrechtsinformationen, Site-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 bedeutet, im Unterschied zu Elementen wie <body>, Überschriften wie h2, und dergleichen, beeinflusst <main> nicht das Konzept des DOMs zur Struktur der Seite. Es ist rein informativ.
Barrierefreiheit
Landmark
Das <main>-Element verhält sich wie ein main-Landmark. Landmarks können von unterstützender Technologie verwendet werden, um große Dokumentenabschnitte schnell zu identifizieren und zu navigieren. Bevorzugen Sie die Verwendung des <main>-Elements über die Deklaration von role="main", es sei denn, es gibt Probleme mit der Unterstützung alter Browser.
Navigation überspringen
Die Navigation überspringen, auch bekannt als "skipnav", ist eine Technik, die es Nutzern unterstützender Technologie ermöglicht, große Abschnitte von sich wiederholenden Inhalten (Hauptnavigation, Informationsbanner usw.) schnell zu überspringen. Dies ermöglicht dem Nutzer, schneller zum Hauptinhalt der Seite zu gelangen.
Ein id-Attribut zum <main>-Element hinzuzufügen, ermöglicht es, als Ziel eines Links zum Überspringen der Navigation zu dienen.
<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 nach Überschriften und Inhaltsstrukturierungselementen, 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 | Flow-Inhalt, greifbarer Inhalt. |
|---|---|
| Erlaubter Inhalt | Flow-Inhalt. |
| Tag-Auslassung | Keine; sowohl die öffnenden als auch die schließenden Tags sind erforderlich. |
| Erlaubte Eltern | Wo Flow-Inhalt erwartet wird, jedoch 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
| Specification |
|---|
| HTML # the-main-element |