Aan de slag met HTML5

We werken aan het blok figure

Illustraties krijgen nu in HTML5 ook hun eigen opdracht in de vorm van <figure>. Niet iedere afbeelding is een illustratie. Een website kent ook plaatjes met andere functies, zoals een logo of icoontjes.

Bij een directe plaatsing van een afbeeding in figure staat deze afbeelding links maar dan tevens flink ingesprongen. Met <figure id=PlaatBox> staat alles weer, zoals bij mijn eerste testjes met de afbeelding binnen <div>. Na de tegenslag bij <main>, ben ik blij dat IE 11 deze opdracht wel pakt

Louis van Gorkom destijds in een park in Drachten.

De afbeelding hierboven is in een artikel over haptotantra een illustratie. Hier zou dat eerder een plaatje van de lay-out getoond in een bepaalde browser zijn. De afbeelding past goed binnen een artikel over haptotantra in de praktijk. Hierboven staat dus een illustratie. Daarbij gebruiken we dus de tag <figure>.

Helaas ontstaat er een probleem  — met de layout —  bij het gebruik van <figcaption>. De afbeelding wil dan niet centreren of de tekst in <figcaption> wil niet mooi onder het plaatje staan. Alleen een korte frase is bruikbaar! Dus verwijder ik de opdrachten uit het CSS-file. Voorlopig verschuiven we deze opdracht naar de toekomst.