HTML · MEDIUM CODEX
HTML Interview Questions — Medium
Real-world mechanisms, state management, edge cases, performance trade-offs, and practical coding.
50 Theory Questions5 Free Model Answers
THEORY QUESTIONS & SOLUTIONSShowing 5 of 50 questions
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">
Unlock the remaining 45 HTML (Medium) questions
You've completed the 5 free sample questions. Get unrestricted lifetime access to every question, model answer, implementation challenge, and all 27+ technologies for a single payment.
₹399 India / $9 International · One-time settlement · Zero subscription