sitemap | terug naar het html5 referentie - tags - overzicht
Dit voorbeeld van een figcaption laat niets aan de onduidelijk over. Als jouw browser figcaption (en natuurlijk ook "figure") ondersteunt, zal het resultaat zijn zoals op deze pagina zichtbaar is. Omdat o.a. de IE-browsers niet echt ondersteuning geven aan de huidige HTML5 richtlijnen is er op deze pagina een klein stukje javascript toegevoegd. Om de figcaption te laten werken moet je de code die hieronder staat bij het kopje "code voor de head-sectie" dan ook daadwerkelijk in de "head" van de pagina plaatsen. Bij het kopje "html-code voor de figcaption" staan de html-regels die in de body-sectie van de pagina geplaatst moeten worden. Het spijt me dat deze uitleg een beetje langdradig is. De reden hiervoor is dat er genoeg tekst op de pagina moet komen om de layout een beetje "netjes" te maken. Als er alléén een plaatje met een figcaption hier had gestaan, met een paar regels broncode daaronder, was het allemaal "geen gezicht" geweest. Het ziet er ook niet "mooi" uit als een kopje ergens rechts op de pagina terecht komt. De enige manier op dat op te lossen is om genoeg tekst te plaatsen om alle "ellende" te voorkomen. Nu zou ik dit ook wel kunnen oplossen door een stuk Lorem Ipsum (in plaats van deze tekst) hier te plaatsen, maar dat is een oplossing waar ik niet zo veel van houd. Langzamerhand zal er nu wel genoeg tekst in deze paragraph staan om de figcaption pagina een "goed uiterlijk" te geven. Tot slot wil ik nog even melden dat op deze pagina niet alleen figcaption wordt "behandeld"; maar ook de tag figure komt hier aan bod. Figcaption kan niet werken zonder de aanwezigheid van de figure-tag.
<!--[if IE]>
<script>
(function(){
var html5_elementen = "figcaption|figure".split('|');
for(var i = 0; i < html5_elementen.length; i++){
document.createElement(html5_elementen[i]);}})();
</script>
<![endif]-->
<style type="text/css">
figure{
float:left;margin-right:1em}
figcaption {
display:block;
text-align:center;
font-size:0.7em;
font-style:italic;
font-weight:bold;
padding:5px 0}
</style>
<figure>
<figcaption>voorbeeld figcaption</figcaption>
<img src="figcaption.jpg" width="200" height="127" />
</figure>