HTML
Sectie-elementen
Zoeken…
Opmerkingen
De HTML5-standaarden vermelden het hoofdelement niet als een sectie-element.
Artikelelement
Het element <article> bevat zelfstandige inhoud zoals artikelen, blogberichten, opmerkingen van gebruikers of een interactieve widget die buiten de context van de pagina kan worden verspreid, bijvoorbeeld door RSS.
- Wanneer artikelelementen worden genest, moet de inhoud van het binnenste artikelknooppunt verband houden met het buitenste artikelelement.
Een blog ( section ) met meerdere berichten ( article ) en opmerkingen ( article ) kan er ongeveer zo uitzien.
<section>
<!-- Each individual blog post is an <article> -->
<article>
<header>
<h1>Blog Post</h1>
<time datetime="2016-03-13">13th March 2016</time>
</header>
<p>The article element represents a self contained article or document.</p>
<p>The section element represents a grouping of content.</p>
<section>
<h2>Comments <small>relating to "Blog Post"</small></h2>
<!-- Related comment is also a self-contained article -->
<article id="user-comment-1">
<p>Excellent!</p>
<footer><p>...</p><time>...</time></footer>
</article>
</section>
</article>
<!-- ./repeat: <article> -->
</section>
<!-- Content unrelated to the blog or posts should be outside the section. -->
<footer>
<p>This content should be unrelated to the blog.</p>
</footer>
Vermijd onnodig gebruik
Wanneer de hoofdinhoud van de pagina (exclusief kopteksten, voetteksten, navigatiebalken, enz.) Eenvoudig een groep elementen is. U kunt het <article> weglaten ten gunste van het element <main> .
<article>
<p>This doesn't make sense, this article has no real `context`.</p>
</article>
Vervang in plaats daarvan het artikel met een <main> element om aan te geven is dit de main inhoud voor deze pagina.
<main>
<p>I'm the main content, I don't need to belong to an article.</p>
</main>
Als u een ander element gebruikt, moet u ervoor zorgen dat u de <main> ARIA-rol opgeeft voor correcte interpretatie en weergave op meerdere apparaten en niet-HTML5-browsers.
<section role="main">
<p>This section is the main content of this page.</p>
</section>
Opmerkingen:
Klik hier om de officiële HTML5-specificatie voor het element <article> te lezen
Hoofdelement
Het element <main> bevat de hoofdinhoud voor uw webpagina. Deze inhoud is uniek voor de individuele pagina en mag niet elders op de site verschijnen. Herhalende inhoud zoals kopteksten, voetteksten, navigatie, logo's, etc. wordt buiten het element geplaatst.
- Het element
<main>mag maximaal één keer op één pagina worden gebruikt. - Het element
<main>mag niet worden opgenomen als afstammeling van eenarticle,aside,footer,headerofnavelement.
In het volgende voorbeeld geven we een enkele blogpost weer (en gerelateerde informatie zoals referenties en opmerkingen).
<body>
<header>
<nav>...</nav>
</header>
<main>
<h1>Individual Blog Post</h1>
<p>An introduction for the post.</p>
<article>
<h2>References</h2>
<p>...</p>
</article>
<article>
<h2>Comments</h2> ...
</article>
</main>
<footer>...</footer>
</body>
Het blogbericht bevindt zich in het element
<main>om aan te geven dat dit de hoofdinhoud voor deze pagina is (en daarom uniek op de website).De tags
<header>en<footer>zijn broers en zussen van het element<main>.
Opmerkingen:
De HTML5-specificatie herkent het element
<main>als een groeperingselement , en niet als een sectie- element.
- ARIA-rolattributen :
main(standaard) ,presentationHet toevoegen van een
role="main"ARIA- rolkenmerk aan andere elementen die bedoeld zijn om als hoofdinhoud te worden gebruikt, wordt geadviseerd om user-agents te ondersteunen die HTML5 niet ondersteunen en ook om meer context te bieden voor degenen die dat wel doen.Het element
<main>heeft standaard de hoofdrol en hoeft dus niet te worden opgegeven.
Klik hier om de officiële HTML5-specificatie voor het element <main> te lezen
Nav-element
Het element <nav> is primair bedoeld om te worden gebruikt voor secties die hoofdnavigatieblokken voor de website bevatten, dit kan links naar andere delen van de webpagina (bijvoorbeeld ankers voor een inhoudsopgave) of andere pagina's bevatten.
Inline items
Het volgende zal een inline set hyperlinks weergeven.
<nav>
<a href="https://google.com">Google</a>
<a href="https://www.yahoo.com">Yahoo!</a>
<a href="https://www.bing.com">Bing</a>
</nav>
Gebruik lijstitems wanneer dat nodig is
Als de inhoud een lijst met items vertegenwoordigt, gebruik dan een lijstitem om dit weer te geven en de gebruikerservaring te verbeteren.
Let op de role="navigation" , meer hierover hieronder.
<nav role="navigation">
<ul>
<li><a href="https://google.com">Google</a></li>
<li><a href="https://www.yahoo.com">Yahoo!</a></li>
<li><a href="https://www.bing.com">Bing</a></li>
</ul>
</nav>
Vermijd onnodig gebruik
<footer> -elementen kunnen een lijst met links naar andere delen van de site bevatten (FAQ, Algemene voorwaarden, etc.). De voettekst element alleen voldoende is in dit geval hoeft u niet verder te wrap uw banden met een <nav> element in de <footer> .
<!-- the <nav> is not required in the <footer> -->
<footer>
<nav>
<a href="#">...</a>
</nav>
</footer>
<!-- The footer alone is sufficient -->
<footer>
<a href="#">...</a>
</footer>
Opmerkingen:
Het toevoegen van een
role="navigation"ARIA-rol aan het element<nav>wordt geadviseerd om user-agents te ondersteunen die HTML5 niet ondersteunen en om meer context te bieden voor degenen die dat wel doen.<nav role="navigation"><!-- ... --></nav>
Schermlezers: (software waarmee blinde of slechtziende gebruikers door de site kunnen navigeren)
Gebruikersagenten zoals schermlezers zullen het
<nav>-element anders interpreteren, afhankelijk van hun vereisten.
- Het zou het
<nav>-element een hogere prioriteit kunnen geven bij het renderen van de pagina- Het kan de weergave van het element vertragen
- Het kan de pagina op een specifieke manier aanpassen aan de behoeften van de gebruiker
voorbeeld: maak de tekstkoppelingen binnen de<nav>-elementen groter voor iemand met een visuele beperking.
Klik hier om de officiële HTML5-specificatie voor het <nav> -element te lezen
Sectie-element
Het element <section> vertegenwoordigt een generieke sectie om inhoud thematisch te groeperen. Normaal gesproken zou elke sectie moeten kunnen worden geïdentificeerd met een kopelement als een kind van de section .
- U kunt het element
<section>in een<article>en vice versa. - Elke sectie moet een thema hebben (een kopelement dat deze regio identificeert)
- Gebruik het element
<section>als algemene 'container' voor opmaak.
Als je een container nodig hebt om styling toe te passen, gebruik dan een<div>.
In het volgende voorbeeld tonen we een enkele blogpost met meerdere hoofdstukken. Elk hoofdstuk is een sectie (een set thematisch gegroepeerde inhoud, die kan worden geïdentificeerd door de kopelementen in elke sectie) .
<article>
<header>
<h2>Blog Post</h2>
</header>
<p>An introduction for the post.</p>
<section>
<h3>Chapter 1</h3>
<p>...</p>
</section>
<section>
<h3>Chapter 2</h3>
<p>...</p>
</section>
<section>
<h3>Comments</h3> ...
</section>
</article>
Opmerkingen:
Ontwikkelaars moeten het artikelelement gebruiken wanneer het zinvol is om de inhoud van het element te syndiceren.
Klik hier om de officiële HTML5-specificatie voor het element <main> te lezen
Koptekstelement
Het element <header> staat voor inleidende inhoud voor de sectie-inhoud van de dichtstbijzijnde voorouder of sectiehoofdelement. Een <header> bevat meestal een groep inleidende of navigatiehulpmiddelen.
Opmerking: het header-element is geen content aan het delen; het introduceert geen nieuwe sectie.
Voorbeelden:
<header>
<p>Welcome to...</p>
<h1>Voidwars!</h1>
</header>
In dit voorbeeld heeft het <article> een <header> .
<article>
<header>
<h1>Flexbox: The definitive guide</h1>
</header>
<p>The guide about Flexbox was supposed to be here, but it turned out Wes wasn’t a Flexbox expert either.</p>
</article>
Voettekstelement
Het element <footer> bevat het voettekstgedeelte van de pagina.
Hier is een voorbeeld voor een <footer> -element dat de p alinatag bevat.
<footer>
<p>All rights reserved</p>
</footer>