HTML Html5 Features Tutorial Guide

Semantic Elements

Overview:

HTML5 introduced many semantic elements such as <header>, <nav>, <main>, <article>, <section>, and <footer> that make page structure more meaningful.

Native Audio & Video

HTML5 added first‑class support for audio and video without requiring plugins such as Flash.

Example: Video Element

HTML Code:

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

Form Enhancements

HTML5 significantly improved forms with new input types, validation attributes, and helper attributes.

New input types: email, url, tel, number, date, range, etc.
Validation attributes: required, pattern, min, max, step.
Helper attributes: placeholder, autofocus, autocomplete.

Canvas & Graphics

The <canvas> element provides a drawing surface for 2D graphics and animations, controlled by JavaScript.

HTML Code (Canvas):

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

Web Storage & Offline Support

HTML5 introduced localStorage and sessionStorage for storing small key-value data directly in the browser.

JavaScript Example:

// Save
localStorage.setItem("theme", "dark");

// Read
const theme = localStorage.getItem("theme");

// Remove
localStorage.removeItem("theme");

Other Popular HTML5 APIs

Geolocation API - get user location (with permission).
Drag and Drop API - build draggable interfaces.
History API - update URL without full page reload.
Web Workers - run scripts in background threads.
WebSocket - real-time communication for chats/live dashboards.

HTML5 Features