What are the building blocks of HTML5?

HTML

The short answer

HTML5 introduced semantic elements (like <header>, <nav>, <main>, <article>), new form input types, multimedia elements (<video>, <audio>), the Canvas API for drawing, new JavaScript APIs (Geolocation, localStorage, Web Workers), and improved accessibility. It was a major upgrade from HTML4 that shaped how we build websites today.

Semantic elements

HTML5 added elements with meaningful names that describe their content:

<header>Site header</header>
<nav>Navigation links</nav>
<main>
  <article>
    <h1>Article Title</h1>
    <section>Article content</section>
  </article>
  <aside>Related links</aside>
</main>
<footer>Site footer</footer>

These replaced <div id="header">, <div id="nav">, etc. They help screen readers understand the page structure and improve SEO.

New form features

<input type="email" required />
<input type="date" />
<input type="range" min="0" max="100" />
<input type="color" />
<input type="search" />
<input type="url" />
<input type="tel" />

These provide built-in validation and mobile-friendly keyboards (email inputs show the @ key, tel inputs show the number pad).

Multimedia

<video src="video.mp4" controls>
  Your browser does not support video.
</video>
<audio src="song.mp3" controls>
  Your browser does not support audio.
</audio>

Before HTML5, embedding video and audio required Flash or third-party plugins.

Canvas

<canvas id="myCanvas" width="400" height="300"></canvas>
const ctx = document
  .getElementById('myCanvas')
  .getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);

Canvas provides a drawing surface for graphics, charts, and games using JavaScript.

JavaScript APIs introduced with HTML5

  • localStorage / sessionStorage — client-side data storage
  • Geolocation — get the user's location
  • Web Workers — run JavaScript in background threads
  • WebSockets — real-time two-way communication
  • History API — manipulate browser history for SPAs
  • Drag and Drop — native drag and drop support

Interview Tip

Group your answer into categories: semantic elements, forms, multimedia, canvas, and APIs. You do not need to list every feature — cover one or two examples from each category to show breadth of knowledge.

Why interviewers ask this

This tests your knowledge of the web platform. HTML5 introduced many features that are now fundamental to web development. Knowing what HTML5 brought to the table shows you understand the foundation your applications are built on.

Table of Contents