Top 50 HTML-interviewvragen en antwoorden (2026)
Emma Davis
Bereid je je voor op een HTML-interview? Denk goed na over de vragen die je kunt krijgen. Deze interviews zijn belangrijk omdat ze technische diepgang, probleemoplossende benaderingen en praktische toepassing van essentiële webontwikkelingsconcepten onthullen.
Er zijn mogelijkheden in HTML-functies in alle domeinen, van starters tot senior professionals met 5 of 10 jaar werkervaring. Werkgevers beoordelen technische expertise, domeinexpertise en analysevaardigheden door middel van vragen en antwoorden. Ruime professionele ervaring, ervaring op root-niveau en een veelzijdige vaardighedenset helpen kandidaten bij het oplossen van zowel basis-, gevorderde als technische uitdagingen.
Onze analyse is gebaseerd op feedback van meer dan 60 technische leiders, inzichten van meer dan 45 managers en gesprekken met meer dan 100 professionals. Samen benadrukken deze perspectieven uiteenlopende verwachtingen en veranderende behoeften binnen de sector.
Top HTML-interviewvragen en -antwoorden
1) Wat is HTML en waarom wordt het beschouwd als de ruggengraat van webontwikkeling?
HyperText Markup Language (HTML) is de basistaal van het web, ontworpen om documenten te structureren en betekenis te geven aan webcontent. Het definieert elementen zoals koppen, alinea's, links, afbeeldingen en multimedia, waardoor browsers deze kunnen interpreteren en weergeven. De reden dat het de ruggengraat van webontwikkeling wordt genoemd, is dat elke webpagina, ongeacht de complexiteit, HTML gebruikt om de lay-out en inhoud te definiëren. Zonder HTML zouden technologieën zoals CSS en JavaHet script zou geen basis hebben om te stylen of te manipuleren.
👉 Gratis PDF-download: HTML-interviewvragen
2) Leg het verschil tussen HTML en HTML5 uit met voorbeelden.
HTML is de standaard opmaaktaal, terwijl HTML5 de moderne, krachtigere versie is die in 2014 werd geïntroduceerd. HTML5 bracht semantische elementen, multimedia-ondersteuning en API's met zich mee die de noodzaak voor plug-ins van derden, zoals Flash, wegnamen.
| Kenmerk | HTML | HTML5 |
|---|---|---|
| Documenttype | Lang en complex | Eenvoudig: |
| Multimedia | Heeft plug-ins nodig | , |
| grafiek | Niet native ondersteund | , |
| Formulieren | Beperkte inputs | Nieuwe inputs zoals email, date |
| Semantische tags | Vertrouwd op | , , |
Voorbeeld:
<video controls> <source src="sample.mp4" type="video/mp4"> </video>
3) Hoe is de basisstructuur van een HTML-document opgebouwd?
Elk HTML-document volgt een gedefinieerde structuur om ervoor te zorgen dat browsers de inhoud correct interpreteren. Bovenaan staat de declaratie die het gebruik van HTML5 specificeert. De element omvat de gehele inhoud, verdeeld in En . De Bevat metadata, titel, links naar CSS en scripts, terwijl de zichtbare inhoud wordt weergegeven. Bijvoorbeeld:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sample Page</title> </head> <body> <h1>Hello World</h1> </body> </html>
4) Wat zijn tags en elementen in HTML? Geef voorbeelden.
Tags zijn trefwoorden tussen punthaken die de browser instrueren hoe de inhoud moet worden weergegeven. Een element verwijst echter naar de volledige structuur bestaande uit de openingstag, de inhoud en de sluitingstag. Bijvoorbeeld:
- Label: En
- Element: Dit is een alinea
Sommige elementen zijn zelfsluitend, zoals En , wat betekent dat ze geen afsluittags nodig hebben.
5) Welke soorten lijsten worden ondersteund in HTML en waar worden ze gebruikt?
HTML-ondersteuning drie hoofdtypen lijsten:
- Geordende lijst ( ) – items worden weergegeven met cijfers of letters.
- Ongeordende lijst ( ) – items worden weergegeven met opsommingstekens.
- Descriptionenlijst ( ) – gebruikt voor termen en hun definities.
Voorbeeld:
<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> </dl>
Lijsten worden vaak gebruikt voor navigatiemenu's, de organisatie van inhoud en voor begrippen in de verklarende woordenlijst.
6) Hoe worden attributen gebruikt in HTML en wat zijn veelvoorkomende voorbeelden?
Attributen geven extra informatie aan HTML-elementen. Ze worden altijd gespecificeerd binnen de openingstag en volgen een naam-waardepaar. Veelvoorkomende voorbeelden zijn:
srcin voor afbeeldinglocatie.hrefvoor hyperlinkbestemming.idenclassvoor styling en JavaScripttargeting.altin afbeeldingen voor toegankelijkheid.
Bijvoorbeeld:
<img src="logo.png" alt="Company Logo">
7) Wat zijn semantische HTML-elementen en welke voordelen bieden ze?
Semantische elementen beschrijven hun betekenis duidelijk voor zowel ontwikkelaars als browsers. Voorbeelden hiervan zijn: , , , , En .
Voordelen:
- Verbeter de toegankelijkheid voor schermlezers.
- Zorg ervoor dat zoekmachines een duidelijkere betekenis van uw content krijgen (SEO).
- Verbeter de leesbaarheid en het onderhoud van code.
Voorbeeld:
<article> <h2>News Update</h2> <p>Latest update about web development trends.</p> </article>
8) Leg het verschil uit tussen blok- en inline-elementen, met voorbeelden.
Elementen op blokniveau, zoals , , En , nemen de volledige breedte van hun container in beslag en beginnen op een nieuwe regel. Inline-elementen, zoals , , en , nemen alleen zoveel breedte in beslag als hun inhoud nodig heeft.
| Type | Voorbeelden | Kenmerken |
|---|---|---|
| Blokniveau | , | Begin op een nieuwe regel, volledige breedte |
| In lijn | , | Stroom binnen de tekst, breedte is afhankelijk van de inhoud |
9) Hoe worden hyperlinks gemaakt en wat is het verschil tussen absolute en relatieve hyperlinks? URLs?
Hyperlinks worden gemaakt met behulp van de tag met de href attribuut.
- absoluut URL: Bevat het volledige pad, inclusief protocol en domein.
Voorbeeld:<a href="https://example.com/page.html">Visit</a> - Relatief URL: Verwijst naar een bestand relatief aan de huidige pagina.
Voorbeeld:<a href="/nl/about.html">About Us</a>
absoluut URLBij het linken naar externe bronnen hebben s de voorkeur, terwijl relatieve URLs zijn efficiënt binnen dezelfde website.
10) Wat is de rol van de tag en zijn attributen?
De De tag wordt gebruikt om gebruikersinvoer te verzamelen en naar een server te sturen. De twee belangrijkste kenmerken zijn:
- actie – definieert waar de gegevens naartoe worden verzonden.
- methode – specificeert de HTTP-methode (
GETorPOST).
Voorbeeld:
<form action="/nl/submit" method="post"> <input type="text" name="username"> <input type="submit"> </form>
11) Welke verschillende typen invoervelden zijn beschikbaar in HTML5-formulieren?
HTML5 heeft nieuwe invoertypen geïntroduceerd om de bruikbaarheid te verbeteren en de afhankelijkheid van JavaScriptvalidatie. Veelvoorkomende typen zijn:
- Tekstgebaseerd: tekst, wachtwoord, e-mail, url, zoeken, tel.
- Datum- en tijdgebaseerd: datum, datumtijd-lokaal, maand, week, tijd.
- Numeriek: aantal, bereik.
- Booleaans: selectievakje, radio.
- Bestand en kleur: bestand, kleur.
Voorbeeld:
<input type="email" placeholder="Enter your email"> <input type="date"> <input type="range" min="1" max="10">
Met deze invoertypen kunnen browsers geoptimaliseerde gebruikersinterface-elementen weergeven, zoals kalenders voor datums of kleurkiezers. Hierdoor wordt de gebruikerservaring verbeterd en worden formulierfouten verminderd.
12) Hoe werken HTML5-semantische tags zoals , , , En verschillen in gebruik?
Semantische tags werden geïntroduceerd om generieke tags te vervangen elementen en geven betekenis aan de paginastructuur.
| Dag | Doel | Voorbeeld |
|---|---|---|
| Bovenste gedeelte, vaak met logo's/navigatie | Site navigatie | |
| Onderste gedeelte, copyright of links | Pagina ondertekst | |
| Logische groepping van gerelateerde inhoud | Blog sectie | |
| Onafhankelijke content die op zichzelf kan staan | Nieuwsartikel |
Voorbeeld:
<article> <header><h2>Breaking News</h2></header> <p>Details of the story...</p> <footer>Author: John Doe</footer> </article>
Door deze elementen te gebruiken, verbetert u de SEO en toegankelijkheid.
13) Leg het verschil uit tussen inline CSS, interne CSS en externe CSS.
Er zijn drie primaire manieren om CSS op HTML toe te passen:
- Inline CSS: Direct op elementen aangebracht met behulp van de
styleattribuut.
Voorbeeld:<p style="color:red;">Text</p> - Interne CSS: Binnen verklaard tags in the .
- Externe CSS: Verbonden via een
.cssbestand met behulp van .
| Methode | Voordelen | Nadelen |
|---|---|---|
| In lijn | Snel, specifiek | Moeilijk te onderhouden, niet herbruikbaar |
| Intern | Goed voor één pagina | Niet herbruikbaar op meerdere pagina's |
| Extern | Herbruikbaar, schoon | Vereist extra bestandsbelasting |
De beste praktijk is om te gebruiken externe CSS voor onderhoudbaarheid.
14) Wat zijn HTML-entiteiten en waarom worden ze gebruikt?
HTML-entiteiten zijn speciale codes die worden gebruikt om gereserveerde tekens, symbolen of onzichtbare tekens in HTML-documenten weer te geven. Ze zorgen ervoor dat tekens zoals <, > en & correct worden weergegeven in plaats van dat ze als code worden geïnterpreteerd.
Voorbeelden van veelvoorkomende entiteiten:
- < →
- > → >
- & → &
- © → ©
- → vaste spatie
Bijvoorbeeld:
<p>Use <strong> instead of <b>.</p>
Entiteiten zijn cruciaal voor het behoud van de leesbaarheid van code en het voorkomen van weergaveproblemen.
15) Hoe doe je dat? werken elementen, en wat zijn hun voor- en nadelen?
De Met deze tag kun je een HTML-pagina in een andere insluiten. Hij wordt vaak gebruikt voor het insluiten van video's, kaarten of externe widgets.
Voordelen:
- Eenvoudige integratie van externe content zoals YouTube or Google Maps.
- Scheiding van inhoud van de hoofdpagina.
Nadelen:
- Langzamere laadprestaties vanwege extra verzoeken.
- Beveiligingsrisico's (clickjacking, cross-site scripting).
- Niet altijd SEO-vriendelijk.
Voorbeeld:
<iframe src="https://www.example.com" width="600" height="400"></iframe>
Moderne alternatieven bevelen vaak API's of insluitmethoden aan met betere controle en beveiliging.
16) Wat zijn metatags in HTML en welke invloed hebben ze op SEO?
Metatags zijn stukjes informatie die in de gedeelte van een HTML-document. Ze bieden metadata over de pagina, maar worden niet aan gebruikers getoond.
Belangrijkste soorten metatags:
- Description:
- Trefwoorden (verouderd):
- Viewport (responsief ontwerp):
- Tekenset:
Zoekmachines gebruiken metagegevens om fragmenten in zoekresultaten te genereren, wat direct van invloed is click-through rate (CTR).
17) Wat is het verschil tussen absolute, relatieve en root-relatieve paden in HTML-koppelingen?
Links kunnen op drie verschillende manieren worden geschreven, afhankelijk van padverwijzingen.
| Type | Voorbeeld | Use Case |
|---|---|---|
| absoluut | https://example.com/images/pic.jpg | Externe bronnen |
| Relatief | afbeeldingen/pic.jpg | Dezelfde map of submap |
| Wortel-relatief | /assets/afbeeldingen/pic.jpg | Van domein root |
Absolute paden garanderen het ophalen van bronnen, maar verminderen de overdraagbaarheid. Relatieve paden maken het verplaatsen van content gemakkelijker, terwijl root-relatieve paden consistentie binnen grote sites garanderen.
18) Hoe werken HTML5 API's zoals Geolocatie, Webopslag en Canvas functionaliteit verbeteren?
Met HTML5 zijn API's geïntroduceerd die de mogelijkheden van webapplicaties uitbreiden zonder dat er plug-ins nodig zijn.
- Geolocatie API: Haalt de locatie van de gebruiker op (met toestemming).
- Webopslag-API: Biedt
localStorageensessionStoragevoor het opslaan van sleutel-waardegegevens tot 10 MB. - CanvaAPI: Hiermee kunt u vormen, afbeeldingen en animaties rechtstreeks op een webpagina tekenen.
Voorbeeld: lokale opslag
localStorage.setItem("user", "John");
alert(localStorage.getItem("user"));
Deze API's verbeteren de interactiviteit en prestaties in moderne applicaties.
19) Leg de voor- en nadelen uit van het gebruik van de element voor lay-outontwerp.
Vroeger werden tabellen gebruikt voor pagina-indelingen, maar tegenwoordig wordt het gebruik ervan afgeraden.
Voordelen:
- Biedt structuur voor tabelgegevens.
- Ondersteund door alle browsers.
Nadelen:
- Slechte toegankelijkheid voor schermlezers bij verkeerd gebruik.
- Vertraagt het weergeven van de pagina.
- Moeilijker te onderhouden vergeleken met CSS-layoutsystemen zoals Flexbox en Grid.
Beste oefening: Gebruik strikt voor tabelgegevens (bijv. schema's, productvergelijkingen) en CSS voor lay-out.
20) Kunnen meerdere CSS-klassen op één HTML-element worden toegepast? Hoe wordt dit gedaan?
Ja, HTML maakt het mogelijk om meerdere CSS-klassen op één element toe te passen door ze te scheiden met spaties in de class attribuut. Deze techniek maakt modulaire, herbruikbare stijlen mogelijk en voorkomt duplicatie.
Voorbeeld:
<p class="text-bold text-red highlight">Important Notice</p>
Hier, de element erft stijlen van alle drie de klassen. Deze aanpak ondersteunt composabiliteitwaardoor ontwerpen schaalbaarder en eenvoudiger te onderhouden zijn.
21) Wat is het verschil tussen en in HTML?
Beide en zijn generieke containers, maar ze dienen verschillende doeleinden.
- is een element op blokniveau dat wordt gebruikt om grotere delen van inhoud of lay-outstructuren te groeperen.
- is een inline-element dat wordt gebruikt voor styling of groepering.ping kleine tekstfragmenten.
| Kenmerk | ||
|---|---|---|
| Scherm | Blokniveau | In lijn |
| Gebruik | Indeling, containers | Tekst markeren |
| Voorbeeld | Wikkelping secties | Stijlwoorden |
Voorbeeld:
<div class="container"> <p>This is a <span class="highlight">highlighted</span> word.</p> </div>
22) Hoe werkt de elementwerk, en waar wordt het gebruikt?
De element in HTML5 biedt een resolutieafhankelijk, bitmapgebaseerd tekenoppervlak. Het wordt gebruikt voor het renderen van afbeeldingen, animaties, diagrammen en zelfs eenvoudige games rechtstreeks in de browser. JavaScript-API's zoals getContext("2d") stellen ontwikkelaars in staat om vormen, paden, afbeeldingen en tekst te tekenen.
Voorbeeld:
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 50);
</script>
Toepassingen zijn onder meer dashboards, realtime visualisaties en interactieve animaties.
23) Leg het verschil uit tussen id en class kenmerken in HTML.
Beiden id en class zijn attributen die worden gebruikt voor styling en JavaScripttargeting, maar ze verschillen in uniciteit en toepassing.
| Kenmerk | Kenmerken | Voorbeeld |
|---|---|---|
| id | Moet uniek zijn in een document; wordt gebruikt voor één enkel element. | |
| klasse | Kan op meerdere elementen worden toegepast; maakt groepering mogelijk.ping. |
Voorbeeldgebruik:
<div id="main-header">Welcome</div> <p class="text-highlight">Hello</p>
Beste praktijk: Gebruik id voor unieke identificatiegegevens, en class voor herbruikbare stylinggroepen.
24) Wat zijn data-* attributen in HTML5 en wat zijn hun voordelen?
De data-* Met attributen kunnen ontwikkelaars aangepaste gegevens rechtstreeks in HTML-elementen opslaan. Deze attributen worden voorafgegaan door data- gevolgd door een naam, waardoor ze toegankelijk zijn via JavaScript.
Voordelen:
- Maak lichte opslag van metadata mogelijk zonder dat dit gevolgen heeft voor de DOM.
- Handig voor dynamische toepassingen, tooltips en client-side verwerking.
Voorbeeld:
<button data-user="123" data-role="admin">Edit User</button>
<script>
let btn = document.querySelector("button");
console.log(btn.dataset.user); // 123
</script>
Deze functie bevordert de flexibiliteit bij het beheren van status- en dynamisch gedrag.
25) Hoe wordt toegankelijkheid in HTML gewaarborgd met behulp van ARIA-rollen en -attributen?
Toegankelijkheid in HTML zorgt ervoor dat webapplicaties bruikbaar zijn voor mensen met een beperking. ARIA-rollen en -kenmerken (Accessible Rich Internet Applications) bieden extra context voor ondersteunende technologieën.
Voorbeelden van ARIA-kenmerken:
- role=”navigation” – definieert navigatiemenu’s.
- aria-label=”Sluiten” – biedt beschrijvende labels.
- aria-hidden=”true” – verbergt elementen voor schermlezers.
Voorbeeld:
<button aria-label="Close window">X</button>
Door semantische HTML te combineren met ARIA-kenmerken verbeteren ontwikkelaars de inclusiviteit en voldoen ze aan toegankelijkheidsnormen zoals WCAG.
26) Wat is het verschil tussen inline-, block- en inline-block-elementen?
HTML-elementen worden gecategoriseerd op basis van hun weergavegedrag.
| Type | Kenmerken | Voorbeelden |
|---|---|---|
| In lijn | Begin niet op een nieuwe regel, maar slechts zo breed als de inhoud. | , |
| Block | Neem de volledige breedte in beslag en begin op een nieuwe regel. | , |
| Inline-blok | Gedraagt zich als inline, maar staat blokeigenschappen toe (hoogte, breedte). | , gestyled |
Voorbeeld:
<span>Inline</span> <div>Block</div> <span style="display:inline-block; width:100px;">Inline-block</span>
27) Hoe optimaliseer je afbeeldingen in HTML voor betere prestaties?
Het optimaliseren van afbeeldingen verkort de laadtijd van pagina's en verbetert de SEO. Strategieën omvatten:
- Door gebruik te maken van moderne formaten zoals WebP or AVIF.
- Responsieve afbeeldingen toepassen met En
srcset. - Instellen van breedte- en hoogtekenmerken om verschuivingen van de lay-out te voorkomen.
- Afbeeldingen comprimeren vóór het uploaden.
- Lazy-loading met behulp van
loading="lazy".
Voorbeeld:
<img src="image.webp" alt="Optimized Image" loading="lazy">
Goed geoptimaliseerde afbeeldingen verbeteren de gebruikerservaring en verbeteren de Core Web Vitals-scores.
28) Wat is de levenscyclus van een HTML-pagina in de browser?
De levenscyclus van een HTML-pagina bestaat uit verschillende stappen:
- ontleden: De browser leest HTML en construeert het Document Object Model (DOM).
- Bronnen laden: Gekoppelde CSS, JS en afbeeldingen worden opgehaald.
- Rendering: Browser past stijlen en lay-outelementen toe.
- Scripting: JavaHet script voert de DOM uit en manipuleert deze indien nodig.
- interactie: Gebeurtenissen zoals klikken en scrollen worden verwerkt.
Door deze levenscyclus te begrijpen, kunnen ontwikkelaars hun processen optimaliseren rendersnelheid, minimaliseer blokkerende scripts en zorg voor een efficiënte paginalading.
29) Wat zijn de voor- en nadelen van het gebruik van semantische HTML?
Semantische HTML verbetert de betekenis en toegankelijkheid van webpagina's, maar kent ook aandachtspunten.
| Voordelen | Nadelen |
|---|---|
| Verbetert de toegankelijkheid voor schermlezers. | Vereist het leren van nieuwe tags. |
| Verbetert SEO door de structuur te verduidelijken. | Kan de initiële ontwikkelingstijd verlengen. |
| Code is gemakkelijker te lezen en te onderhouden. | Oudere browsers bieden mogelijk beperkte ondersteuning. |
Over het geheel genomen zijn de voordelen groter dan de nadelen, waardoor semantische HTML een best practice is in moderne ontwikkeling.
30) Hoe is de element gebruikt voor responsieve afbeeldingen?
De Met dit element kunnen ontwikkelaars meerdere afbeeldingsbronnen aanbieden voor verschillende apparaten of schermresoluties. Het maakt gebruik van geneste elementen met attributen zoals media en type.
Voorbeeld:
<picture> <source srcset="image-large.webp" media="(min-width: 800px)"> <source srcset="image-small.webp" media="(max-width: 799px)"> <img src="fallback.jpg" alt="Responsive Image"> </picture>
Dit zorgt ervoor dat mobiele apparaten kleinere afbeeldingen laden, terwijl desktops afbeeldingen met een hoge resolutie ontvangen, waardoor de weergave wordt verbeterd. Prestaties en responsiviteit.
31) Wat zijn de verschillende manieren om audio in HTML5 in te sluiten?
HTML5 biedt de element, waardoor externe plug-ins overbodig zijn. Het ondersteunt meerdere formaten zoals MP3, OGG en WAV om compatibiliteit tussen browsers te garanderen. Ontwikkelaars kunnen meerdere bronnen specificeren binnen de element, waardoor de browser het eerst ondersteunde formaat kan kiezen.
Voorbeeld:
<audio controls> <source src="sound.mp3" type="audio/mpeg"> <source src="sound.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>
De voordelen omvatten native bedieningselementen, automatisch afspelen en meer.pingen toegankelijkheid met ondertiteling viatrack>.
32) Hoe werkt de tagwerk, en wat zijn de voordelen ervan?
De element maakt het mogelijk om video's in te sluiten zonder externe spelers. Ondersteunde formaten zijn onder andere MP4 (H.264), WebM en Ogg. Ontwikkelaars kunnen meerdere bronnen en attributen toevoegen, zoals controls, autoplay, loopen poster.
Voorbeeld:
<video controls width="600" poster="thumbnail.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>
Voordelen:
- Maakt Flash minder afhankelijk.
- Biedt ingebouwde toegankelijkheid met ondertiteling.
- Biedt betere prestaties en beveiliging.
33) Wat zijn de voor- en nadelen van het gebruik van HTML-formulieren?
Formulieren zijn essentieel voor gebruikersinvoer, maar hebben zowel hun sterke als zwakke punten.
| Voordelen | Nadelen |
|---|---|
| Gestandaardiseerd en ondersteund door alle browsers. | Kwetsbaar voor beveiligingsrisico's (bijv. XSS, CSRF). |
| Eenvoudige integratie met backendservers. | Slecht ontworpen formulieren verminderen de bruikbaarheid. |
| Ondersteunt validatie en meerdere invoertypen. | Vereist HTTPS voor veilige gegevensverwerking. |
Aanbevolen werkwijze: Gebruik semantische formuliertags, client- en server-side validatie en veilige transmissiemethoden.
34) Wat is het verschil tussen client-side formuliervalidatie en server-side validatie?
Client-side validatie wordt uitgevoerd in de browser met behulp van HTML5-kenmerken ( required, pattern ) Of JavaScript. Geeft directe feedback, maar kan worden omzeild.
Server-side validatie vindt plaats nadat de gegevens naar de server zijn verzonden, waardoor de beveiliging en juistheid ervan worden gewaarborgd.
| Aspect | Kant van de cliënt | Server-kant |
|---|---|---|
| Snelheid | Onmiddellijke feedback | Langzamer, na indiening |
| Security | Kan worden omzeild | Veiliger |
| Voorbeeld | PHP, Node.js-validatie |
De beste manier om beide methoden te combineren is voor optimale bruikbaarheid en veiligheid.
35) Wat is het doel van de viewport metatag in responsief ontwerp?
De viewport De metatag zorgt ervoor dat webpagina's correct worden weergegeven op mobiele apparaten. Veel mobiele browsers verkleinen desktoppagina's standaard. De viewporttag biedt controle over de schaal en breedte.
Voorbeeld:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Voordelen:
- Zorgt voor responsieve lay-outs.
- Voorkomt zoomproblemen.
- Verbetert Core Web Vitals en bruikbaarheid op kleine schermen.
Zonder deze functionaliteit kunnen websites op mobiele apparaten klein en onbruikbaar lijken.
36) Hoe doe je dat? En elementen HTML5-toepassingen verbeteren?
: Biedt een native manier om modale pop-ups te creëren. Deze kan geopend of gesloten worden via JavaScriptie ( show() en close() ).
: Definieert herbruikbare HTML-fragmenten die pas worden weergegeven nadat ze zijn geactiveerd door JavaScript.
Voorbeeld:
<dialog id="myDialog">Hello!</dialog> <template id="card"> <div class="card">Reusable content</div> </template>
Voordelen:
- verwijdert de afhankelijkheid van externe modale bibliotheken.
- maakt dynamische rendering mogelijk zonder de DOM te belasten.
37) Leg de verschillen uit tussen , , and .
Als scripts niet goed worden beheerd, kunnen ze de weergave van pagina's blokkeren.
| Kenmerk | Gedrag | Use Case |
|---|---|---|
| Blokkeert HTML-parsing totdat de uitvoering is voltooid. | Kleine inline-scripts | |
| Wordt asynchroon geladen en wordt direct uitgevoerd zodra het gereed is. | Analytics, advertenties | |
| Wordt asynchroon geladen en uitgevoerd na HTML-parsing. | DOM-afhankelijke scripts |
Voorbeeld:
<script src="main.js" defer></script>
gebruik async en defer verbetert de prestaties en voorkomt problemen met renderblokkering.
38) Hoe zorg je ervoor dat formulieren in HTML veilig worden verwerkt?
Voor formulierbeveiliging zijn zowel HTML-praktijken als backend-beveiligingen nodig.
Belangrijke praktijken zijn onder meer:
- Gebruik altijd HTTPS voor gegevensoverdracht.
- Valideer invoer aan zowel client- als serverzijde.
- Gebruik de
autocomplete="off"kenmerk voor gevoelige velden zoals wachtwoorden. - Toepassen
rel="noopener noreferrer"op externe vormacties. - Voorkom Cross-Site Request Forgery (CSRF) met tokens.
Voorbeeld:
<form method="post" action="/nl/secure" autocomplete="off"> <input type="password" name="pwd" required> </form>
Beveiligde formulieren bieden bescherming tegen datalekken en veelvoorkomende kwetsbaarheden.
39) Wat is het verschil tussen cookies, localStorage en sessionStorage in HTML5?
HTML5 introduceerde webopslag als alternatief voor cookies.
| Opslag type | Hefvermogen | Levensduur | Verzonden met HTTP? |
|---|---|---|---|
| Cookies | ~4KB | Tot vervaldatum | Ja |
| lokale opslag | ~5–10 MB | Blijvend totdat het is opgelost | Nee |
| sessieOpslag | ~5 MB | Totdat de browser/het tabblad gesloten is | Nee |
Voorbeeld:
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));
Webopslag verbetert de prestaties omdat gegevens niet bij elke HTTP-aanvraag worden verzonden.
40) Hoe gaat HTML om met de toegankelijkheid van afbeeldingen, formulieren en multimedia?
Toegankelijkheid zorgt voor inclusiviteit voor gebruikers met een beperking.
- Afbeeldingen: Gebruik
altkenmerken voor schermlezers. - formulieren: Voeg gekoppeld toe met
forkenmerken om invoer te beschrijven. - multimedia: Voeg ondertitels toe (track> voor video's) en transcripten.
Voorbeeld:
<img src="logo.png" alt="Company Logo"> <label for="email">Email</label> <input type="email" id="email">
Door te voldoen aan toegankelijkheidsnormen (WCAG, ARIA) worden webapplicaties beter bruikbaar en voldoen ze aan de wet.
41) Wat zijn de voordelen van het gebruik van detrack> element met multimedia?
Detrack> element wordt gebruikt binnen of tekst verstrekken tracDit verbetert de toegankelijkheid en gebruiksvriendelijkheid door bijvoorbeeld ondertitels, bijschriften of beschrijvingen toe te voegen.
Voordelen:
- Helpt gebruikers met gehoorbeperkingen.
- Verbetert SEO omdat de tekst crawlbaar is.
- Verbetert de gebruikerservaring in lawaaiige omgevingen.
Voorbeeld:
<video controls> <source src="movie.mp4" type="video/mp4"> <track src="captions.vtt" kind="subtitles" srclang="en" label="English"> </video>
Zo wordt multimediainhoud toegankelijk voor een breder publiek.
42) Hoe werkt de contenteditable attribuutwerk in HTML?
De contenteditable Met dit kenmerk kunnen gebruikers de inhoud van een element rechtstreeks in de browser bewerken, zonder externe hulpmiddelen.
Voorbeeld:
<p contenteditable="true">This paragraph is editable.</p>
Gebruik gevallen:
- Editors in de browser.
- Notitie- of CMS-achtige applicaties.
- Prototypeping interactieve functies.
Hoewel het nuttig is, moet er toch voorzichtig mee worden omgegaan. Ongecontroleerde bewerkingen kunnen namelijk beveiligingsrisico's opleveren als gegevens naar servers worden verzonden.
43) Wat is het verschil tussen progressieve verbetering en sierlijke degradatie in HTML-ontwerp?
Dit zijn twee benaderingen voor het omgaan met verschillende browsermogelijkheden.
| Aanpak | Concept | Voorbeeld |
|---|---|---|
| Progressieve verbetering | Begin met basis-HTML en voeg geavanceerde functies toe voor geschikte browsers. | Een formulier werkt met basis-HTML, maar gebruikt JavaValidatie van scripts indien beschikbaar. |
| Sierlijke degradatie | Bouw eerst geavanceerde functies en zorg voor een terugvaloptie voor oudere browsers. | Een grafiek op canvasbasis blijft een statisch beeld. |
Tegenwoordig geniet progressieve verbetering de voorkeursstrategie, omdat dit universele toegang garandeert.
44) Wat zijn microdata in HTML5 en hoe zijn ze nuttig voor SEO?
Microdata is een manier om gestructureerde data in HTML-elementen in te sluiten met behulp van attributen zoals itemscope, itemtypeen itempropZoekmachines gebruiken dit om rich snippets in de resultaten te tonen.
Voorbeeld:
<div itemscope itemtype="https://schema.org/Book"> <span itemprop="name">HTML Mastery</span> by <span itemprop="author">Jane Doe</span> </div>
Voordelen:
- Verbetert de zichtbaarheid met rich snippets.
- Biedt context aan zoekmachines.
- Verbetert de CTR in zoekresultaten.
45) Wat zijn de voor- en nadelen van het gebruik van inline frames ( )?
We hebben het erover gehad eerder besproken, maar laten we de voor- en nadelen nog eens samenvatten.
| Voordelen | Nadelen |
|---|---|
| Eenvoudige integratie van content van derden. | Vertraagt de paginaprestaties. |
| Houdt externe bronnen geïsoleerd. | Kwetsbaar voor clickjacking. |
| Handig voor het insluiten van kaarten en video's. | Niet SEO-vriendelijk, content wordt vaak genegeerd. |
De beste praktijk is om te gebruiken spaarzaam en geef de voorkeur aan API's of embeds die maatwerk en veilige integratie mogelijk maken.
46) Hoe gebruik je de En elementen in HTML5?
Deze elementen creëren opvouwbare inhoudssecties zonder JavaScript.
Voorbeeld:
<details> <summary>Click for more details</summary> <p>This text is revealed when expanded.</p> </details>
Voordelen:
- Verbetert gebruikersinteractie.
- Verbetert de toegankelijkheid (toetsenbord- en schermlezervriendelijk).
- Vermijdt afhankelijkheid van gewoonte JavaScriptoplossingen.
Dit is vooral handig voor FAQ's of progressieve openbaarmakingsinterfaces.
47) Wat zijn de belangrijkste verschillen tussen HTML en XHTML?
HTML en XHTML (Extensible HTML) zijn opmaaktalen, maar XHTML volgt strengere XML-regels.
| Kenmerk | HTML | XHTML |
|---|---|---|
| Syntaxis | Flexibel | Strikt, XML-compatibel |
| Tag sluiten | optioneel | Verplicht |
| Hoofdlettergevoeligheid | Niet hoofdlettergevoelig | Moet in kleine letters zijn |
| Foutafhandeling | Browsers zijn vergevingsgezind | Parseerfouten verstoren de weergave |
Voorbeeld: is geldig in HTML, maar moet in XHTML. Tegenwoordig heeft HTML5 XHTML grotendeels vervangen vanwege de flexibiliteit.
48) Wat zijn de verschillende typen doctypes in HTML en waarom zijn ze belangrijk?
Het doctype vertelt de browser welke versie van HTML gebruikt moet worden.
types:
- HTML5: (eenvoudig, modern).
- HTML 4.01 Strikt/Overgangs/Frameset.
- XHTML 1.0 Strikt/Overgangs/Frameset.
Het gebruik van het juiste doctype zorgt voor een consistente weergave in alle browsers. HTML5-doctype is nu de standaard.
49) Hoe verbeter je SEO met HTML-tags zoals , <meta>, en <h1>?
SEO is afhankelijk van een goede semantische structuur.
- : Definieert de paginatitel, cruciaal voor de ranking.
- : Biedt een fragment voor zoekmachines.
- Koppen ( – ): Organiseer de hiërarchie van inhoud.
- alt-attributen op afbeeldingen: Verbeter de zichtbaarheid van afbeeldingen in zoekopdrachten.
- Schema-opmaak: Biedt gestructureerde gegevens.
Voorbeeld:
<title>HTML Interview Questions</title> <meta name="description" content="Comprehensive HTML interview guide with answers."> <h1>Top HTML Questions</h1>
50) Wat zijn de verschillen tussen en in HTML?
Hoewel beide de href attribuut, hun doeleinden verschillen.
| Dag | Doel | Voorbeeld |
|---|---|---|
| Maakt hyperlinks om tussen pagina's te navigeren. | Klik hier | |
| Definieert relaties met externe bronnen, zoals CSS of pictogrammen. |
De element verschijnt nooit in de paginatekst, terwijl het klikbare tekst of afbeeldingen creëert.
🔍 Top HTML-interviewvragen met realistische scenario's en strategische antwoorden
1) Wat is het verschil tussen semantische en niet-semantische HTML-elementen en waarom is dat belangrijk?
Waar de interviewer naar op zoek is: Kennis van semantiek, toegankelijkheid, SEO en onderhoudbaarheid.
Voorbeeld antwoord:
“Semantische elementen zoals , , , En geven betekenis en structuur aan zowel browsers als ondersteunende technologieën. Ze verbeteren de toegankelijkheid door betere navigatie, helpen zoekmachines de hiërarchie van content te begrijpen en maken code beter onderhoudbaar. Niet-semantische elementen zoals en bieden geen inherente betekenis en kunnen het beste worden bewaard voor gevallen waarin geen geschikt semantisch element bestaat. Ik geef eerst prioriteit aan semantische elementen en vul ze vervolgens alleen aan met klassen of ARIA-attributen wanneer dat nodig is.”
2) Hoe zou je een complex formulier toegankelijk en gebruiksvriendelijk maken met behulp van eenvoudige HTML?
Waar de interviewer naar op zoek is: Beheersing van ingebouwde formulierbesturingselementen, labels, beperkingen en toegankelijkheidskenmerken.
Voorbeeld antwoord:
“Ik begin met de juiste associaties, gebruik passende type attributen zoals email, telen date, en voeg toe required, minen pattern voor beperkingsvalidatie. Ik groepeer gerelateerde velden met En . Ik gebruik aria-describedby om invoer te koppelen aan helptekst en foutmeldingen, en om duidelijke informatie te verstrekken placeholder tekst zonder labels te vervangen en inschakelen autocomplete tokens zoals given-name en address-line1Ik vertrouw op native validatieberichten, maar vul deze aan met toegankelijke foutenoverzichten die zich richten op het eerste ongeldige veld.”
3) Leg uit hoe u responsieve afbeeldingen met optimale prestaties zou leveren.
Waar de interviewer naar op zoek is: Praktisch gebruik van , sizes, En .
Voorbeeld antwoord:
“Ik gebruik met srcset om meerdere resoluties en een sizes kenmerk dat de daadwerkelijk gerenderde breedte van de lay-out weergeeft. Voor de art direction wikkel ik afbeeldingen in met media-geconditioneerde elementen. Ik neem altijd intrinsieke elementen op width en height om ruimte te reserveren en de lay-outverschuiving te verminderen, en ik beschouw loading="lazy" voor afbeeldingen onder de vouw. Waar van toepassing, serveer ik moderne formaten zoals AVIF of WebP met fallbacks.”
4) Een oude pagina gebruikt tabellen voor de lay-out en is niet toegankelijk. Hoe pak je het refactoren ervan aan?
Waar de interviewer naar op zoek is: Migratiestrategie, risicobeheer en testen.
Voorbeeldantwoord (gebruikt vereiste zin #1):
“In mijn vorige functie verving ik tabelgebaseerde structuren door semantische containers zoals , , En CSS Grid voor de lay-out. Ik heb de migratie in segmenten uitgevoerd om het risico te verkleinen, en de kaart te gebruiken.ping Ik heb elk tabelgebied opgedeeld in semantische secties en gevalideerd met een HTML-validator en aXe. Ik heb de juiste kopniveaus, markeringen en toetsenbordfocusvolgorde toegevoegd. Ik heb de consistentie geverifieerd met visuele regressietests en de prestaties verbeterd door afstandhouders en verouderde attributen te verwijderen.
5) Hoe defer en async op differ, and why should HTML authors care?
Waar de interviewer naar op zoek is: Inzicht in rendering- en blokkeringsgedrag.
Voorbeeld antwoord:
"async downloadt en voert een script uit zodra het beschikbaar is. Dit kan leiden tot een uitvoering die niet in de juiste volgorde verloopt. defer downloadt tijdens het parsen, maar garandeert uitvoering nadat de HTML is geparseerd, in de juiste volgorde. HTML-auteurs moeten hier rekening mee houden, omdat blokkerende scripts de eerste weergave vertragen. Ik gebruik standaard defer voor paginascripts die afhankelijk zijn van DOM-gereedheid en -reserve async voor onafhankelijke scripts zoals analyses.”
6) Beschrijf een keer dat u pixel-perfecte ontwerpverzoeken in balans bracht met semantische, toegankelijke HTML.
Waar de interviewer naar op zoek is: Samenwerking, communicatie en principiële afwegingen.
Voorbeeldantwoord (gebruikt vereiste zin #2):
"In een eerdere functie vroeg een ontwerp om geneste decoratieve wrappers die niet-semantische markup aanmoedigden. Ik stelde eerst een semantische structuur voor en bereikte vervolgens de visuele resultaten met CSS in plaats van extra elementen. Ik heb verbeteringen in de navigatie van schermlezers gedemonstreerd en de overeengekomen component-API gedocumenteerd. Het compromis behield het beoogde uiterlijk, maar behield de toegankelijkheid en onderhoudbaarheid."
7) Je ontdekt een cumulatieve lay-outverschuiving door afbeeldingen en iframes zonder afmetingen. Wat is je plan?
Waar de interviewer naar op zoek is: Praktische oplossingen voor echte prestatieproblemen.
Voorbeeldantwoord (gebruikt vereiste zin #3):
“Bij mijn vorige baan heb ik alle En elementen en toegevoegde intrinsieke width en height kenmerken die overeenkomen met de beeldverhouding van de bron. Ik heb CSS gebruikt max-width: 100% om responsief te schalen en, wanneer er sprake was van dynamische inhoud, heb ik de CSS toegepast aspect-ratio Eigenschap- of containerplaatsaanduidingen. Ik heb verbeteringen in het Prestatiepaneel en Lighthouse geverifieerd en een verminderde lay-outverschuiving bevestigd.
8) Wat zijn de beste werkwijzen voor het schrijven van toegankelijke HTML-tabellen?
Waar de interviewer naar op zoek is: Correcte structurele markering en ondersteunende technische ondersteuning.
Voorbeeld antwoord:
“Ik gebruik voor een beknopte titel, , , En voor structuur, en om headers te definiëren. Voor complexe tabellen met headers op meerdere niveaus gebruik ik headers en id attributen om cellen toe te wijzen. Ik vermijd het gebruik van tabellen voor de lay-out, zorg voor voldoende tekstcontrast voor de inhoud binnen cellen en geef indien nodig samenvattingen buiten de tabel voor context.
9) Hoe ga je om met krappe deadlines waarbij meerdere HTML-leveringen om aandacht concurreren?
Waar de interviewer naar op zoek is: Prioriteiten stellen, communicatie en kwaliteit onder druk.
Voorbeeldantwoord (gebruikt vereiste zin #4):
In mijn vorige functie sorteerde ik taken op basis van gebruikersimpact en afhankelijkheidsketens. Ik leverde de pagina's met de grootste impact en het laagste risico als eerste op, communiceerde afwegingen met belanghebbenden en stelde een definitie van 'klaar' op, inclusief validatie, toegankelijkheidscontroles en basisbudgetten voor prestaties. Ik documenteerde alle uitgestelde verbeteringen en geplande vervolgfixes om ervoor te zorgen dat de kwaliteit niet achteruitging.
10) Een single-page marketingsite moet SEO-vriendelijk zijn zonder JavaScriptafhankelijkheid. Welke HTML-strategieën pas je toe?
Waar de interviewer naar op zoek is: Vermogen om zoekmachinevriendelijke, veerkrachtige inhoud te leveren.
Voorbeeld antwoord:
“Ik zorg ervoor dat de primaire inhoud wordt weergegeven in HTML, en niet wordt ingevoegd door JavaScript. Ik gebruik een logische kophiërarchie, beschrijvend. en <meta name=”description”>, canoniek URLIk maak semantische secties. Ik markeer de inhoud met de juiste microdata of JSON-LD waar nodig, zorg voor zinvolle interne links en voeg sociale metatags toe voor previews. Ik valideer de documentstructuur en controleer de crawlbaarheid met een statische sitemap.
