Inhalte in main und nur ein main einfügen
Definieren Sie den einzigen primären Inhaltsbereich.
Inhalte in main und nur ein main einfügen ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
main Is the Headline Act
Every page has one star: its unique content. The main element is where that content lives, separate from headers and footers.
One main, Always
A page should have exactly one main landmark. Two mains confuse users, who expect a single primary destination.
What Belongs Inside
Put the page's core content in main: the article, the form, the dashboard. The thing the user actually came for.
<main>
<h1>Your dashboard</h1>
<p>Today's stats...</p>
</main>What Stays Outside
Repeated stuff like the site logo, global nav, and footer links live outside main, since they are not unique to this page.
The Skip-Link Target
A skip link points to main so keyboard users can jump straight to content, past the repeated header on every page.
<a href="#main">Skip to content</a>
<main id="main">...</main>Make main Focusable
Add tabindex of -1 to main so a skip link can move focus into it without making it tabbable on its own.
<main id="main" tabindex="-1">
...
</main>Two mains, Hidden Rule
If you ever need a second main, all but one must be hidden from view. Only a single visible main is allowed at a time.
Do Not Nest main
The main element cannot live inside article, aside, nav, header, or footer. It sits at the top level of your page body.
The role main Fallback
For very old browsers you can add role of main as a backup, but the native main element is the right modern choice.
<main role="main">...</main>Why One main Helps
With a single main, screen reader users press one key and land exactly on the content, every page, every time. 🎯
A Clean Page Shape
Header, then nav, then one main, then footer. That predictable shape is what makes a page easy to scan by ear.
Quick Check
How many visible main landmarks should a single page expose?
Recap: One Clear main
You learned to put unique content in a single main, keep repeated parts outside, and use it as the skip-link target. 🙌
Häufig gestellte Fragen
Ist die Lektion „Inhalte in main und nur ein main einfügen“ kostenlos?
Ja — der vollständige Text von „Inhalte in main und nur ein main einfügen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Inhalte in main und nur ein main einfügen“?
Definieren Sie den einzigen primären Inhaltsbereich. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Inhalte in main und nur ein main einfügen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- header, nav, main, footer: Die großen Vier
- Inhalte in main und nur ein main einfügen
- Mehrere Bereiche mit aria-label benennen
- Navigation über Orientierungspunkte: So springen Nutzer umher