<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.

In diesem Artikel

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.

html
<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>

WebAIM: "Skip Navigation" Links

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.

Websites für den Safari-Lesemodus und andere Lese-Apps erstellen.

Beispiele

html
<!-- 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 Erlaubte Inhalte Tag-Auslassung Erlaubte Eltern Implizierte ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Flussinhalte, greifbare Inhalte.

Flussinhalte.

Keine; sowohl das Start- als auch das End-Tag sind obligatorisch.

Wo Flussinhalte erwartet werden, aber nur, wenn es sich um ein hierarchisch korrektes main-Element handelt.

main

Keine role erlaubt

[`HTMLElement`](/de/docs/Web/API/HTMLElement)

Grundlegende strukturelle Elemente: <html>, <head>, <body>
Abschnittsbezogene Elemente: <article>, <aside>, <footer>, <header>, oder <nav>
ARIA: Hauptrolle

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden