<main>: Das Main-Element

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 in Verbindung stehen oder dieses 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, für das das hidden-Attribut nicht angegeben ist.

Attribute

Dieses Element enthält nur die globalen Attribute.

Verwendungshinweise

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 z.B. Sidebars, 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 Struktur des Dokuments bei. Das bedeutet, im Gegensatz zu Elementen wie <body>, Überschriften wie h2 und ähnlichen, beeinflusst <main> nicht das Konzept der Struktur der Seite im DOM. Es ist rein informativ.

Barrierefreiheit

Landmark

Das <main>-Element verhält sich wie eine main-Landmark. Landmarks können von assistiver Technologie verwendet werden, um große Abschnitte des Dokuments schnell zu identifizieren und zu navigieren. Bevorzugen Sie die Verwendung des <main>-Elements gegenüber der Deklaration von role="main", es sei denn, es gibt Bedenken hinsichtlich der Unterstützung älterer Browser.

"Navigation überspringen", auch bekannt als "skipnav", ist eine Technik, die es einem Benutzer assistiver Technologien ermöglicht, große Abschnitte von wiederholten Inhalten (Hauptnavigation, Infobanner usw.) schnell zu überspringen. Dies ermöglicht dem Benutzer, schneller auf den Hauptinhalt der Seite zuzugreifen.

Das Hinzufügen eines id-Attributs zum <main>-Element ermöglicht es, es als Ziel eines Links zur Navigation überspringen zu verwenden.

html
<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 nach der Präsenz des <main>-Elements sowie von Überschriften und Inhaltsstrukturierungselementen, wenn Inhalte in eine spezialisierte Leseransicht konvertiert werden.

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 Flussinhalt, greifbarer Inhalt.
Erlaubte Inhalte Flussinhalt.
Tag-Auslassung Keine; sowohl Start- als auch End-Tags sind zwingend erforderlich.
Zulässige Eltern Wo Flussinhalt erwartet wird, jedoch nur, wenn es sich um ein hierarchisch korrektes main-Element handelt.
Implizite ARIA-Rolle main
Zulässige ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML
# the-main-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch