HTML Interview Preparation

Interview Topics Overview

Beginner Questions

Q: What does <!DOCTYPE html> do?

It declares the document type and version of HTML. In modern HTML5, it simply tells the browser to render in standards mode. Without it, the browser may switch to quirks mode, causing inconsistent rendering.

Q: What is the difference between block and inline elements?

Block elements (e.g., <div>, <p>, <h1>) start on a new line and take up the full width available. Inline elements (e.g., <span>, <a>, <strong>) flow within text and only take as much width as needed.

Q: What are void elements? Give examples.

Void elements are HTML elements that cannot have child content — they are self-closing. Examples: <br>, <hr>, <img>, <input>, <meta>, <link>.

Q: What is the difference between <div> and <span>?

<div> is a block-level container for grouping content. <span> is an inline container for styling text or small content sections. Use <div> for layout, <span> for inline text styling.

Q: How do you create a hyperlink in HTML?

<a href="https://example.com">Visit Example</a>

Use target="_blank" to open in a new tab, and rel="noopener noreferrer" for security.

Intermediate Questions

Q: What are semantic HTML elements? Why are they important?

Semantic elements clearly describe their meaning to both the browser and developer.

Semantic	Non-semantic
`<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<footer>`	`<div>`, `<span>`

Benefits: accessibility (screen readers), SEO, code readability, and consistent page structure.

Q: Explain the HTML5 structural elements.

Element	Purpose
`<header>`	Introductory content, navigation, logo
`<nav>`	Navigation links
`<main>`	Primary page content (unique per page)
`<article>`	Self-contained content (blog post, news)
`<section>`	Thematic grouping of content
`<aside>`	Side content (sidebar, pull quotes)
`<footer>`	Footer, copyright, related links

Q: What is the alt attribute and why is it important?

alt provides alternative text for images. It is critical for:

Accessibility: Screen readers describe the image to visually impaired users
Fallback: Shown when the image fails to load
SEO: Search engines index image content

<img src="chart.png" alt="Bar chart showing sales growth from 2020 to 2025">

Q: How does form validation work in HTML5?

HTML5 provides built-in validation attributes:

<form>
  <input type="email" required>
  <input type="text" minlength="3" maxlength="20" pattern="[A-Za-z]+">
  <input type="number" min="1" max="100">
  <input type="url">
</form>

Use the novalidate attribute on <form> to disable validation when using custom JavaScript validation.

Q: Explain localStorage, sessionStorage, and cookies.

Storage	Persistence	Size	Sent to server
`localStorage`	Until cleared	~5 MB	No
`sessionStorage`	Until tab closes	~5 MB	No
Cookies	Configurable	~4 KB	Yes

Advanced Questions

Q: What is the Critical Rendering Path?

The sequence of steps the browser takes to render a page:

HTML → DOM (Document Object Model)
CSS → CSSOM (CSS Object Model)
Render Tree = DOM + CSSOM combined
Layout → calculates geometry
Paint → pixels on screen

Optimization: minimize render-blocking resources, inline critical CSS, defer non-critical JS.

Q: What is the Shadow DOM?

The Shadow DOM is a web standard that encapsulates DOM and CSS — it creates a scoped subtree that is isolated from the main document. Used in Web Components to prevent style and behavior conflicts.

<my-component></my-component>
<script>
  class MyComponent extends HTMLElement {
    constructor() {
      super();
      const shadow = this.attachShadow({ mode: 'open' });
      shadow.innerHTML = `
        <style>p { color: red; }</style>
        <p>Isolated from the rest of the page!</p>
      `;
    }
  }
  customElements.define('my-component', MyComponent);
</script>

Q: What are Web Components?

Three main technologies:

Technology	Purpose
Custom Elements	Define new HTML tags
Shadow DOM	Encapsulation of styles and markup
HTML Templates	Reusable markup fragments (`<template>`)

Q: Canvas vs SVG — when to use which?

Feature	Canvas	SVG
Type	Raster (pixel-based)	Vector (shape-based)
Resolution	Depends on pixel density	Resolution-independent
Performance	Better for many objects (>1000)	Better for fewer objects
Event handling	Manual hit detection	Built-in per element
Use case	Games, image processing, charts with lots of data	Icons, logos, simple diagrams, interactive maps

Q: What is Microdata?

Microdata adds machine-readable metadata to HTML to help search engines understand content:

<div itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">John Doe</span>
  <span itemprop="jobTitle">Engineer</span>
</div>

Used by Google for rich snippets (star ratings, recipes, events, etc.).

Q: How does preload differ from prefetch?

Directive	Purpose
`rel="preload"`	Load a resource needed now (high priority)
`rel="prefetch"`	Load a resource needed next page (low priority)

<link rel="preload" href="critical-font.woff2" as="font">
<link rel="prefetch" href="next-page.html">

Q: Explain ARIA roles and when to use them.

ARIA (Accessible Rich Internet Applications) roles supplement HTML semantics for assistive technologies.

<button aria-label="Close" onclick="closeModal()">X</button>
<div role="alert">Form submission failed.</div>

Use ARIA only when native HTML semantics are insufficient. First rule: prefer native HTML elements (use <button> not <div role="button">).

Coding Challenges

Challenge 1: Build a Semantic Layout

Create a page with header, nav, main, article, aside, and footer. Ensure proper heading hierarchy (h1 → h6).

Challenge 2: Create an Accessible Form

Build a form with:

Proper <label> elements linked by for/id
Required fields with visual and screen-reader indicators
Error messages using aria-describedby
Logical tab order via tabindex (or rely on DOM order)

Challenge 3: Responsive Image Gallery

Use <picture>, srcset, and sizes to serve different image resolutions based on viewport width.

Build a <nav> with:

Skip-to-content link
Keyboard navigation support
Current page indicator with aria-current="page"
Semantic markup

Common Trick Questions

Question	Answer
Difference between `<b>` and `<strong>`?	`<b>` is visual bold only; `<strong>` implies semantic importance. Both render as bold, but screen readers emphasize `<strong>`.
Difference between `<i>` and `<em>`?	`<i>` is visual italic; `<em>` adds emphasis. Screen readers emphasize `<em>` with different intonation.
Can a `<button>` be inside an `<a>`?	No. Interactive elements cannot be nested. Use either a button or a link styled as a button.
Can you have multiple `<main>` elements?	No. There should be only one `<main>` per page.
Is `<br>` valid in HTML5?	Yes, but it should be used for line breaks within text, not for layout spacing.

HTML5-Specific Questions

New semantic elements: <header>, <footer>, <article>, <section>, <nav>, <aside>, <main>, <figure>, <figcaption>
New input types: email, url, tel, number, range, date, color, search
New attributes: placeholder, required, autofocus, autocomplete, pattern, datalist
New APIs: Geolocation, Web Storage, Canvas, Drag & Drop, Web Workers, History API

Accessibility Questions

What is WCAG? (Web Content Accessibility Guidelines — 4 principles: Perceivable, Operable, Understandable, Robust)
What is a skip link and why is it useful?
How do screen readers navigate tables?
What is color contrast and what ratio does WCAG AA require? (4.5:1 for normal text)
Explain aria-live regions and their values (off, polite, assertive)

Performance Questions

What is render-blocking CSS/JS and how do you eliminate it?
How does lazy loading work? (via loading="lazy" on <img> and <iframe>)
What is the difference between async and defer on scripts?
How does the browser's preload scanner optimize page loads?
What is Cumulative Layout Shift (CLS) and how do images cause it?

Tips for Success

Practice with real code — Write actual HTML pages, don't just memorize
Understand the "why" — Interviewers care about reasoning, not just answers
Build a project — A complete page with semantic HTML, accessible forms, and embedded media
Study the specs — MDN Web Docs is your best friend
Know your tools — DevTools, validators, lighthouse audits
Stay current — Follow WHATWG and HTML spec updates for cutting-edge questions

Best Practices — Professional HTML coding standards
Testing & Validation — Validate your HTML knowledge
Phase 9 Exercises — Practice interview-style problems

Resources

Resource	Link
MDN HTML Docs	https://developer.mozilla.org/en-US/docs/Web/HTML
HTML Living Standard	https://html.spec.whatwg.org/
Web Accessibility Initiative	https://www.w3.org/WAI/
Can I Use	https://caniuse.com/
HTML Validator	https://validator.w3.org/
Frontend Mentor (practice)	https://www.frontendmentor.io/

Interview Topics Overview​

Beginner Questions​

Intermediate Questions​

Advanced Questions​

Coding Challenges​

Challenge 1: Build a Semantic Layout​

Challenge 2: Create an Accessible Form​

Challenge 3: Responsive Image Gallery​

Challenge 4: Accessible Navigation​

Common Trick Questions​

HTML5-Specific Questions​

Accessibility Questions​

Performance Questions​

Tips for Success​

🔗 Related Topics​

Resources​