HTML5 is the latest version of HTML, introducing new semantic elements, multimedia support, graphics capabilities, and powerful APIs for building modern web applications. It's what we use for web development today.
What is HTML5?
HTML5 was released in 2014 and brought major improvements to HTML. It's designed for the modern web with better support for multimedia, mobile devices, and web applications.
Basic HTML5 Document
html5-document.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Document</title>
</head>
<body>
<header>
<h1>Welcome to HTML5</h1>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Content goes here...</p>
</article>
</main>
<footer>
<p>© 2024</p>
</footer>
</body>
</html>New Semantic Elements
HTML5 introduced semantic elements for better document structure:
<header>,<footer>- Page sections<nav>- Navigation<main>- Main content<article>- Self-contained content<section>- Thematic grouping<aside>- Sidebar content<figure>,<figcaption>- Images with captions<time>,<mark>- Dates and highlights
Native Multimedia Support
HTML5 includes built-in audio and video support—no plugins needed:
multimedia.html
<!-- Video -->
<video controls width="640" height="360">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser doesn't support video.
</video>
<!-- Audio -->
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser doesn't support audio.
</audio>Enhanced Form Features
HTML5 added new input types and attributes:
html5-forms.html
<!-- New input types -->
<input type="email" placeholder="Email">
<input type="date">
<input type="color">
<input type="range" min="0" max="100">
<input type="number" min="1" max="10">
<!-- New attributes -->
<input type="text" placeholder="Enter text" required>
<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">Graphics and Visualization
HTML5 provides two ways to create graphics:
Canvas API
Draw 2D graphics with JavaScript:
canvas-example.html
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a rectangle
ctx.fillStyle = '#4CAF50';
ctx.fillRect(50, 50, 200, 100);
// Draw text
ctx.font = '30px Arial';
ctx.fillStyle = 'white';
ctx.fillText('Hello Canvas!', 70, 110);
</script>SVG Support
Embed scalable vector graphics directly in HTML:
svg-example.html
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="#2196F3" />
<text x="100" y="110" text-anchor="middle" fill="white" font-size="20">
SVG Circle
</text>
</svg>Local Storage
Store data in the browser without cookies:
localstorage.html
<script>
// Save data
localStorage.setItem('username', 'JohnDoe');
// Retrieve data
const username = localStorage.getItem('username');
console.log(username); // JohnDoe
// Remove data
localStorage.removeItem('username');
</script>Geolocation API
Get user's location (with permission):
geolocation.html
<button onclick="getLocation()">Get My Location</button>
<p id="location"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById('location').textContent =
'Geolocation not supported';
}
}
function showPosition(position) {
document.getElementById('location').textContent =
'Latitude: ' + position.coords.latitude +
', Longitude: ' + position.coords.longitude;
}
</script>Drag and Drop API
Native drag and drop functionality:
drag-drop.html
<div draggable="true" ondragstart="drag(event)" id="item">
Drag me!
</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)"
style="width:200px; height:200px; border:1px solid #ccc;">
Drop here
</div>
<script>
function allowDrop(e) {
e.preventDefault();
}
function drag(e) {
e.dataTransfer.setData("text", e.target.id);
}
function drop(e) {
e.preventDefault();
const data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
</script>Web Workers
Run JavaScript in background threads:
web-workers.html
<script>
// Create a new worker
const worker = new Worker('worker.js');
// Send message to worker
worker.postMessage('Hello Worker!');
// Receive message from worker
worker.onmessage = function(e) {
console.log('Message from worker:', e.data);
};
</script>
<!-- In worker.js -->
<script>
onmessage = function(e) {
console.log('Worker received:', e.data);
postMessage('Hello from Worker!');
};
</script>Improved Accessibility
HTML5 includes better accessibility features:
- ARIA attributes for assistive technologies
- Semantic elements for better screen reader support
- Native form validation
- Better keyboard navigation
Mobile-First Features
HTML5 was designed with mobile devices in mind:
mobile-features.html
<!-- Viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Touch-friendly input types -->
<input type="tel" placeholder="Phone">
<input type="email" placeholder="Email">
<!-- Offline support with app cache -->
<html manifest="app.manifest">
<!-- Mobile-optimized media -->
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(max-width: 1200px)" srcset="medium.jpg">
<img src="large.jpg" alt="Responsive image">
</picture>Browser Support
HTML5 is well-supported in all modern browsers. Most features work in:
- Chrome, Edge, Firefox, Safari (latest versions)
- Mobile browsers (iOS Safari, Chrome Mobile)
For older browsers, you can use polyfills or feature detection with JavaScript.
Key Improvements Over HTML4
- Simpler DOCTYPE declaration
- Native audio and video support
- Canvas and SVG for graphics
- New semantic elements
- Better form controls and validation
- Local storage capabilities
- Offline application support
- Geolocation API
- Drag and drop functionality
- Web workers for background processing
Key Takeaways
- HTML5 is the current standard for web development
- Includes new semantic elements for better structure
- Native multimedia support (audio, video)
- Enhanced form inputs and validation
- Graphics APIs (Canvas, SVG)
- Local storage and offline capabilities
- Geolocation, drag-and-drop, and other modern APIs
- Better mobile and accessibility support
What's Next?
Now that you understand what HTML5 offers, the next lessons will dive deeper into specific HTML5 features. We'll start with the Canvas element, which allows you to draw graphics and create animations with JavaScript.