<main>
Zuletzt aktualisiert am 3. Februar 2026
Das <main>-Element markiert den Hauptinhalt einer Webseite. Es enthält den zentralen, einzigartigen Inhalt der Seite und schließt sich wiederholende Elemente wie Navigation, Header oder Footer aus. Ein wichtiges semantisches Element für Barrierefreiheit und Suchmaschinen.
Grundlagen
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
Syntax
<main>
<h1>Willkommen</h1>
<p>Das ist der Hauptinhalt.</p>
</main>Beispiele
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>© 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>Barrierefreiheit
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.
Häufige Fehler
Mehrere main-Elemente pro Seite: Das <main>-Element darf nur einmal pro Seite vorkommen. Wenn du mehrere Inhaltsbereiche hast, verwende stattdessen <article> oder <section> innerhalb von <main>.
main in anderen Strukturelementen verschachtelt: Das <main>-Element darf nicht innerhalb von <article>, <aside>, <header>, <footer> oder <nav> stehen. Es sollte ein direktes Kind von <body> sein und auf derselben Hierarchieebene wie Header und Footer liegen.
Navigation oder Footer in main einschließen: Das <main>-Element sollte nur den einzigartigen Inhalt der Seite enthalten. Sich wiederholende Elemente wie Navigation, Header, Footer oder Sidebar gehören nicht hinein.
main für Layout-Wrapper missbrauchen: Verwende <main> nicht als generischen Container für Styling-Zwecke. Nutze stattdessen <div> mit entsprechenden Klassen, wenn du nur einen Layout-Wrapper brauchst.
Browser-Kompatibilität
Das main-Element wird von allen modernen Browsern vollständig unterstützt. Für Internet Explorer 11 solltest du zusätzlich role='main' setzen.
| Client | Unterstützung | Hinweise |
|---|---|---|
| Chrome | Komplett | — |
| Firefox | Komplett | — |
| Safari | Komplett | — |
| Edge | Komplett | — |
| Opera | Komplett | — |
Email-Kompatibilität
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.
| Client | Unterstützung | Hinweise |
|---|---|---|
| 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. |
Verwandte Elemente
Bleib auf dem Laufenden
Erhalte neue Inhalte direkt in dein Postfach
Was erwartet dich?
Neue Artikel & Videos
Wenn ich was Neues veröffentliche, erfährst du's hier zuerst.
Plattform & Kurs-Updates
Neue Kurse, Referenz-Updates und gelegentlich Sonderpreise zum Launch.
Einmal die Woche in deinem Postfach
Kurz, auf den Punkt, kein Spam.