HTML5 Overview
Standard Information
HTML5 (2014)
W3C Recommendation
Universal
Quick Summary
HTML5 represents a major evolution in web standards, introducing semantic elements, multimedia support, enhanced forms, and powerful APIs that enable modern web applications. It provides better accessibility, SEO optimization, and developer experience while maintaining backward compatibility.
Key HTML5 Benefits
HTML5 Features & APIs
Semantic Elements
HTML5 introduced semantic elements that provide meaning to the structure of web pages, making them more accessible and SEO-friendly.
Header Element
Represents the header of a document or section, typically containing navigation and introductory content.
Benefits:
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>Main Element
Represents the main content area of a document, excluding headers, footers, and navigation.
Benefits:
<main>
<article>
<h1>Article Title</h1>
<p>Main content goes here...</p>
</article>
</main>Article Element
Represents a self-contained composition that could be distributed independently.
Benefits:
<article>
<header>
<h2>Article Title</h2>
<time datetime="2024-01-15">January 15, 2024</time>
</header>
<p>Article content...</p>
<footer>
<p>Author: John Doe</p>
</footer>
</article>Section Element
Represents a standalone section of a document, typically with a heading.
Benefits:
<section>
<h2>Section Title</h2>
<p>Section content...</p>
</section>Aside Element
Represents content that is tangentially related to the content around it.
Benefits:
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Related Article 1</a></li>
<li><a href="#">Related Article 2</a></li>
</ul>
</aside>Footer Element
Represents the footer of a document or section, typically containing copyright and contact information.
Benefits:
<footer>
<p>© 2025 Company Name</p>
<nav>
<a href="/privacy">Privacy</a>
<a href="/contact">Contact</a>
</nav>
</footer>Form Enhancements
HTML5 introduced new form input types and attributes that provide better user experience and validation.
Email Input
Specialized input for email addresses with built-in validation.
Benefits:
<input type="email"
name="email"
placeholder="Enter your email"
required>Number Input
Input for numerical values with optional min/max constraints.
Benefits:
<input type="number"
name="age"
min="0"
max="120"
step="1">Date Input
Input for date selection with a built-in date picker.
Benefits:
<input type="date"
name="birthdate"
min="1900-01-01"
max="2025-12-31">Color Input
Input for color selection with a color picker interface.
Benefits:
<input type="color"
name="theme-color"
value="#ff0000">Range Input
Slider input for selecting values within a range.
Benefits:
<input type="range"
name="volume"
min="0"
max="100"
value="50"
step="5">Search Input
Specialized input for search queries with optimized styling.
Benefits:
<input type="search"
name="q"
placeholder="Search..."
results="10">Multimedia Elements
HTML5 introduced native support for audio and video content without requiring plugins.
Video Element
Native video playback with multiple format support and controls.
Benefits:
<video width="640" height="360" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<p>Your browser doesn't support video.</p>
</video>Audio Element
Native audio playback with format support and controls.
Benefits:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<p>Your browser doesn't support audio.</p>
</audio>Canvas Element
Drawing surface for creating graphics, animations, and games.
Benefits:
<canvas id="myCanvas" width="300" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);
</script>Data Attributes
Custom data attributes allow you to store extra information on HTML elements.
Data Attributes
Custom attributes for storing application-specific data.
Benefits:
<div data-user-id="123"
data-role="admin"
data-status="active">
User Information
</div>Microdata
Structured data markup for search engines and applications.
Benefits:
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">John Doe</span>
<span itemprop="jobTitle">Web Developer</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">123 Main St</span>
<span itemprop="addressLocality">City</span>
</div>
</div>Accessibility Features
HTML5 includes built-in accessibility features for better screen reader support and keyboard navigation.
ARIA Attributes
Accessible Rich Internet Applications attributes for enhanced accessibility.
Benefits:
<button aria-label="Close dialog"
aria-expanded="false"
aria-controls="dialog">
×
</button>
<div id="dialog" role="dialog" aria-labelledby="dialog-title">
<h2 id="dialog-title">Dialog Title</h2>
<p>Dialog content...</p>
</div>Landmark Roles
Semantic roles that help screen readers understand page structure.
Benefits:
<nav role="navigation" aria-label="Main navigation">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main role="main">
<h1>Page Content</h1>
</main>Storage APIs
HTML5 provides client-side storage capabilities for web applications.
Local Storage
Persistent storage that survives browser sessions.
Benefits:
// Store data
localStorage.setItem('user', JSON.stringify({
name: 'John',
email: 'john@example.com'
}));
// Retrieve data
const user = JSON.parse(localStorage.getItem('user'));
// Remove data
localStorage.removeItem('user');Session Storage
Temporary storage that persists only for the current session.
Benefits:
// Store data for session
sessionStorage.setItem('tempData', 'value');
// Retrieve session data
const data = sessionStorage.getItem('tempData');
// Clear session data
sessionStorage.clear();Geolocation API
HTML5 provides access to the user's geographical location.
Geolocation
Get the user's current position with permission.
Benefits:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
console.log('Location:', lat, lng);
},
function(error) {
console.error('Error:', error.message);
}
);
}Drag and Drop API
Native drag and drop functionality for interactive web applications.
Drag and Drop
Implement drag and drop functionality with HTML5 APIs.
Benefits:
<div draggable="true" ondragstart="drag(event)">
Drag me
</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)">
Drop zone
</div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>