Aan de slag met HTML5

We werken aan het blok section

Het nieuwe element voor de sectie (<section>) is geen contanerelement zoals <article>. Willen we een blok met kleur of een afwijking in de lay-out maken, dan plaatsen we de inhoud binnen <div> dit binnen <section>. Het hier besproken element wordt gebruikt, om een zelfstandig deel van onze hoofdtekst te duiden. Dit deel heeft dan ook een eigen titel (hier <H3>). Ook verwijst de algemene inhoud (sitemap) naar die sectie.

In een korte tekst zullen we <section> niet vaak gebruiken. Een langere tekst kunnen we met deze tag verdelen, in zinvolle delen. Dit zijn dan delen die we in de inhoud als zelfstandig deel terug kunnen vinden. Deze relatie (<a name="#DezeNieuweSectie"></a>) met de inhoud is belangrijk voor het herkennen van <section>. Het anker staat dan bovenaan in <section>. Zo'n deel aangegeven met <section> geeft zoekmachines een aanknopingspunt voor het beoordelen van de tekst.

We zien in de bovenstaande alinea het eerste gebruik van <code> in onze HTML-pagina. Voor de weergave van een stukje code wordt er een speciaal lettertype gebruikt, waarin alle tekens evenveel ruimte innemen. We zien dit aan de compacte ‘m’ en de ruimte rond de ‘i’. Wij hebben voor de code de kleur groen gekozen.

Probeer dit terug te vinden in de bron en het CSS. Dus voor de code is er een eigen tag binnen HTML. Het is een oude opdracht, die vanaf het begin al bestaat en waarvan de geldigheid ook in HTML5 nog staat als een huis. Een heel blok code kunnen we ook duiden als een sectie. Maak een eigen lay-out, die de ruimte biedt voor de weergave van een blok code. Plaats daarbij <code> binnen <pre>, dat zorgt voor het behoud van de opmaak. Denk daarbij om het gebruik van de speciale tekens! Als laatste gaat tekst gaat verder met figure.