Question 1

What is the Dialog API / <dialog> element?

Accepted Answer

Native modal/non-modal dialogs with showModal, ::backdrop, and focus handling. Prefer it over custom div modals when support allows. Still verify a11y labeling and inert background.

Question 2

Explain the Details/Summary disclosure widget.

Accepted Answer

Native expandable widget without JS; summary is the toggle. Good for FAQs. Style carefully; ensure keyboard support remains. Limited animation control.

Question 3

What does the Popover API enable?

Accepted Answer

Declarative popovers with top-layer rendering, light dismiss, and invoker attributes. Simplifies menus/tooltips vs manual absolute positioning + focus traps — still check semantics.

Question 4

How does the Clipboard API differ from execCommand?

Accepted Answer

Async navigator.clipboard with permissions; execCommand is legacy/deprecated. Requires secure context. Handle permissions and failures. Don't assume paste always works.

Question 5

What is contenteditable used for, and what are risks?

Accepted Answer

In-browser rich editing; complex a11y, sanitization, and serialization risks. Prefer vetted editors. Sanitize before render to avoid XSS. Keyboard/AT support is hard.

Question 6

Explain Intersection Observer at a high level for HTML apps.

Accepted Answer

Async observation of element visibility — lazy load, infinite scroll, analytics. Avoid scroll listeners for visibility. Root margins tune prefetch. Disconnect when done.

Question 7

What is the History API used for in HTML apps?

Accepted Answer

pushState/replaceState + popstate for client routing without full reloads. Keep URLs shareable. Sync document title. Don't break back button.

Question 8

How does the Drag and Drop API work?

Accepted Answer

draggable elements fire drag events; drop targets handle dragover/drop and dataTransfer. Touch support is uneven. Provide keyboard alternatives. Prefer File drop for uploads carefully.

Question 9

What are custom elements in relation to HTML?

Accepted Answer

Define new HTML tags via Custom Elements API with lifecycle callbacks. Need hyphenated names. Shadow DOM optional for encapsulation. Progressive enhancement mindset helps.

Question 10

When would you use template and slot?

Accepted Answer

template holds inert DOM; slots project light DOM into shadow trees. Useful for Web Components. Avoid shipping unused large templates.

Question 11

How do you feature-detect HTML APIs safely?

Accepted Answer

Check property/method existence; provide fallbacks; avoid UA sniffing. Example: 'showModal' in HTMLDialogElement.prototype. Progressive enhancement first.

Question 12

Full-screen API considerations?

Accepted Answer

requestFullscreen on an element; user gesture often required; handle exit and a11y. Don't trap users. Escape should exit. Announce state changes.

Question 13

How do you choose native HTML APIs vs JS libraries for UI widgets?

Accepted Answer

Prefer native when a11y/perf/maintenance win; libraries when cross-browser gaps or complex UX demand. Evaluate support matrices, bundle cost, and design-system consistency at org level.

APIs HTML Interview Questions

Other HTML interview topics