HTML5 New Features: Semantic Elements, Canvas, and Web APIs

Semantic Elements

HTML5 introduced several semantic elements that improve document structure and accessibility:

Structural Elements

<header>  <!-- Page or section header -->
<nav>     <!-- Navigation links -->
<main>    <!-- Main content area -->
<article> <!-- Self-contained content -->
<section> <!-- Thematic grouping -->
<aside>   <!-- Sidebar content -->
<footer>  <!-- Page or section footer -->

These elements help screen readers and search engines understand your page structure better.

Canvas Element

The <canvas> element provides a drawing surface for JavaScript:

<canvas id="myCanvas" width="400" height="300"></canvas>

const ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(10, 10, 150, 100);

Video and Audio

Native media playback without plugins:

<video controls width="640">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support video.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Form Enhancements

New input types and validation:

<input type="email" required>
<input type="date">
<input type="range" min="0" max="100">
<input type="color">
<input type="search" placeholder="Search...">

Local Storage

Client-side data persistence:

// Store data
localStorage.setItem('user', JSON.stringify({ name: 'John' }));

// Retrieve data
const user = JSON.parse(localStorage.getItem('user'));

// Remove data
localStorage.removeItem('user');

Web Workers

Run JavaScript in background threads:

const worker = new Worker('worker.js');
worker.postMessage('Start processing');
worker.onmessage = (e) => console.log(e.data);

Geolocation

Access user location (with permission):

navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
  (err) => console.error(err)
);