W3docs
de
Anmelden

HTML <main> Tag

Das Tag definiert in HTML5 den Hauptinhalt eines Dokuments. Beschreibung, Attribute und Beispiele.

Das <main>-Tag ist ein Block-Level-Element, das in der HTML5-Spezifikation eingeführt wurde. Es umschließt den dominanten Inhalt des <body>-Elements — den Inhalt, der für dieses Dokument einzigartig ist und nicht auf allen Seiten der Website wiederholt wird, wie etwa die Website-Kopfzeile, das Navigationsmenü, die Seitenleiste, das Suchfeld oder die Fußzeile.

Diese Seite erklärt, wofür <main> gedacht ist, wie es in eine vollständige Dokumentstruktur neben <header>, <nav> und <footer> passt, wie es „Zum Inhalt springen"-Links ermöglicht, und welche Regeln für die Verwendung von mehr als einem <main> auf einer Seite gelten.

Wo <main> platziert werden darf und wo nicht

Das <main>-Element darf nicht innerhalb eines <article>-, <aside>-, <footer>-, <header>- oder <nav>-Elements platziert werden — <main> ist eine übergeordnete Region, daher gelten diese Wrapper nicht für es.

Dieses Element ist Teil des DOM-Baums, wird jedoch vom Dokumentumriss ausgeschlossen, im Gegensatz zu Überschriftselementen wie <h1> bis <h6>, die zu ihm beitragen.

Barrierefreiheit und der main-Landmark

<main> repräsentiert den main-ARIA-Landmark. Assistive Technologien wie Screenreader stellen Landmarks bereit, damit Benutzer direkt zu den wichtigsten Bereichen einer Seite springen können. Bevorzuge das <main>-Element gegenüber dem Hinzufügen von role="main" zu einem generischen Element wie einem <div>, da <main> diese Rolle implizit trägt.

Pro Seite sollte es genau einen main-Landmark geben. Tastatur- und Screenreader-Benutzer können wiederholte Inhalte (Navigation, Banner, Werbeanzeigen) auch mithilfe der „Skip-Navigation"-Technik überspringen. Wenn du dem <main>-Element eine id gibst, wird diese id zum Ziel eines Skip-Links — siehe das Beispiel unten.

Syntax

Das <main>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<main>) und schließenden (</main>) Tag geschrieben.

Beispiel des HTML-<main>-Tags:

HTML <main> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <main>
      <h1>Programming languages</h1>
      <p>
        Languages HTML and CSS are intended for site layout.
      </p>
      <article>
        <h2>HTML</h2>
        <p>
          HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages.
        </p>
        <p>... </p>
        <p>... </p>
      </article>
      <article>
        <h2>CSS</h2>
        <p>
          CSS is a language of styles, defining the display of HTML documents.
        </p>
        <p>... </p>
      </article>
    </main>
  </body>
</html>
Probier es selbst »

<main> in einer vollständigen Dokumentstruktur

In einer echten Seite steht <main> neben den anderen Landmark-Elementen. Kopfzeile, Navigation und Fußzeile werden auf allen Seiten wiederholt, daher bleiben sie außerhalb von <main>; nur der seitenspezifische Inhalt kommt hinein.

<!DOCTYPE html>
<html>
  <head>
    <title>Programming languages</title>
  </head>
  <body>
    <header>
      <h1>My Web Tutorials</h1>
    </header>

    <nav>
      <a href="/html">HTML</a> |
      <a href="/css">CSS</a> |
      <a href="/js">JavaScript</a>
    </nav>

    <main>
      <h2>Programming languages</h2>
      <p>HTML and CSS are intended for site layout.</p>
    </main>

    <footer>
      <p>&copy; 2026 My Web Tutorials</p>
    </footer>
  </body>
</html>
Result

Ein Skip-Link ermöglicht es Tastatur- und Screenreader-Benutzern, die wiederholte Navigation direkt zu überspringen. Stimme das href des Links mit der id des <main>-Elements ab:

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

  <header>
    <h1>My Web Tutorials</h1>
  </header>
  <nav>
    <a href="/html">HTML</a> |
    <a href="/css">CSS</a>
  </nav>

  <main id="main-content">
    <h2>Programming languages</h2>
    <p>HTML and CSS are intended for site layout.</p>
  </main>
</body>

Das Aktivieren des Links verschiebt den Fokus auf #main-content, sodass der Benutzer direkt beim primären Inhalt der Seite landet.

Mehr als ein <main> mit dem hidden-Attribut verwenden

Eine Seite darf nur ein sichtbares <main>-Element enthalten. Alle weiteren <main>-Elemente müssen das hidden-Attribut tragen. Dies ist bei Single-Page-Applications (SPAs) nützlich, bei denen mehrere „Views" gleichzeitig im DOM vorhanden sind, aber nur die aktive View angezeigt wird:

<main>
  <h2>Home view</h2>
  <p>This view is visible.</p>
</main>

<main hidden>
  <h2>Settings view</h2>
  <p>This view is in the DOM but hidden until activated.</p>
</main>

Wenn der Benutzer die View wechselt, tauscht das Skript das hidden-Attribut aus, sodass zu jedem Zeitpunkt genau ein <main> sichtbar ist.

Attribute

Das <main>-Tag unterstützt die Globalen Attribute und die Event-Attribute.

Das <main>-Element gestalten

<main> ist lediglich ein struktureller Container und wird wie jedes Block-Element gestaltet. Da es den primären Inhalt der Seite enthält, ist es ein natürlicher Ort, um die Gesamtlesebreite, den Innenabstand und den Abstand festzulegen:

main {
  display: block;       /* ensures block layout in older browsers */
  max-width: 800px;
  margin: 0 auto;       /* center the content column */
  padding: 20px;
  background-color: #f9f9f9;
}

Übungen

Übung
Was ist die Bedeutung und Verwendung des main-Elements in HTML? (Alle zutreffenden Antworten auswählen.)
Was ist die Bedeutung und Verwendung des main-Elements in HTML? (Alle zutreffenden Antworten auswählen.)
Was this page helpful?