Over HTML5 tags en containers
Webpagina's maak je met HTML5, CSS en JavaScript. Met HTML breng je structuur aan in de content van je webdocument. De opmaak wordt verzorgd door CSS. Zaken die je niet met CSS kunt oplossen regel je met JavaScript. Dat ziet er allemaal netjes gestructureerd uit.
Nu is het zo dat de functionaliteiten van deze drie componenten elkaar gedeeltelijk overlappen. Met JavaScript kun je HTML-elementen in je documenten zetten. Je kunt er ook CSS-eigenschappen mee aanpassen. Eigenlijk kunt je met JavaScript bijna alles wat je met HTML en CSS ook kunt doen. Er is echter een afwijking.
Er zijn HTML-tags die zaken regelen die eigenlijk niet geschikt zijn voor een tag:
- <audio>. Zie ook: Geluid op je website: <audio>-tag.
- <video>. Zie ook: Videofilmpjes op je website II: <video>-tag.
- <canvas>. Zie ook: Graphics op je website I: <canvas>-tag.
- <svg>. Zie ook: Graphics op je website II: <svg>-tag.
Deze tags starten complete programma's, waarvan de uitvoer in de webpagina wordt getoond. Zo start de <canvas>-tag een omgeving op waarmee je 2D- en 3D-graphics kunt maken met behulp van WebGL.
De tendens lijkt te zijn dat deze tags geen tag meer heten, maar container worden genoemd. Binnen de scope van zo'n container kun je weer tags plaatsen die specifiek zijn voor de container en die de werking van de tag beïnvloeden.
Als voorbeeld nemen we <video>. Die kun je in twee smaken tegenkomen:
<video width="320" height="240" controls sre="filmpje.mp4">
Uw browser ondersteunt de <video>-tag niet
<video>
en:
<video width="320" height="240" controls>
<source src="filmpje.mp4" type="video/mp4">
<source src="filmpje.ogg" type="video/ogg">
De <video>-tag wordt door uw browser niet ondersteund.
</video>
De eerste is een 'gewone' tag. Het film-bestand wordt genoemd in het attribuut src. Dit is compact, maar het heeft een nadeel: Als de browser niet met het MP4-formaat overweg kan, krijgt de gebruiker alleen een zwart beeld te zien.
De tweede ziet eruit als een container. In de tag is geen src-attribuut aanwezig. De <source>-tags binnen de <video>-tag hebben er wel wel een. De browser kiest nu zelf een bestand dat de browser kan vertonen.
De <source>-tag kan alleen voorkomen binnen de tags <video> en <audio>.
<audio> werkt op een met <video> vergelijkbare manier, maar dan voor geluid.
