DEVPREP CODEX · #09

HTML Interview Questions

150 curated questions graded from Foundations (Easy) to Practical Patterns (Medium) and Internals & Architecture (Hard).

TOTAL QUESTIONS

150

THEORY QUESTIONS

150

IMPLEMENTATION FOLIOS

FREE QUESTIONS

5 / Level

Easy Level·50 Questions Total

Foundations & Core Concepts

Open Full Easy List

Q1What is the HTML DocType declaration, and why is it needed?

Definition: <!DOCTYPE html> is a preamble that instructs the browser about the version of HTML the page is written in.
Purpose: It prevents the browser from entering quirks mode (which emulates bugs of older browsers) and forces it to render the document in standards mode according to W3C specifications.
Syntax: In HTML5, it is extremely compact and case-insensitive: <!DOCTYPE html>.

Q2What are semantic elements, and why are they preferred over non-semantic elements?

Definition: Semantic elements clearly describe their meaning to both the browser and the developer (e.g., <header>, <article>, <nav>), whereas non-semantic elements say nothing about their content (e.g., <div>, <span>).
Benefits:
- Accessibility (a11y): Screen readers can easily build the document outline and let users jump to sections.
- SEO: Search engine web crawlers prioritize content inside relevant semantic tags.
- Maintainability: Creates a cleaner, more readable code structure for development teams.

Q3Explain the difference between block-level and inline elements.

Block-level:
- Flow: Starts on a new line and takes up the full width of its parent container.
- Box Model: Respects vertical and horizontal margin, padding, width, and height.
- Examples: <div>, <p>, <h1>-<h6>, <ul>, <article>.
Inline:
- Flow: Does not start on a new line; fits horizontally next to other inline elements.
- Box Model: Ignores width and height. Horizontal margin and padding work, but vertical ones do not affect surrounding element flow.
- Examples: <span>, <a>, <strong>, <em>, <img>.

Q4What is the difference between inline and inline-block display values?

display: inline: Elements flow inline. Custom width, height, and vertical margin/padding are ignored.
display: inline-block: Elements flow inline but behave like block-level elements. They respect custom width, height, and vertical margin/padding.

Q5What does the `alt` attribute do in an `<img>` tag, and why is it essential?

Function: Specifies an alternate text description for an image if it fails to load.
Accessibility: Screen readers read this text to visually impaired users, making the website accessible.
SEO: Search engines index the alt text to understand the image content, improving search visibility.

45 More Easy Questions Locked

Unlock the complete HTML Easy question bank

Get instant access to all 50 questions, in-depth model answers, code sandboxes, and all 27+ technologies for a single one-time payment.

Unlock All — One-time payment · Lifetime access

Medium Level·50 Questions Total

Mechanisms & Practical Patterns

Open Full Medium List

Q1What is the semantic difference between `<section>`, `<article>`, `<nav>`, `<aside>`, `<header>`, and `<footer>`?

<section>: Groups thematic content, usually with a heading. Represents a generic section of a document.
<article>: Encapsulates self-contained, independent content that could be distributed/reused standalone (e.g., blog post, forum card).
<nav>: Declares a block of major navigation links.
<aside>: Identifies auxiliary or tangent content located away from the main text flow (sidebars, callouts).
<header>: Wraps introductory content, navigational aid, or branding (logo, title, search).
<footer>: Contains footer metadata, copyright details, contact information, or sitemap links.

Q2Explain the difference between the `DOMContentLoaded` and window `load` events.

DOMContentLoaded: Fired when the HTML document is fully parsed and the DOM tree is built, without waiting for external assets like images, stylesheets, and iframes to finish loading.
load: Fired only when the entire page, including all dependent resources (images, stylesheets, subframes), is fully loaded.

Q3How does the browser parser handle rendering when it encounters a `<link rel="stylesheet">`?

HTML Parsing: Modern browsers parse HTML in parallel with fetching stylesheets; stylesheets do not block HTML parsing.
CSSOM Blocking: CSS block-renders. The browser halts visual layout and rendering until the CSSOM is constructed to prevent "Flash of Unstyled Content" (FOUC).
JS Execution: Stylesheets block JS execution because JS may query style properties that rely on the parsed CSSOM.

Q4What is the difference between a shadow DOM and the standard light DOM?

Light DOM: The standard DOM of a document. It is accessible globally via script query selectors and styled easily with global CSS rules.
Shadow DOM: A scoped, encapsulated DOM subtree attached to an element. Styles and scripts defined inside the shadow DOM do not leak out, and global styles/scripts do not penetrate in (unless configured using custom properties/shadow parts).

Q5How can you leverage preloading resource hints in HTML?

dns-prefetch: Resolves domain IP addresses early in the background to reduce DNS latency.
- <link rel="dns-prefetch" href="//example.com">
preconnect: Establishes early connection handshakes (DNS, TCP, TLS) with an external domain.
- <link rel="preconnect" href="https://example.com" crossorigin>
preload: Forces browser to download high-priority assets (fonts, hero images) immediately during initial parsing.
- <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
prefetch: Downloads low-priority assets during idle time, anticipating user navigation to other pages.
- <link rel="prefetch" href="next-page.html">

45 More Medium Questions Locked

Unlock the complete HTML Medium question bank

Get instant access to all 50 questions, in-depth model answers, code sandboxes, and all 27+ technologies for a single one-time payment.

Unlock All — One-time payment · Lifetime access

Hard Level·50 Questions Total

Internals & System Architecture

Open Full Hard List

Q1What is the Critical Rendering Path (CRP), and how does the structure of HTML impact it?

Definition: The sequence of steps the browser takes to convert HTML, CSS, and JS into pixels on the screen: DOM -> CSSOM -> Render Tree -> Layout -> Paint -> Composite.
HTML Impact:
- The DOM is constructed incrementally. The browser can parse and build the DOM node-by-node.
- CSS is render-blocking. If <link> tags are placed at the bottom, rendering is delayed or causes Flash of Unstyled Content (FOUC).
- Scripts are parser-blocking. A standard <script> halts HTML tokenization immediately to fetch and execute, delaying DOM completion.

Q2Detail the lifecycle phases of a custom Web Component.

constructor(): Instantiated. Used for initializing state, templates, and shadow DOM. No DOM manipulations or attribute reading should happen here.
connectedCallback(): Invoked when the element is appended to the document DOM. Used for setups, listeners, and rendering.
disconnectedCallback(): Invoked when the element is removed from the DOM. Used for cleanups (removing event listeners, intervals).
attributeChangedCallback(name, oldVal, newVal): Invoked when an observed attribute is added, removed, or updated. Requires declaring observed properties in static get observedAttributes().
adoptedCallback(): Invoked when the element is moved to a new document (e.g., inside an iframe).

Q3Explain the relationship between HTML accessibility trees, DOM trees, and ARIA Live Regions.

A11y Tree: A subset of the DOM tree constructed by browsers containing elements, states, roles, and properties parsed specifically for assistive technologies (screen readers).
Aria Live Regions: Configured via aria-live. Instructs screen readers to announce dynamic content changes immediately without requiring manual user focus.
- aria-live="polite": Screen reader waits until current announcement/action is completed before speaking changes.
- aria-live="assertive": Interrupts any active speech immediately to announce changes.

Q4Detail how iframes are secured using `sandbox` and `allow` attributes.

sandbox: Restricts capabilities of the iframe. By default, <iframe sandbox> enforces maximum security (blocks scripts, forms, popups, same-origin storage). Specific clearances are declared explicitly (e.g., sandbox="allow-scripts allow-forms").
allow (Feature Policy): Restricts hardware/browser features inside the iframe (e.g., allow="camera; microphone; geolocation").

Q5How do HTML5 Server-Sent Events (SSE) via the `EventSource` API work, and how do they compare to WebSockets?

SSE: Establishing a persistent, unidirectional HTTP connection from server to client using the standard EventSource API. Server streams text/event-stream content.
Comparison:
- Direction: SSE is unidirectional (server -> client); WebSockets are bidirectional (client <-> server).
- Protocol: SSE uses standard HTTP; WebSockets require a custom TCP protocol handshake (ws:// / wss://).
- Reconnection: SSE features automatic reconnection built-in; WebSockets require custom JavaScript retry logic.