JS
JS Interview
Interview
HTML
Interview
Playground
⌘K
Home
JS Concepts
DSA Patterns
Interview Prep
Playground
HTML Interview Prep
100 questions across fundamentals, semantics, accessibility, forms, and modern APIs
All
Easy
Medium
Hard
All Topics
Core Fundamentals
Semantic & A11y
Forms & Media
Modern HTML & APIs
Showing
100
of 100 questions
01
What is HTML and what does it stand for?
easy
Core Fundamentals
basics
02
What is the purpose of the DOCTYPE declaration?
easy
Core Fundamentals
document-structure
03
What is the difference between block-level and inline elements?
easy
Core Fundamentals
element-types
04
What are HTML attributes? Give examples.
easy
Core Fundamentals
attributes
05
What is the purpose of the <head> element?
easy
Core Fundamentals
document-structure
06
What is the difference between <div> and <span>?
easy
Core Fundamentals
element-types
07
What are HTML entities and when would you use them?
easy
Core Fundamentals
entities
08
How do you create a hyperlink in HTML?
easy
Core Fundamentals
links
09
What is the difference between an ordered list and unordered list?
easy
Core Fundamentals
lists
10
What is the purpose of the alt attribute on images?
easy
Core Fundamentals
images
11
Explain the difference between id and class attributes.
medium
Core Fundamentals
attributes
12
What are data attributes and how do you use them?
medium
Core Fundamentals
data-attributes
13
What is the difference between <script>, <script async>, and <script defer>?
medium
Core Fundamentals
script-loading
14
How does the browser parse an HTML document?
medium
Core Fundamentals
parsing
15
What is the difference between innerHTML, textContent, and innerText?
medium
Core Fundamentals
dom-properties
16
What is the purpose of the <meta> tag? What are common meta tags?
medium
Core Fundamentals
meta-tags
17
Explain the difference between <link>, <a>, and <script> for loading resources.
medium
Core Fundamentals
resource-loading
18
What is the difference between <b>/<strong> and <i>/<em>?
medium
Core Fundamentals
text-semantics
19
What are void (self-closing) elements in HTML? Give examples.
medium
Core Fundamentals
element-types
20
What is character encoding and why is <meta charset="UTF-8"> important?
medium
Core Fundamentals
character-encoding
21
Explain how the browser's critical rendering path works with HTML.
hard
Core Fundamentals
rendering
22
What is the HTML parser's error handling behavior and how does it differ from XML?
hard
Core Fundamentals
parsing
23
What is the DOM and how does it relate to HTML?
hard
Core Fundamentals
dom
24
Explain content models in HTML5 (flow, phrasing, embedded, etc.).
hard
Core Fundamentals
content-models
25
What are the performance implications of DOM size and depth?
hard
Core Fundamentals
performance
26
How does HTML template parsing differ from regular HTML parsing?
hard
Core Fundamentals
parsing
27
What is the difference between the DOM tree and the render tree?
hard
Core Fundamentals
rendering
28
What is semantic HTML and why is it important?
easy
Semantic & A11y
semantics
29
Name five semantic HTML5 elements and their purposes.
easy
Semantic & A11y
semantic-elements
30
What are <header>, <footer>, <main>, <nav>, and <aside> used for?
easy
Semantic & A11y
landmark-elements
31
What is the role of the <article> element?
easy
Semantic & A11y
semantic-elements
32
What is the difference between <section> and <div>?
easy
Semantic & A11y
semantic-elements
33
Why is heading hierarchy (h1-h6) important?
easy
Semantic & A11y
headings
34
What does ARIA stand for and what is its purpose?
easy
Semantic & A11y
aria
35
What is the purpose of the role attribute?
easy
Semantic & A11y
aria
36
What are ARIA landmarks and how do they map to HTML5 semantic elements?
medium
Semantic & A11y
aria-landmarks
37
Explain the difference between aria-label, aria-labelledby, and aria-describedby.
medium
Semantic & A11y
aria-labels
38
What is a skip navigation link and why is it important?
medium
Semantic & A11y
navigation
39
How do screen readers interpret HTML tables?
medium
Semantic & A11y
tables-accessibility
40
What is tab order and how does tabindex affect it?
medium
Semantic & A11y
focus-management
41
What are live regions and when would you use aria-live?
medium
Semantic & A11y
live-regions
42
How do you make a custom interactive component accessible?
medium
Semantic & A11y
custom-widgets
43
What is the difference between aria-hidden="true" and display: none?
medium
Semantic & A11y
visibility
44
How should you structure a page for optimal screen reader navigation?
medium
Semantic & A11y
page-structure
45
What is the accessibility tree and how does it relate to the DOM?
medium
Semantic & A11y
accessibility-tree
46
Explain the WCAG 2.1 AA requirements relevant to HTML.
hard
Semantic & A11y
wcag
47
How do you implement accessible drag and drop?
hard
Semantic & A11y
drag-drop
48
What is the inert attribute and how does it improve accessibility?
hard
Semantic & A11y
inert
49
How do you handle focus management in single-page applications?
hard
Semantic & A11y
focus-management
50
What are the accessibility considerations for dynamic content updates?
hard
Semantic & A11y
dynamic-content
51
How do you implement an accessible modal dialog pattern?
hard
Semantic & A11y
modal-pattern
52
What is the accessibility impact of using `<iframe>` and how do you mitigate issues?
hard
Semantic & A11y
iframes
53
Explain the relationship between HTML semantics and SEO
hard
Semantic & A11y
seo
54
What are the different input types available in HTML5?
easy
Forms & Media
input-types
55
What is the purpose of the `<label>` element and how do you associate it with an input?
easy
Forms & Media
labels
56
What is the difference between the `action` and `method` attributes on a `<form>`?
easy
Forms & Media
form-attributes
57
How do you embed images in HTML and what attributes should you include?
easy
Forms & Media
images
58
What is the `<picture>` element and why is it useful?
easy
Forms & Media
responsive-images
59
How do you embed video and audio in HTML5?
easy
Forms & Media
media-elements
60
What is the purpose of the `<fieldset>` and `<legend>` elements?
easy
Forms & Media
form-grouping
61
Explain HTML5 client-side form validation attributes
medium
Forms & Media
form-validation
62
What is the constraint validation API?
medium
Forms & Media
validation-api
63
How does the `<datalist>` element work?
medium
Forms & Media
datalist
64
What is the difference between `<input type="submit">` and `<button type="submit">`?
medium
Forms & Media
buttons
65
How do you implement a responsive image strategy in HTML?
medium
Forms & Media
responsive-images
66
What is the `<canvas>` element and how does it differ from SVG?
medium
Forms & Media
canvas-vs-svg
67
What are the different ways to embed SVG in an HTML page?
medium
Forms & Media
svg
68
What is the `srcset` attribute and how does it work?
medium
Forms & Media
responsive-images
69
How do you handle file uploads in HTML forms?
medium
Forms & Media
file-upload
70
What is the `<output>` element used for?
medium
Forms & Media
form-output
71
How does the `<canvas>` element handle pixel density and retina displays?
hard
Forms & Media
canvas
72
What is the `formnovalidate` attribute and when would you use it?
hard
Forms & Media
form-validation
73
How do you implement accessible form error handling?
hard
Forms & Media
form-accessibility
74
What are the security considerations for HTML forms?
hard
Forms & Media
form-security
75
How does `<source>` element negotiation work for `<picture>`, `<video>`, and `<audio>`?
hard
Forms & Media
source-negotiation
76
What is the `capture` attribute on file inputs and how does it work on mobile?
hard
Forms & Media
file-upload
77
How do you handle cross-origin images and the `crossorigin` attribute?
hard
Forms & Media
cors
78
What are the best practices for accessible multimedia content?
hard
Forms & Media
media-accessibility
79
What is the `<dialog>` element and how do you use it?
easy
Modern HTML & APIs
dialog
80
What are the `<details>` and `<summary>` elements?
easy
Modern HTML & APIs
disclosure
81
What is the `loading="lazy"` attribute and which elements support it?
easy
Modern HTML & APIs
lazy-loading
82
What is the `<template>` element used for?
easy
Modern HTML & APIs
template
83
What is the `contenteditable` attribute?
easy
Modern HTML & APIs
contenteditable
84
What are Web Components and their main building blocks?
medium
Modern HTML & APIs
web-components
85
How does the Shadow DOM work and why is it useful?
medium
Modern HTML & APIs
shadow-dom
86
What are custom elements and how do you define them?
medium
Modern HTML & APIs
custom-elements
87
What is the `<slot>` element used for in Web Components?
medium
Modern HTML & APIs
slots
88
What is the `popover` attribute in HTML?
medium
Modern HTML & APIs
popover
89
What is the HTML Drag and Drop API?
medium
Modern HTML & APIs
drag-drop
90
How do you implement preloading and prefetching with HTML?
medium
Modern HTML & APIs
resource-hints
91
What is the `<base>` element and when would you use it?
medium
Modern HTML & APIs
base-element
92
How do `<meta>` viewport settings affect responsive design?
medium
Modern HTML & APIs
viewport
93
What is the Intersection Observer API and how does it relate to HTML?
medium
Modern HTML & APIs
intersection-observer
94
How do you implement service worker registration from HTML?
hard
Modern HTML & APIs
service-workers
95
What is Declarative Shadow DOM and why was it introduced?
hard
Modern HTML & APIs
declarative-shadow-dom
96
How does the `Content-Security-Policy` meta tag work?
hard
Modern HTML & APIs
csp
97
What are import maps and how do they change module loading?
hard
Modern HTML & APIs
import-maps
98
What is the `is` attribute for customized built-in elements?
hard
Modern HTML & APIs
custom-elements
99
How does the HTML Sanitizer API work?
hard
Modern HTML & APIs
sanitizer-api
100
What is the `blocking="render"` attribute and how does it affect page loading?
hard
Modern HTML & APIs
render-blocking