Thomas Huijzer

Slikveld 22
3311VT Dordrecht

+31 (0)6 - 52 18 06 31
thomas@thuijzer.nl
PGP key
Of contact me via Signal

IBAN: NL93INGB0006752359
KvK: 57865841
btw: NL181253240B02

user@thuijzer.nl:/home/blog/section_article_aside_header_footer/

Section, article, aside, header, footer

In HTML5 zijn diverse nieuwe elementen toegevoegd. De meest bekende zijn: section, article, aside, header en footer.
Maar er is behoorlijk wat verwarring over het gebruik van deze elementen. In dit artikel leg ik uit waarvoor en hoe je ze kan gebruiken.

Section

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

Een section-element representeert een onderdeel van een document of applicatie. Het is geen op zichzelf staand onderdeel, maar is een onderdeel van bijvoorbeeld een article-element en wordt gebruikt om inhoud te groeperen.
Je kan het niet gebruiken als container voor layout. Daarvoor moet je een div-element gebruiken.

Article

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Author information associated with an article element (q.v. the address element) does not apply to nested article elements.

Een article-element gebruik je voor een onafhankelijk stuk tekst, zoals bijvoorbeeld een blog-artikel of een forum-post.

In een article-element kunnen nog meer article-elementen voorkomen, maar ook die moeten dan weer onafhankelijk gebruikt kunnen worden.
Een voorbeeld zijn stukken commentaar die gebruikers geven op een blog-artikel. Elk commentaar zou onafhankelijk gebruikt kunnen worden, maar hoort bij het blog-artikel, daarom mag het genest gebruikt worden.

Aside

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

Over het aside-element bestaat misschien wel de meeste verwarring. De naam doet namelijk denken aan "naast". Je zou het kunnen verwarren met opmaak "naast" de hoofd-inhoud. Maar dit element heeft niets met opmaak te maken. Het representeert inhoud die bij de hoofd-inhoud hoort, zoals quotes, reclames, feiten, enz.

Header

The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.

In een header-element plaats je de introductie die hoort bij de inhoud van zijn bovenliggend element. Dat kan een titel zijn, maar bijvoorbeeld ook navigatie naar sub-titels of paragrafen.

Footer

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

Een footer-element representeert informatie over de inhoud van het bovenliggend element. Dat kan bijvoorbeeld de naam van de schrijver zijn, de datum van plaatsing, enz.
Een footer-element hoeft niet onderaan de hoofd-inhoud geplaatst te worden. Een footer-element kan bijvoorbeeld ook boven een header-element geplaatst worden wanneer een ontwerper daarvoor kiest.

Conclusie

Wat vooral opvalt is dat de nieuwe HTML5-elementen niet bedoeld zijn om de opmaak van een website te verbeteren, maar om wat meer context in de paginabron te geven.
We zijn geneigd om bijvoorbeeld een footer-element altijd onderaan te plaatsen, maar de element-namen zijn niet gekozen om de plaats van het element aan te duiden, maar om aan te geven wat voor soort inhoud zich in een element bevindt.
Het is dus aan de ontwerper om opmaak te bepalen, en aan de ontwikkelaar om de paginabron enige context te geven.

Wel moet gezegd worden dat het gebruik van de nieuwe HTML5-elementen (nog) niet heel veel meerwaarde biedt. Voor SEO kan het wel handig zijn omdat zoekmachines de inhoud van je pagina beter begrijpen. Maar het is niet perse nodig en er is nog niets bekend over hoe het SEO beïnvloedt.
<div class="article"></div> heeft voor een zoekmachine net zoveel context als <article></article>

Dus gebruik je liever div-elementen om je website te bouwen, maak je dan geen zorgen. Maar een duidelijke paginabron kan geen kwaad.

Reacties


Plaats een reactie