Attributen
Dit element bevat alleen de globale attributen.
Gebruiksnotities
De inhoud van een <main>-element moet uniek zijn voor het document. Inhoud die herhaald wordt over een reeks documenten of documentsecties, zoals zijbalken, navigatielinks, copyrightinformatie, sitelogo's en zoekformulieren, moet niet worden opgenomen, tenzij het zoekformulier de hoofdfunctie van de pagina is.
<main> draagt niet bij aan de outline van het document; dat wil zeggen, in tegenstelling tot elementen zoals <body>, kopteksten zoals h2, enzovoort, heeft <main> geen invloed op het DOM-concept van de structuur van de pagina. Het is strikt informatief.
Toegankelijkheid
Landmark
Het <main>-element gedraagt zich als een main-landmark-rol. Landmarks kunnen door ondersteunende technologie worden gebruikt om grote secties van het document snel te identificeren en ernaartoe te navigeren. Geef de voorkeur aan het gebruik van het <main>-element boven het declareren van role="main", tenzij er zorgen zijn over ondersteuning door oudere browsers.
Navigatie overslaan
Navigatie overslaan, ook bekend als "skipnav", is een techniek waarmee een gebruiker van ondersteunende technologie grote secties van herhaalde inhoud (hoofdnavigatie, infobanners, enz.) snel kan overslaan. Dit laat de gebruiker sneller bij de hoofdinhoud van de pagina komen.
Door een id-attribuut aan het <main>-element toe te voegen, kan het het doel zijn van een link om navigatie over te slaan.
<body>
<a href="#main-content">Skip to main content</a>
<!-- navigation and header content -->
<main id="main-content">
<!-- main page content -->
</main>
</body>Leesmodus
De leesmodusfunctionaliteit van browsers zoekt naar de aanwezigheid van het <main>-element, evenals kopelementen en inhoudsindelingselementen bij het omzetten van inhoud naar een gespecialiseerde leesweergave.
Voorbeelden
<!-- other content -->
<main>
<h1>Apples</h1>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<article>
<h2>Red Delicious</h2>
<p>
These bright red apples are the most common found in many supermarkets.
</p>
<p>…</p>
<p>…</p>
</article>
<article>
<h2>Granny Smith</h2>
<p>These juicy, green apples make a great filling for apple pies.</p>
<p>…</p>
<p>…</p>
</article>
</main>
<!-- other content -->Resultaat
Technische samenvatting
| Content categories | Flow content, palpable content. |
|---|---|
| Permitted content | Flow content. |
| Tag omission | None; both the starting and ending tags are mandatory. |
| Permitted parents |
Where
flow content
is expected, but only if it is a
hierarchically correct main element.
|
| Implicit ARIA role |
main
|
| Permitted ARIA roles | No role permitted |
| DOM interface | HTMLElement |