Attributen
Dit element bevat alleen de globale attributen.
Gebruiksnotities
Zoals hierboven vermeld, is <section> een generiek indelingselement en zou het alleen gebruikt moeten worden als er geen specifieker element beschikbaar is om het te representeren. Een navigatiemenu zou bijvoorbeeld verpakt moeten worden in een <nav>-element, maar een lijst met zoekresultaten of een kaartweergave met bijbehorende bediening hebben geen specifieke elementen en kunnen in een <section> geplaatst worden.
Overweeg ook deze gevallen:
- Als de inhoud van het element een op zichzelf staande, atomaire eenheid van inhoud representeert die zinvol is als losstaand, gesyndiceerd stuk (bijvoorbeeld een blogpost, een blogreactie, of een krantenartikel), is het
<article>-element een betere keuze. - Als de inhoud nuttige, bijkomstige informatie representeert die naast de hoofdinhoud staat maar er niet rechtstreeks deel van uitmaakt (zoals gerelateerde links of een auteursbiografie), gebruik dan een
<aside>. - Als de inhoud de hoofdinhoud van een document representeert, gebruik dan
<main>. - Als u het element alleen gebruikt als stylingwrapper, gebruik dan in plaats daarvan een
<div>.
Nogmaals: elke <section> moet geïdentificeerd worden, doorgaans door een kop (h1 tot h6) als kindelement van het <section>-element op te nemen, waar mogelijk. Zie hieronder voor voorbeelden van waar u een <section> zonder kop zou kunnen tegenkomen.
Voorbeelden
Basisvoorbeeld
Voor
<div>
<h2>Heading</h2>
<p>Bunch of awesome content</p>
</div>Resultaat
Na
<section>
<h2>Heading</h2>
<p>Bunch of awesome content</p>
</section>Resultaat
Een section zonder kop gebruiken
Situaties waarin u <section> zonder kop tegenkomt, vindt u doorgaans in webapplicatie-/UI-secties in plaats van in traditionele documentstructuren. In een document heeft het eigenlijk geen zin om een aparte sectie inhoud te hebben zonder een kop die de inhoud beschrijft. Zulke koppen zijn nuttig voor alle lezers, maar in het bijzonder voor gebruikers van hulptechnologieën zoals schermlezers, en ze zijn ook goed voor SEO.
Denk echter aan een secundair navigatiemechanisme. Als de globale navigatie al verpakt is in een <nav>-element, zou u een vorige/volgende-menu kunnen verpakken in een <section>:
<section>
<a href="#">Previous article</a>
<a href="#">Next article</a>
</section>Of hoe zit het met een soort knoppenbalk om uw app mee te bedienen? Deze heeft mogelijk geen kop nodig, maar is nog steeds een aparte sectie van het document:
<section>
<button class="reply">Reply</button>
<button class="reply-all">Reply to all</button>
<button class="fwd">Forward</button>
<button class="del">Delete</button>
</section>Resultaat
Afhankelijk van de inhoud kan het opnemen van een kop ook goed zijn voor SEO, dus het is een optie om te overwegen.
Technische samenvatting
| Content categories | Flow content, Sectioning content, palpable content. |
|---|---|
| Toegestane inhoud | Flow content. |
| Weglaten van tag | Geen, zowel de begin- als eindtag zijn verplicht. |
| Toegestane ouders |
Elk element dat
flow content
accepteert. Merk op dat een <section>-element geen
afstammeling mag zijn van een <address>-element.
|
| Impliciete ARIA-rol |
region
als het element een
toegankelijke naam heeft, anders
generic
|
| Toegestane ARIA-rollen |
alert, alertdialog,
application, banner,
complementary,
contentinfo, dialog,
document, feed,
log, main,
marquee, navigation,
none, note,
presentation, search,
status, tabpanel
|
| DOM-interface | HTMLElement |