HTML Basis
HTML structuur, semantiek, en elementen
Wat is HTML en waarom is het belangrijk?
HTML is de opmaaktaal van het web. Het vormt de structuur en betekenis van webpagina's.
Wat zijn semantische HTML-elementen?
Semantische elementen geven betekenis aan de inhoud.
Hoe werken heading tags (h1 tot h6)?
Headings definiëren de hiërarchie van je inhoud.
Wat is het <a> tag en hoe maak je links?
Links zijn de zenuwen van het web.
Hoe maak je HTML formulieren?
Formulieren zijn de manier waarop gebruikers data naar je server sturen.
Hoe embed je afbeeldingen met het <img> tag?
Het <img> tag laadt afbeeldingen in.
Hoe maak je tabellen met HTML?
Tabellen presenteren data in rijen en kolommen.
Wat zijn meta tags?
Meta tags geven informatie over de HTML pagina.
Hoe embed je video en audio?
HTML5 heeft native video en audio tags.
Wat zijn geordende, ongeordende en descriptie lijsten?
Lists zijn essentieel voor informatie organisatie.
HTML form validatie - required, pattern, type
Client-side validatie: gebruikers krijgen direct feedback.
Hoe maak je HTML accessible?
Accessibility = inclusiviteit voor alle gebruikers.
Verschil tussen article, section en div?
Begrijp semantische containers.
Landmark elements: header, main, footer, aside, nav
Landmarks helpen schermlezers pagina navigeren.
Wat zijn data-* attributes?
Data attributes slaan custom data op.
HTML input types: email, date, range, color
HTML5 introduceert veel handige input types.
ARIA attributes voor accessible applications
ARIA leidt screenreaders bij dynamische content.
Fieldset en optgroup - Form groepering
Betere organisatie van formulieren.
Lazy loading images - Performance optimization
Laad afbeeldingen alleen als nodig.
Picture element - Responsive images
Betere controle over responsive images.
Script loading: async, defer, module
Script loading strategy bepaalt performance.
IFrame - Embedding externe content
IFrames embedden andere pagina's.
SVG vs Raster - Wanneer welke gebruiken?
Twee afbeelding types voor verschillende doelen.
Canvas element - Draw graphics
Canvas laat je programmatisch graphics maken.
Favicon en app icons
Kleine afbeeldingen met grote impact.
XSS Prevention - HTML sanitization
Beveilig tegen cross-site scripting.
Semantic HTML is goed voor SEO
Search engines begrijpen semantic HTML beter.
Open Graph tags - Social media previews
Controleer hoe pagina op social media eruit ziet.
Microdata en schema.org - Structured data
Geef zoekmachines extra context.
Contenteditable - Make elements editable
Zet HTML elementen om in editable content.
Datalist element - Auto-complete
Bied autocomplete suggesties.
Output, meter en progress elements
Semantic data presentatie elementen.
Link rel attribute - Page relationships
Vertel zoekmachines over pagina relaties.
Hidden attribute - Hide elements
Verberg content semantisch.
Button types - submit, reset, button
Verschillende button functies.
Viewport meta tag - Mobile responsive
Essentieel voor mobile design.
Noscript element - JS disabled fallback
Wat als JavaScript uitgeschakeld is?
Template element - Reusable templates
Templates worden niet gereageerd.
HTML comments - Best practices
Comments documenten je code.
Dialog element - Native modals
HTML5 dialog element voor modals.
Web Components - Custom elements
Creëer je eigen HTML elementen.
Slot element - Content distribution
Slot elementen distribueren content.
Figure en figcaption - Semantic images
Semantic containers voor afbeeldingen.
Details en summary - Expandable content
Native accordion element.
Blockquote en cite - Semantic citations
Semantic citations en quotes.
Time element - Semantic date/time
Machine-readable date/time markup.
Abbr element - Abbreviations en acronyms
Expand abbreviations voor clarity.
Code, pre, kbd en samp - Code elements
Semantic code-related elements.
Strong, em, mark - Text emphasis
Semantic text emphasis.
WCAG Compliance - Accessibility guidelines
Maak websites echt voor iedereen.