Difficulty: Advanced
HTML5 is a major revision of the HTML standard that introduced new semantic elements, multimedia capabilities, form enhancements, JavaScript APIs, and deprecated numerous legacy elements. Released as a W3C Recommendation in 2014 and continuously updated as a living standard by WHATWG, HTML5 fundamentally changed how web applications are built. Interview questions about HTML5 test whether you understand what changed, why it changed, and how to leverage new features while maintaining backwards compatibility.
The most visible additions are the semantic structural elements: <header>, <footer>, <nav>, <main>, <article>, <section>, <aside>, <figure>, <figcaption>, <details>, <summary>, <mark>, <time>, <progress>, <meter>, and <output>. These elements replaced the common div-with-class-name patterns that dominated HTML4 development. They provide meaningful structure that benefits accessibility, SEO, and code readability. The <details>/<summary> combination is particularly noteworthy as it creates native collapsible content without JavaScript.
HTML5 introduced native multimedia elements that eliminated the need for plugins like Flash and Silverlight. The <video> element supports multiple source formats with fallback content, built-in playback controls, and a JavaScript API for custom player interfaces. The <audio> element provides the same capabilities for sound. The <canvas> element creates a drawable surface for graphics, charts, games, and image manipulation via JavaScript. The <svg> element (inline SVG) became fully supported, enabling scalable vector graphics directly in HTML. These elements collectively made rich media a first-class citizen of the web platform.
Form enhancements in HTML5 dramatically improved the user experience for data input. New input types include email, url, tel, number, range, date, time, datetime-local, color, and search. Each triggers appropriate mobile keyboards and provides built-in validation. New attributes include placeholder (hint text), required (mandatory fields), pattern (regex validation), autofocus, autocomplete, min/max/step (for numeric inputs), and the form attribute (to associate inputs with remote forms). The <datalist> element provides autocomplete suggestions, and the <output> element displays calculation results.
HTML5 also introduced powerful JavaScript APIs that transformed web capabilities. The Geolocation API accesses the user's location. Web Storage (localStorage and sessionStorage) provides client-side key-value storage. Web Workers enable background threading for heavy computation. WebSockets provide full-duplex real-time communication. The History API enables single-page application routing with pushState and popState. The Drag and Drop API provides native drag-and-drop functionality. The File API allows reading local files selected by the user. The Canvas API provides 2D drawing capabilities, and WebGL enables 3D graphics.
Several HTML4 elements were deprecated or removed in HTML5. Presentational elements like <font>, <center>, <big>, <strike>, <basefont>, and <frame>/<frameset> were removed because CSS should handle presentation. The <acronym> element was replaced by <abbr>. The <applet> element was replaced by <object> and later by <embed>. Attributes like align, bgcolor, border (on non-table elements), cellpadding, cellspacing, and valign were deprecated in favor of CSS equivalents. Understanding these deprecations and their modern replacements demonstrates knowledge of web standards evolution.
<!-- Details/Summary: Native collapsible content -->
<details>
<summary>Click to expand FAQ</summary>
<p>This content is hidden by default and revealed when the user clicks the summary. No JavaScript required.</p>
</details>
<details open>
<summary>This starts expanded</summary>
<p>The 'open' attribute makes it expanded by default.</p>
</details>
<!-- Progress: Determinate and indeterminate -->
<label for="upload">Upload progress:</label>
<progress id="upload" value="65" max="100">65%</progress>
<label for="loading">Loading:</label>
<progress id="loading">Loading...</progress>
<!-- No value = indeterminate (animated bar) -->
<!-- Meter: Scalar measurement within a known range -->
<label for="disk">Disk usage:</label>
<meter id="disk" value="0.7" min="0" max="1"
low="0.3" high="0.7" optimum="0.2">
70%
</meter>
<!-- Mark: Highlighted/relevant text -->
<p>Search results for "HTML5":</p>
<p>Learn about <mark>HTML5</mark> semantic elements and new APIs.</p>
<!-- Time: Machine-readable dates -->
<p>Published on <time datetime="2026-03-11T10:00:00Z">March 11, 2026</time></p>
<p>Duration: <time datetime="PT2H30M">2 hours 30 minutes</time></p>HTML5 added interactive elements like details/summary that work without JavaScript. Progress shows task completion, meter displays scalar measurements with color-coded ranges. Mark highlights relevant text. Time provides machine-readable dates for search engines and screen readers.
<!-- Video with multiple sources and fallback -->
<video
width="640"
height="360"
controls
poster="thumbnail.jpg"
preload="metadata"
>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
<track
kind="subtitles"
src="captions-en.vtt"
srclang="en"
label="English"
default
/>
<p>Your browser does not support HTML5 video.
<a href="video.mp4">Download the video</a>.
</p>
</video>
<!-- Audio -->
<audio controls preload="none">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
<p>Your browser does not support HTML5 audio.</p>
</audio>
<!-- Canvas for dynamic graphics -->
<canvas id="myCanvas" width="400" height="200">
Fallback text for browsers that do not support canvas.
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a rectangle
ctx.fillStyle = '#3b82f6';
ctx.fillRect(10, 10, 150, 80);
// Draw text
ctx.fillStyle = '#000';
ctx.font = '20px sans-serif';
ctx.fillText('HTML5 Canvas', 180, 55);
// Draw a circle
ctx.beginPath();
ctx.arc(320, 50, 40, 0, Math.PI * 2);
ctx.fillStyle = '#ef4444';
ctx.fill();
</script>The video element supports multiple formats via source elements, captions via track elements, and a poster image. Audio works similarly. Canvas provides a 2D drawing surface controlled entirely through JavaScript. All three include fallback content for unsupported browsers.
<form action="/api/register" method="POST">
<!-- Email: validates email format, shows email keyboard on mobile -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required
placeholder="user@example.com" />
<!-- URL: validates URL format -->
<label for="website">Website:</label>
<input type="url" id="website" name="website"
placeholder="https://example.com" />
<!-- Tel: shows phone keyboard on mobile (no validation) -->
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{10}" placeholder="1234567890" />
<!-- Number with min/max/step -->
<label for="age">Age:</label>
<input type="number" id="age" name="age"
min="18" max="120" step="1" required />
<!-- Date picker -->
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob"
min="1900-01-01" max="2010-12-31" />
<!-- Range slider -->
<label for="experience">Experience (years):</label>
<input type="range" id="experience" name="experience"
min="0" max="30" step="1" value="5" />
<output for="experience">5</output>
<!-- Color picker -->
<label for="color">Favorite Color:</label>
<input type="color" id="color" name="color" value="#3b82f6" />
<!-- Datalist for autocomplete suggestions -->
<label for="language">Programming Language:</label>
<input type="text" id="language" name="language" list="languages" />
<datalist id="languages">
<option value="JavaScript" />
<option value="Python" />
<option value="TypeScript" />
<option value="Rust" />
<option value="Go" />
</datalist>
<!-- Pattern validation with custom message -->
<label for="username">Username (letters only):</label>
<input type="text" id="username" name="username"
pattern="[A-Za-z]+"
title="Only letters allowed"
required />
<button type="submit">Register</button>
</form>
<script>
// Range slider output sync
const range = document.getElementById('experience');
const output = document.querySelector('output[for="experience"]');
range.addEventListener('input', () => {
output.textContent = range.value;
});
</script>HTML5 form inputs provide built-in validation (email, url, pattern, required, min/max), appropriate mobile keyboards (email, tel, number), and native UI widgets (date picker, color picker, range slider). The datalist element offers autocomplete suggestions for text inputs.
<!-- DEPRECATED: Presentational elements -->
<!-- <font color="red" size="5">Big red text</font> -->
<!-- <center>Centered content</center> -->
<!-- <big>Bigger text</big> -->
<!-- <strike>Strikethrough</strike> -->
<!-- <u>Underline (was purely presentational)</u> -->
<!-- MODERN REPLACEMENTS using CSS -->
<span style="color: red; font-size: 1.25rem;">Big red text</span>
<div style="text-align: center;">Centered content</div>
<span style="font-size: larger;">Bigger text</span>
<del>Deleted text (semantic: content was removed)</del>
<s>No longer accurate (semantic: content is outdated)</s>
<ins>Inserted text (semantic: content was added)</ins>
<!-- DEPRECATED: Frame-based layouts -->
<!-- <frameset cols="25%,75%">
<frame src="nav.html" />
<frame src="content.html" />
</frameset> -->
<!-- MODERN REPLACEMENT: CSS layout -->
<div style="display: grid; grid-template-columns: 1fr 3fr;">
<nav>Navigation</nav>
<main>Content</main>
</div>
<!-- DEPRECATED: <acronym> -->
<!-- <acronym title="HyperText Markup Language">HTML</acronym> -->
<!-- MODERN REPLACEMENT -->
<abbr title="HyperText Markup Language">HTML</abbr>
<!-- DEPRECATED attributes -->
<!-- <body bgcolor="#fff" text="#000"> -->
<!-- <table border="1" cellpadding="10" cellspacing="0"> -->
<!-- <img align="right" border="0"> -->
<!-- MODERN REPLACEMENTS -->
<body style="background-color: #fff; color: #000;">
<table style="border: 1px solid #ccc; border-collapse: collapse;">
<img style="float: right; border: none;" alt="Description" />HTML5 removed presentational elements because CSS should control appearance. Semantic alternatives exist: del/ins for content changes, s for outdated content, abbr for abbreviations. Frame-based layouts are replaced by CSS Grid/Flexbox. Deprecated attributes like bgcolor, cellpadding, and align are replaced by CSS properties.
HTML5 Elements, HTML5 APIs, Deprecated Elements, Backwards Compatibility, Web Components, Canvas, Web Storage