Question 1

What is HTML5 and what are its key improvements over previous versions?

Accepted Answer

HTML5 is the fifth major version of HTML, introducing semantic elements, native multimedia support (audio/video without plugins), canvas for graphics, new form input types, local storage APIs, and improved accessibility. It simplifies the DOCTYPE to <!DOCTYPE html> and provides better cross-browser compatibility and mobile support.

Question 2

What are semantic elements in HTML5 and why are they important?

Accepted Answer

Semantic elements clearly describe their meaning to both browsers and developers. Examples include

,

Question 3

What is the difference between

,

, and

?

Accepted Answer

represents self-contained, independently distributable content (blog post, news article).

groups thematically related content with a heading.

has no semantic meaning—it's a generic container for styling. Use semantic elements when content has meaning; use

only for layout/styling purposes.

Question 4

What new input types were introduced in HTML5?

Accepted Answer

HTML5 added input types: email, url, tel, number, range, date, datetime-local, month, week, time, color, and search. These provide built-in validation, appropriate mobile keyboards, and native UI controls (date pickers, color pickers). Browsers that don't support them gracefully fall back to text inputs.

Question 5

How does HTML5 form validation work?

Accepted Answer

HTML5 provides built-in client-side validation through attributes like required, pattern (regex), min, max, minlength, maxlength, and type-specific validation. Forms won't submit if validation fails, showing browser-default error messages. Use the Constraint Validation API to customize messages or implement complex validation logic.

Question 6

What is the difference between localStorage and sessionStorage?

Accepted Answer

Both store key-value pairs in the browser, but localStorage persists until explicitly cleared (survives browser restarts), while sessionStorage is cleared when the tab/window closes. Both offer ~5MB storage per origin, are synchronous, and store strings only. Neither is sent to the server like cookies.

Question 7

What is the <canvas> element used for?

Accepted Answer

The <canvas> element provides a drawable region for rendering graphics, animations, games, and data visualizations using JavaScript. It offers pixel-level control through 2D or WebGL (3D) contexts. Unlike SVG, canvas is raster-based and doesn't retain drawn objects in the DOM—it's ideal for complex, frequently-updated graphics.

Question 8

What is the difference between <canvas> and SVG?

Accepted Answer

Canvas is pixel-based (raster), drawn via JavaScript, better for complex scenes with many objects, games, and real-time graphics. SVG is vector-based, XML-defined, resolution-independent, and each element is part of the DOM (clickable, styleable with CSS). SVG is better for scalable graphics, icons, and fewer interactive elements.

Question 9

How do you embed video in HTML5?

Accepted Answer

Use the <video> element with src attribute or multiple <source> elements for format fallbacks. Common attributes include controls, autoplay, loop, muted, poster (thumbnail), width, and height. Provide MP4 (H.264) for broad compatibility, plus WebM for better compression. Include fallback text for unsupported browsers.

Question 10

What is the purpose of the <picture> element?

Accepted Answer

The <picture> element enables responsive images by specifying multiple image sources for different scenarios. Use <source> elements with media queries or type attributes to serve different images based on viewport size, resolution, or format support (WebP/AVIF). The <img> inside provides the fallback and default display.

Question 11

What are ARIA attributes and when should you use them?

Accepted Answer

ARIA (Accessible Rich Internet Applications) attributes enhance accessibility for dynamic content and custom widgets. Use aria-label for accessible names, aria-describedby for descriptions, aria-hidden to hide decorative content, and role to define element purposes. Use ARIA only when native HTML semantics are insufficient—prefer semantic HTML first.

Question 12

What is the <template> element used for?

Accepted Answer

The <template> element holds HTML content that isn't rendered when the page loads but can be cloned and inserted via JavaScript. It's ideal for client-side templating, reusable markup patterns, and dynamic content generation. Content inside <template> is inert—scripts don't run, images don't load until activated.

Question 13

How does drag and drop work in HTML5?

Accepted Answer

HTML5 provides native drag-and-drop via the draggable attribute and drag events (dragstart, drag, dragenter, dragover, dragleave, drop, dragend). Use dataTransfer object to pass data between drag source and drop target. Call preventDefault() on dragover and drop events to enable dropping on custom targets.

Question 14

What is IndexedDB and when would you use it over localStorage?

Accepted Answer

IndexedDB is a low-level browser database for storing large amounts of structured data, including files and blobs. Use it over localStorage when you need: larger storage (hundreds of MB), indexed queries, transactions, or to store non-string data. It's asynchronous and more complex but far more powerful for offline apps.

Question 15

How do you ensure backwards compatibility with older browsers?

Accepted Answer

Use feature detection (Modernizr or manual checks) rather than browser detection. Provide fallbacks: polyfills for missing APIs, alternative content inside

HTML5 Fundamentals(5 questions)

What does the "5" in HTML5 represent and what are its key evolutionary improvements?

Which new structural content elements were introduced in HTML5 and how do they enhance document semantics?

What is the purpose of the <!DOCTYPE html> declaration and how does it differ from previous DOCTYPE declarations?

How does HTML5 provide better compatibility with modern browsers and what backwards compatibility strategies are employed?

Why is HTML5 considered more semantic compared to previous HTML standards, and what are the implications for web accessibility?

Semantic Elements(4 questions)

What are the most commonly used semantic elements in HTML5 and what content do they represent?

How do elements like <section>, <article>, and <aside> differ from the traditional <div> element in terms of semantic meaning?

What is the significance of <header> and <footer> elements and how should they be properly implemented?

In which scenarios is the <main> element most appropriately used, and what are its accessibility implications?

Form Enhancements(4 questions)

What new input types were introduced in HTML5 (e.g., mobile-friendly inputs) and how do they improve user experience?

How can you implement fallback behavior for browsers that don't support specific HTML5 form features?

What is the purpose of the required attribute and how does it interact with client-side validation?

How does HTML5 handle built-in validation messages and how can they be customized?

Audio and Video(4 questions)

What are the main differences between using <audio> and <video> elements versus plugins (such as Flash)?

How can you provide fallback content for browsers that don't support HTML5 multimedia elements?

Which video formats are commonly supported by the <video> element and why is it often necessary to provide multiple source formats?

How can you customize the controls of <audio> or <video> elements without using the browser's default controls?

Canvas and Graphics(4 questions)

What is the role of the <canvas> element in HTML5 and what are its primary use cases?

How do you obtain a drawing context for the <canvas> element and what rendering contexts are available?

What are the differences between using <canvas> and <svg> for vector graphics and animations?

How can you handle user interactions (e.g., clicks, mouse movements) within a <canvas> element?

Offline Mode and Data Storage Mechanisms(4 questions)

How does the application manifest file help applications work offline in HTML5?

What are the differences between localStorage and sessionStorage, and how do they compare to traditional cookies?

How can you feature-detect whether a browser supports localStorage or sessionStorage?

In what scenarios might IndexedDB be more advantageous than localStorage?

Advanced Topics and Performance(4 questions)

How can you optimize the loading of large multimedia files in HTML5 to improve performance?

What is the purpose of the <picture> element and how does it help in creating responsive images?

How do you use the <link rel="preload"> attribute to optimize resource loading?

What performance issues might arise when using multiple <canvas> elements and how can they be mitigated?

Accessibility and Best Practices(4 questions)

How do semantic elements in HTML5 improve web accessibility?

What role do aria-* attributes play and when should they be used?

What are the best practices for creating logical navigation structure in HTML5?

How does HTML5 facilitate screen reader functionality compared to previous HTML versions?

Advanced/Tricky Questions(4 questions)

What is the purpose of the draggable attribute in HTML5 and how can you implement drag-and-drop functionality?

What is the use case for the <data> element in HTML5?

In what scenarios would you use the <template> element?

How can you ensure backwards compatibility with browsers that don't fully support HTML5 features?

What is the purpose of the `<!DOCTYPE html>` declaration and how does it differ from previous DOCTYPE declarations?

How do elements like `<section>`, `<article>`, and `<aside>` differ from the traditional `<div>` element in terms of semantic meaning?

What is the significance of `<header>` and `<footer>` elements and how should they be properly implemented?

In which scenarios is the `<main>` element most appropriately used, and what are its accessibility implications?

What is the purpose of the `required` attribute and how does it interact with client-side validation?

What are the main differences between using `<audio>` and `<video>` elements versus plugins (such as Flash)?

Which video formats are commonly supported by the `<video>` element and why is it often necessary to provide multiple source formats?

How can you customize the controls of `<audio>` or `<video>` elements without using the browser's default controls?

What is the role of the `<canvas>` element in HTML5 and what are its primary use cases?

How do you obtain a drawing context for the `<canvas>` element and what rendering contexts are available?

What are the differences between using `<canvas>` and `<svg>` for vector graphics and animations?

How can you handle user interactions (e.g., clicks, mouse movements) within a `<canvas>` element?

What are the differences between `localStorage` and `sessionStorage`, and how do they compare to traditional cookies?

How can you feature-detect whether a browser supports `localStorage` or `sessionStorage`?

In what scenarios might `IndexedDB` be more advantageous than `localStorage`?

What is the purpose of the `<picture>` element and how does it help in creating responsive images?

How do you use the `<link rel="preload">` attribute to optimize resource loading?

What performance issues might arise when using multiple `<canvas>` elements and how can they be mitigated?

What role do `aria-*` attributes play and when should they be used?

What is the purpose of the `draggable` attribute in HTML5 and how can you implement drag-and-drop functionality?

What is the use case for the `<data>` element in HTML5?

In what scenarios would you use the `<template>` element?