Zoek een img element op je website waarboven of onder tekst staat. Ik gebruik de afbeelding van Klara Koe, maar je kunt ook je eigen afbeeldingen gebruiken.

Op de regel boven de code, zet je de tag <figure></figure> onder de code.

Haal nu de <p></p> tags weg en zet de tekst tussen <figcaption></figcaption> tags. Het zou er nu zo uit moeten zien:

Het figcaption element is je caption. Het kan zowel onder als boven het img element geplaatst worden.

Als je de code uitvoert, kan het zijn dat de afbeelding en tekst van plaats zijn verandert. Misschien vond je de eerdere plaats beter en wil je dit helemaal niet. Je kunt zelf CSS regels maken voor figure en de marge op 0 zetten, of andere waarden geven die jij wilt. Je kunt stijlen maken voor figure en figcaption zoals voor elk ander element, met achtergrondkleuren, randen etc.

Het figure element gedraagt zich als een soort container van jouw afbeelding en bijschrift. Je kunt ze daardoor als één eenheid gebruiken wanneer je stijlen bepaalt, door ze bij elkaar te zetten behoud je ook een goede structuur op je website.

Een andere handige container is aside (= ernaast leggen). Je gebruikt het als je extra dingen hebt die niet echt horen bij de belangrijkste informatie op een pagina. Bijvoorbeeld: de Bezienswaardigheden pagina op mij website is een lijst met plaatsen om te bezoeken. Ik wil wat aantekeningen toevoegen over het weer en vervoer. Die informatie hoort niet echt bij het article element bij alle bezienswaardigheden.

Los van het article element, voeg je één of meer <aside></aside> tags toe met daarbinnen de extra informatie.

* De aside en article containers zijn hetzelfde. Het enige verschil zit in de betekenis: dus waar gebruik je ze voor. Het is belangrijk om zinvolle html elementen te gebruiken. Het geeft je website een betere structuur en is met name handig voor mensen die je website op een mobiel scherm bekijken.

Je kunt CSS regels schrijven die aside elementen laten opvallen. Zag je het extra element span? Het is een extra tag die je kunt gebruiken om extra CSS toe te voegen! Je kunt van alles tussen span tags zetten. Het is makkelijk te gebruiken om een deel van een tekst of paragraaf aan te passen.

Op de volgende kaart leer je hoe je de layout (= opmaak) interessanter kunt maken. Ter voorbereiding maak je een pagina met één article element en twee aside elementen binnen de <main></main> tags. Je mag ook verder gaan op de Bezienswaardigheden pagina.