generische Inhaltsabschnitte wie Überschriften, Absätze und Bilder gruppiert.
Erforderliche Inhalte für das -Element
Das <main>-Element soll den Hauptinhalt deiner Seite enthalten. Dieser Inhalt ist für die Hauptabsicht deiner Seite relevant und bietet den Nutzern die wichtigsten Informationen oder Funktionen, die sie erwarten.
Primärer Inhalt
Als primären Inhalt kannst du Folgendes einfügen:
-
Text: Verwende Absätze, Überschriften, Listen und andere Textelemente, um deine Botschaft zu vermitteln.
-
Bilder: Ergänze Fotos, Grafiken, Diagramme oder andere visuelle Elemente, um deine Inhalte anschaulicher zu gestalten.
-
Videos: Bette Videos ein, um komplexe Konzepte zu veranschaulichen oder ein interaktiveres Erlebnis zu bieten.
-
Formulare: Aktiviere Nutzerinteraktionen durch Formulare für Anmeldungen, Bestellungen oder Kontaktanfragen.
Wichtiger Hinweis
Es ist wichtig, dass der Inhalt deines <main>-Elements für die Hauptabsicht deiner Seite relevant ist. Verzichte darauf, irrelevante oder sekundäre Informationen einzubinden, die den Fokus des Nutzers ablenken könnten.
Hilfreiche Ressourcen
Platzierung des -Elements im HTML-Dokument
Das <main>-Element solltest du innerhalb des <body>-Elements platzieren. Es kann nur ein <main>-Element pro HTML-Dokument geben, da es den primären Inhalt der Seite darstellt.
Platzierung im Bezug zu anderen Elementen
Vor dem <main>-Element:
-
<header>-Element: Enthält Kopfzeilenelemente wie Logo, Titel und Navigation.
-
<nav>-Element: Bietet Navigationsoptionen für die Website.
Nach dem <main>-Element:
-
<aside>-Element: Enthält sekundäre Inhalte wie Seitenleisten oder Werbeanzeigen.
-
<footer>-Element: Bietet Informationen über das Unternehmen oder die Website, wie z. B. Kontaktdetails oder Copyright.
Best Practices
-
Verwende das
<main>-Element als Container für den Hauptinhalt: Vermeide, es mit anderen Elementen zu füllen, die nicht direkt mit dem Inhalt der Seite zusammenhängen.
-
Platziere das
<main>-Element so nah wie möglich an der Oberseite des <body>-Elements: Dies verbessert die Zugänglichkeit und erleichtert es Nutzern, den Hauptinhalt der Seite schnell zu finden.
-
Stelle sicher, dass das
<main>-Element visuell vom Rest der Seite abgegrenzt ist: Dies kann durch die Verwendung von Leerzeichen, Rahmen oder anderen visuellen Elementen erreicht werden.
Vorteile der Verwendung des -Elements
Das -Element bietet zahlreiche Vorteile, die die Strukturierung und den Inhalt deines HTML-Dokuments verbessern können:
Verbesserte Barrierefreiheit
Durch die Verwendung des -Elements kannst du die Barrierefreiheit deiner Website verbessern. Hilfsprogramme für Menschen mit Behinderungen können den Hauptinhalt deiner Seite leichter identifizieren, was ihnen die Navigation und das Verstehen deines Inhalts erleichtert.
Bessere Benutzererfahrung
Das -Element hilft dir, eine konsistentere und benutzerfreundlichere Erfahrung auf deiner Website zu schaffen. Es sorgt dafür, dass der Hauptinhalt deiner Seite immer an einer vorhersehbaren Stelle zu finden ist, was es den Besuchern erleichtert, die Informationen zu finden, die sie suchen.
Verstärkte semantische Bedeutung
Das -Element bietet eine klare semantische Bedeutung für deinen Hauptinhalt. Es sagt Suchmaschinen und anderen Parsing-Anwendungen, welcher Teil deiner Seite der wichtigste ist, was die Indizierung und das Ranking deiner Website verbessern kann.
Trennung von Struktur und Inhalt
Durch die Verwendung des -Elements kannst du die Struktur deines HTML-Dokuments von seinem Inhalt trennen. Dies macht es dir leichter, die Struktur deiner Seite zu ändern, ohne den Inhalt zu beeinträchtigen, und umgekehrt.
Reduzierter Code
Das -Element hilft dir, den Code deiner Website zu reduzieren, indem es eine dedizierte Stelle für den Hauptinhalt deiner Seite bereitstellt. Dies kann die Wartbarkeit deines Codes erleichtern und die Gesamtgröße deiner Seite verringern.
Best Practices für das -Element
Um die effektive Verwendung des <main>-Elements zu gewährleisten, solltest du die folgenden Best Practices beachten:
Verwende das -Element nur einmal
Stelle sicher, dass in deinem HTML-Dokument nur ein einziges <main>-Element vorhanden ist. Mehrere <main>-Elemente können zu Verwirrung und Problemen bei der semantischen Interpretation führen.
Platziere das -Element nach dem Header
Das <main>-Element sollte nach dem Header-Bereich deines Dokuments platziert werden. Dies stellt die logische Abfolge der Inhalte sicher und erleichtert es assistierenden Technologien, die Hauptinhalte zu identifizieren.
Verwende das -Element für den Hauptinhalt
Füge ausschließlich den Hauptinhalt deiner Seite in das <main>-Element ein. Vermeide es, Header, Footer, Navigationen oder andere Nebeninhalte einzuschließen.
Strukturiere den Inhalt semantisch
Verwende Überschriften (z. B. <h1>, <h2>) und Absätze (<p>) zur Strukturierung des Inhalts innerhalb des <main>-Elements. Dies verbessert die Lesbarkeit und Zugänglichkeit.
Vermeide die Verschachtelung von -Elementen
Verschachtelte <main>-Elemente sollten vermieden werden. Wenn du mehrere Hauptinhaltsbereiche auf deiner Seite hast, verwende stattdessen Abschnitts- oder Container-Elemente (<section> oder <div>) zur Organisation.
Berücksichtige assistierende Technologien
Stelle sicher, dass die Hauptinhalte im <main>-Element deutlich als solche gekennzeichnet sind. Dies kann durch die Verwendung von ARIA-Rollen oder Landmarks wie role="main" erreicht werden.
Teste die Zugänglichkeit
Teste die Zugänglichkeit deiner Seite, um sicherzustellen, dass das <main>-Element ordnungsgemäß verwendet wird. Nutze dafür Tools wie den WAVE Web Accessibility Evaluation Tool oder aXe.
Fehlersuche und Korrekturen im Zusammenhang mit dem <main>-Element
Du hast das <main>-Element in deinem HTML-Dokument verwendet, aber etwas scheint nicht ganz richtig zu sein? Hier sind einige häufige Fehler und Möglichkeiten, sie zu beheben:
Fehlt das <main>-Element?
Stelle sicher, dass du ein <main>-Element in deinem Dokument hast. Es sollte nur ein <main>-Element auf jeder Seite geben.
Falsche Platzierung des <main>-Elements
Das <main>-Element sollte sich innerhalb des <body>-Elements befinden und nicht innerhalb anderer Elemente wie <header> oder <footer>.
Mehrere <main>-Elemente
Verwende nicht mehrere <main>-Elemente auf einer Seite. HTML-Dokumente sollten nur ein primäres <main>-Element haben.
Fehlender Inhalt im <main>-Element
Das <main>-Element sollte den Hauptinhalt deiner Seite enthalten. Überprüfe, ob wichtige Inhalte wie Text, Bilder oder Videos fehlen.
Zu viel Inhalt im <main>-Element
Während das <main>-Element den Hauptinhalt enthalten sollte, sollte es keine Nebeninhalte wie Kopfzeilen, Navigationsmenüs oder Fußzeilen enthalten.
Semantische Fehler
Vergewissere dich, dass das <main>-Element semantisch korrekt verwendet wird und den Hauptinhalt deiner Seite widerspiegelt. Vermeide die Verwendung als Platzhalter oder für sekundären Inhalt.
Inaktive Elemente im <main>-Element
Stelle sicher, dass alle Elemente innerhalb des <main>-Elements aktiv sind. Inaktive Elemente können dazu führen, dass der Inhalt nicht für Benutzer sichtbar oder zugänglich ist.
Konsistenzprüfungen
Überprüfe die Konsistenz deiner Verwendung des <main>-Elements auf verschiedenen Seiten deiner Website. Stelle sicher, dass es überall auf die gleiche Weise verwendet wird.
