<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 dominanten 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 Zusammenhang stehen oder diese 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, das nicht das hidden-Attribut spezifiziert hat.

Attribute

Dieses Element enthält nur die globalen Attribute.

Hinweise zur Verwendung

Der Inhalt eines <main>-Elements sollte einzigartig für das Dokument sein. Inhalte, die in einer Reihe von Dokumenten oder Dokumentabschnitten wiederholt werden, wie zum Beispiel Seitenleisten, Navigationslinks, Copyright-Informationen, Logos der Website 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 Konzept der Struktur der Seite im DOM. Es ist rein informativ.

Barrierefreiheit

Orientierungspunkt

Das <main>-Element verhält sich wie eine main-Markierung. Markierungen können von unterstützenden Technologien verwendet werden, um große Abschnitte des Dokuments schnell zu identifizieren und zu navigieren. Bevorzugen Sie die Verwendung des <main>-Elements anstelle der Deklaration role="main", es sei denn, es gibt Bedenken bezüglich der Unterstützung älterer Browser.

Navigation überspringen, auch bekannt als "skipnav", ist eine Technik, die es einem Benutzer mit unterstützender Technologie ermöglicht, große Abschnitte von wiederholten Inhalten (Hauptnavigation, Informationsbänder, etc.) schnell zu umgehen. Dies ermöglicht es dem Benutzer, schneller auf den Hauptinhalt der Seite zuzugreifen.

Das Hinzufügen eines id-Attributs zum <main>-Element ermöglicht, dass es Ziel eines Links zum Überspringen der Navigation 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>

Lesemodus

Die Lesemodus-Funktionalität von Browsern sucht nach dem Vorhandensein des <main>-Elements sowie von Überschriften und Inhaltsgliederungselementen, wenn Inhalte in eine spezielle 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.
Zulässiger Inhalt Flussinhalt.
Weglassen des Tags Keines; sowohl Anfangs- als auch Endtags sind obligatorisch.
Erlaubte Eltern Wo Flussinhalt erwartet wird, aber 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

Browser-Kompatibilität

Siehe auch