HTML Interview Questions

Question 1

What is HTML5 and what's new?

Accepted Answer

HTML5 is the latest HTML version with semantic elements, native multimedia, canvas, local storage, and new form types. New features: semantic elements (header, nav, article, section, footer), audio/video tags, canvas for graphics, geolocation API, localStorage/sessionStorage, web workers, new input types (email, date, range), form validation attributes, drag and drop API.

Question 2

What are semantic HTML elements?

Accepted Answer

Semantic elements describe their meaning: header, nav, main, article, section, aside, footer — improving accessibility and SEO. Non-semantic: div, span (no meaning). Semantic: header (introductory), nav (navigation), main (primary content), article (independent content), section (thematic grouping), aside (tangential), footer, figure/figcaption. Benefits: screen readers understand structure, search engines index better.

Question 3

What is the difference between inline and block elements?

Accepted Answer

Block elements take full width and start new lines (div, p); inline elements flow within text (span, a, strong). Block: full width, stack vertically, can contain block/inline. Examples: div, p, h1-h6, ul, section. Inline: width of content, flow horizontally. Examples: span, a, strong, em, img, input. Inline-block: flows inline but accepts width/height. CSS display property can change behavior.

Question 4

What is the DOM?

Accepted Answer

The DOM (Document Object Model) is a tree API representing HTML documents that JavaScript can read and manipulate. Browser parses HTML into a tree of nodes. JavaScript accesses via document.getElementById(), querySelector(), createElement(). DOM manipulation triggers reflow and repaint. Virtual DOM (React) batches updates for performance. Shadow DOM encapsulates component styles.

Question 5

What is the difference between localStorage, sessionStorage, and cookies?

Accepted Answer

localStorage persists forever (5MB); sessionStorage clears on tab close; cookies sent with HTTP requests (4KB) and can expire. localStorage: key-value, 5-10MB, persists until cleared. sessionStorage: same but cleared on tab close. Cookies: 4KB, sent with every HTTP request, can set expiry, domain, path, Secure, HttpOnly, SameSite flags. Use cookies for auth tokens; localStorage for preferences.

Question 6

How do you make a website accessible?

Accepted Answer

Use semantic HTML, alt text, ARIA attributes, keyboard navigation, color contrast, and screen reader testing. WCAG guidelines: (1) Semantic HTML. (2) Alt text for images. (3) ARIA roles and labels. (4) Keyboard navigation. (5) Color contrast 4.5:1. (6) Focus indicators. (7) Form labels. (8) Skip navigation link. (9) Responsive design. Tools: Lighthouse, axe DevTools.

Question 7

Explain script loading: async vs defer.

Accepted Answer

Default blocks parsing; async downloads parallel and executes immediately; defer downloads parallel and executes after DOM parsing.

Question 8

What are Web Components?

Accepted Answer

Web Components are custom reusable elements using Custom Elements, Shadow DOM, and HTML Templates — framework agnostic. Custom Elements: define new HTML tags with customElements.define(). Shadow DOM: encapsulated DOM with scoped CSS. HTML Templates: template and slot elements. Lifecycle: connectedCallback, disconnectedCallback, attributeChangedCallback. Lit library simplifies development. Works with any framework.

Question 9

What is the Critical Rendering Path?

Accepted Answer

The sequence browsers use to convert HTML/CSS/JS into pixels: DOM → CSSOM → Render Tree → Layout → Paint → Composite. Optimization: minimize critical resources, reduce critical path length, minimize bytes. Inline critical CSS, defer non-critical CSS/JS, preload key resources, use font-display: swap. Tools: Lighthouse, WebPageTest.

Question 10

Your site scores poorly on Lighthouse accessibility. How do you fix it?

Accepted Answer

Audit with Lighthouse/axe, fix heading hierarchy, add alt text, ensure keyboard nav, improve color contrast, add ARIA labels. Systematic: (1) Fix heading hierarchy. (2) Add landmark elements. (3) Alt text for images. (4) Label form inputs. (5) Ensure 4.5:1 contrast. (6) Add skip nav link. (7) Test keyboard-only navigation. (8) Add ARIA labels for icon buttons. (9) Test with screen reader. Target: 100 Lighthouse score.

Free HTML Course - Learn HTML5, Semantic Elements & Web Development

What You'll Learn

Career Opportunities

Course Completion Certificate

Course Modules Overview

Introduction to HTML

HTML Text & Formatting

HTML Links & Navigation

HTML Images & Multimedia

HTML Tables & Data Display

HTML Forms & Input Elements

HTML5 Semantic Elements

HTML5 APIs & Advanced Features

HTML Accessibility & SEO

HTML Project: Portfolio Website

HTML APIs & Advanced Features

HTML Career & Modern Web

Course Curriculum

Introduction to HTML

HTML Text & Formatting

HTML Links & Navigation

HTML Images & Multimedia

HTML Tables & Data Display

HTML Forms & Input Elements

HTML5 Semantic Elements

HTML5 APIs & Advanced Features

HTML Accessibility & SEO

HTML Project: Portfolio Website

HTML APIs & Advanced Features

HTML Career & Modern Web

Your Learning Path

Beginner

Intermediate

Advanced

Tools & Technologies

VS Code

Chrome DevTools

W3C Validator

Ready to Start Learning?

Related Free Courses

CSS Course

JavaScript Course

React.js Course

PHP Course