<main>

Das <main>-Element gibt an, wo der Hauptinhalt einer Seite beginnt. Es darf nur einmal pro Seite verwendet werden und sollte alle inhaltlich relevanten Informationen umfassen, die sich von Seite zu Seite unterscheiden.

Browser und Screenreader erkennen <main> automatisch als ARIA-Landmark mit der Rolle “main”. Das ermöglicht es Nutzern von Hilfstechnologien, direkt zum Hauptinhalt zu springen und sich wiederholende Elemente wie Navigation zu überspringen.

Wichtige Regeln für die Verwendung:

• Nur ein <main>-Element pro Seite
• Nicht innerhalb von <article>, <aside>, <header>, <footer> oder <nav> verschachteln
• Sollte ein direktes Kind von <body> sein
• Enthält den einzigartigen Inhalt der Seite

Seitenstruktur mit main

Eine typische Seitenstruktur mit Header, Main-Bereich und Footer. Der Hauptinhalt ist klar von den sich wiederholenden Elementen getrennt.

<body>
  <header>
    <h1>Meine Website</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Mein erster Artikel</h2>
      <p>Der Hauptinhalt meiner Seite steht hier im main-Element.</p>
    </article>
  </main>

  <footer>
    <p>&copy; 2026 Meine Website</p>
  </footer>
</body>

main mit Skip-Link

Skip-Links ermöglichen es Tastatur- und Screenreader-Nutzern, direkt zum Hauptinhalt zu springen. Das ist besonders wichtig bei Seiten mit langer Navigation.

<body>
  <a href="#main-content" class="skip-link">
    Zum Hauptinhalt springen
  </a>

  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">Über</a>
      <a href="/contact">Kontakt</a>
    </nav>
  </header>

  <main id="main-content">
    <h1>Hauptinhalt</h1>
    <p>Hier beginnt der eigentliche Inhalt der Seite.</p>
  </main>

  <style>
    .skip-link {
      position: absolute;
      top: -40px;
      left: 0;
      background: #000;
      color: #fff;
      padding: 8px;
      z-index: 100;
    }
    .skip-link:focus {
      top: 0;
    }
  </style>
</body>

main mit article

Eine Blog-Seite mit Artikel im Hauptbereich. Das <article>-Element liegt innerhalb von <main>, nicht umgekehrt.

<body>
  <header>
    <h1>Mein Blog</h1>
  </header>

  <main>
    <article>
      <h2>Warum semantisches HTML wichtig ist</h2>
      <p class="meta">Veröffentlicht am 3. Februar 2026</p>
      <p>
        Semantisches HTML verbessert die Zugänglichkeit und SEO
        deiner Website. Das main-Element ist ein wichtiger Teil davon.
      </p>
      <p>
        Indem du den Hauptinhalt klar kennzeichnest, hilfst du
        sowohl Nutzern als auch Suchmaschinen...
      </p>
    </article>
  </main>

  <footer>
    <p>Kontakt: mail@example.com</p>
  </footer>
</body>

Das <main>-Element ist ein wichtiges Werkzeug für barrierefreie Websites:

ARIA Landmark: Browser weisen <main> automatisch die ARIA-Rolle “main” zu. Screenreader erkennen es als Landmark und ermöglichen Nutzern, direkt dorthin zu navigieren.

Skip-Link-Ziel: Das <main>-Element ist das ideale Ziel für Skip-Links. Nutzer von Hilfstechnologien können so die Navigation überspringen und direkt zum Hauptinhalt gelangen.

Strukturierung: Durch die klare Kennzeichnung des Hauptinhalts erleichterst du es Screenreader-Nutzern, die Struktur deiner Seite zu verstehen und schnell zu den relevanten Informationen zu navigieren.

Best Practice: Kombiniere <main> mit einem Skip-Link am Seitenanfang, der per Tab-Taste erreichbar ist. So können Tastaturnutzer mit einem Tastendruck zum Hauptinhalt springen.

Das main-Element wird von allen modernen Browsern vollständig unterstützt. Für Internet Explorer 11 solltest du zusätzlich role='main' setzen.

• Chrome

  Komplett

• Firefox

  Komplett

• Safari

  Komplett

• Edge

  Komplett

• Opera

  Komplett

Das main-Element wird in E-Mail-Clients nicht unterstützt. E-Mail-HTML folgt anderen Konventionen und unterstützt semantische HTML5-Elemente nicht. Verwende stattdessen table-basierte Layouts oder div-Elemente mit Inline-Styles.

• Apple Mail

  Keine

  Semantische HTML5-Elemente werden nicht unterstützt.

• Gmail

  Keine

  Gmail entfernt semantische Elemente aus dem HTML.

• Outlook

  Keine

  Outlook ignoriert semantische HTML5-Elemente vollständig.

• Thunderbird

  Keine

  Keine Unterstützung für semantische Elemente.

• Yahoo Mail

  Keine

  Semantische Elemente werden nicht unterstützt.