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

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

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

Siehe auch