Das <main>-Element: Strukturierung und Inhalt im HTML-Dokument
Was ist das <main>-Element?
Das <main>-Element ist ein semantisches HTML-Element, das den Hauptinhalt eines Dokuments festlegt. Es kapselt den Haupttext, die Bilder und andere Elemente ein, die den primären Zweck der Seite darstellen.
Zweck des <main>-Elements
Das <main>-Element dient zwei Hauptzwecken:
- Strukturierung des Inhalts: Es hilft dir, den Inhalt deiner Seite logisch zu organisieren und den Hauptinhalt von Nebenelementen wie Headern, Footern und Sidebars zu unterscheiden.
-
Verbesserte Zugänglichkeit: Das
<main>-Element ermöglicht es Screenreadern und anderen assistierenden Technologien, den primären Inhalt einer Seite schnell zu identifizieren und darauf zuzugreifen.
Zweck und Bedeutung des -Elements
Das
Hauptzweck
Der Hauptzweck des
- Den thematischen Fokus des Dokuments zu identifizieren
- Seinen Inhalt vom Header, Footer und Navigationsleisten abzugrenzen
- Die Zugänglichkeit für Benutzer mit Bildschirmlesegeräten zu verbessern
Bedeutung
Das
- Semantische Klarheit: Es gibt den Inhalt der Seite klar als Hauptinhalt an, was Suchmaschinen und Browsern hilft, ihn zu interpretieren.
- Verbesserte Zugänglichkeit: Bildschirmlesegeräte können den Hauptinhalt schnell finden und vorlesen, was die Navigation für Menschen mit Sehbehinderungen erleichtert.
- Klarheit für Autoren: Autoren können ihren Code besser organisieren, indem sie den Hauptinhalt in einem dedizierten Element kapseln.
-
Erhöhte Flexibilität: Das
-Element ermöglicht es Entwicklern, den Hauptinhalt dynamisch zu laden oder zu aktualisieren, während der Rest der Seite unverändert bleibt.
Semantische Bedeutung des -Elements
Das
Primärer Inhaltsbereich
Das
Unterscheidbarkeit vom sekundären Inhalt
Das
Bedeutung für Suchmaschinen
Die semantische Bedeutung des
Unterscheidung von und
Während
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
Verbesserte Barrierefreiheit
Durch die Verwendung des
Bessere Benutzererfahrung
Das
Verstärkte semantische Bedeutung
Das
Trennung von Struktur und Inhalt
Durch die Verwendung des
Reduzierter Code
Das
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.