Lesson 9: HTML5 Features

Modern HTML5 Features

⏱️ 40 minutes

HTML5 revolutionized web development with powerful new features, APIs, and elements. Discover how to leverage these modern capabilities to create rich, interactive web applications without relying on external plugins.

🎯 Learning Objectives

Understand HTML5's new capabilities and advantages
Use modern HTML5 elements effectively
Implement web storage for client-side data
Work with HTML5 APIs and JavaScript integration
Create graphics with Canvas and SVG
Build progressive web applications with HTML5

HTML5 Revolution

💡 What's New in HTML5?

HTML5 introduced semantic elements, multimedia support, form enhancements, drawing capabilities, offline storage, and powerful APIs that enable desktop-like experiences in web browsers.

Key HTML5 Improvements

📱 Mobile First

Touch-friendly input types
Responsive design support
Offline capabilities
Performance optimizations

🎮 Rich Media

Native audio/video support
Canvas for dynamic graphics
SVG integration
WebGL 3D graphics

🔧 Enhanced Forms

New input types (email, date, etc.)
Built-in validation
Placeholder text
Form attributes

🌐 Web APIs

Geolocation services
Local storage
Web workers
WebSocket communication

New HTML5 Elements

Multimedia Elements

Progress and Meter Elements

<!-- Progress indicator -->
<label for="file-progress">File upload progress:</label>
<progress id="file-progress" value="32" max="100">32%</progress>

<!-- Measurement gauge -->
<label for="disk-usage">Disk usage:</label>
<meter id="disk-usage" value="0.6" min="0" max="1">60%</meter>

<!-- Battery level example -->
<meter value="75" min="0" max="100" optimum="80" high="60" low="20">
    75% battery remaining
</meter>

Interactive Elements

Details and Dialog Elements

<!-- Collapsible content -->
<details>
    <summary>Click to expand FAQ</summary>
    <p>This content is hidden by default and shows when clicked.</p>
    <p>Perfect for FAQs, help sections, and additional details.</p>
</details>

<!-- Modal dialog -->
<dialog id="myDialog">
    <form method="dialog">
        <h3>Confirm Action</h3>
        <p>Are you sure you want to proceed?</p>
        <button value="cancel">Cancel</button>
        <button value="confirm">Confirm</button>
    </form>
</dialog>

Time and Data Elements

<!-- Time representation -->
<p>The event starts at <time datetime="2024-12-25T09:00">9:00 AM on Christmas</time></p>
<p>Posted <time datetime="2024-10-14" title="October 14, 2024">yesterday</time></p>

<!-- Machine-readable data -->
<p>The laptop costs <data value="1299.99">$1,299.99</data></p>
<p>Product weight: <data value="2.3">2.3 kg</data></p>

HTML5 APIs

HTML5 API Demonstrations

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 APIs Demo</title>
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #1e3c72, #2a5298);
            color: white;
            min-height: 100vh;
        }
        
        .demo-section {
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 25px;
            margin: 20px 0;
            border: 1px solid rgba(255,255,255,0.2);
        }
        
        h1, h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .api-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .api-card {
            background: rgba(255,255,255,0.15);
            padding: 20px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.3);
        }
        
        button {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            margin: 5px;
            transition: transform 0.2s;
        }
        
        button:hover {
            transform: translateY(-2px);
        }
        
        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        input, textarea {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid rgba(255,255,255,0.3);
            border-radius: 5px;
            background: rgba(255,255,255,0.1);
            color: white;
            box-sizing: border-box;
        }
        
        input::placeholder, textarea::placeholder {
            color: rgba(255,255,255,0.7);
        }
        
        .status {
            background: rgba(0,255,0,0.2);
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
            border-left: 4px solid #00ff00;
        }
        
        .error {
            background: rgba(255,0,0,0.2);
            border-left-color: #ff0000;
        }
        
        canvas {
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 10px;
            background: rgba(255,255,255,0.1);
            max-width: 100%;
        }
        
        #fileList {
            max-height: 200px;
            overflow-y: auto;
            background: rgba(0,0,0,0.2);
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
        }
        
        .file-item {
            padding: 5px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        progress, meter {
            width: 100%;
            height: 25px;
            margin: 10px 0;
        }
        
        details {
            background: rgba(255,255,255,0.1);
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
        }
        
        summary {
            font-weight: bold;
            cursor: pointer;
            padding: 10px;
            background: rgba(255,255,255,0.1);
            border-radius: 5px;
            margin: -15px -15px 15px -15px;
        }
    </style>
</head>
<body>
    <h1>🚀 HTML5 APIs Showcase</h1>
    
    <!-- Geolocation API -->
    <div class="demo-section">
        <h2>📍 Geolocation API</h2>
        <div class="api-card">
            <p>Get your current location using the browser's geolocation service.</p>
            <button onclick="getLocation()">Get My Location</button>
            <div id="locationResult" class="status" style="display:none;"></div>
        </div>
    </div>
    
    <!-- Web Storage API -->
    <div class="demo-section">
        <h2>💾 Web Storage API</h2>
        <div class="api-grid">
            <div class="api-card">
                <h3>Local Storage</h3>
                <input type="text" id="storageKey" placeholder="Enter key">
                <input type="text" id="storageValue" placeholder="Enter value">
                <button onclick="saveToStorage()">Save Data</button>
                <button onclick="loadFromStorage()">Load Data</button>
                <button onclick="clearStorage()">Clear All</button>
                <div id="storageResult"></div>
            </div>
            
            <div class="api-card">
                <h3>Session Storage</h3>
                <textarea id="sessionData" placeholder="Enter session data"></textarea>
                <button onclick="saveSession()">Save Session</button>
                <button onclick="loadSession()">Load Session</button>
                <div id="sessionResult"></div>
            </div>
        </div>
    </div>
    
    <!-- File API -->
    <div class="demo-section">
        <h2>📁 File API</h2>
        <div class="api-card">
            <input type="file" id="fileInput" multiple onchange="handleFiles()">
            <div id="fileList"></div>
            <canvas id="imageCanvas" width="300" height="200" style="display:none;"></canvas>
        </div>
    </div>
    
    <!-- Canvas API -->
    <div class="demo-section">
        <h2>🎨 Canvas API</h2>
        <div class="api-card">
            <canvas id="drawingCanvas" width="400" height="300"></canvas>
            <br>
            <button onclick="drawShapes()">Draw Shapes</button>
            <button onclick="drawAnimation()">Start Animation</button>
            <button onclick="clearCanvas()">Clear Canvas</button>
        </div>
    </div>
    
    <!-- Notification API -->
    <div class="demo-section">
        <h2>🔔 Notification API</h2>
        <div class="api-card">
            <p>Send desktop notifications to users (requires permission).</p>
            <button onclick="requestNotificationPermission()">Request Permission</button>
            <button onclick="showNotification()" id="notifyBtn" disabled>Show Notification</button>
            <div id="notificationStatus"></div>
        </div>
    </div>
    
    <!-- HTML5 Form Features -->
    <div class="demo-section">
        <h2>📝 Enhanced Form Features</h2>
        <div class="api-grid">
            <div class="api-card">
                <h3>Form Validation</h3>
                <form onsubmit="return handleFormSubmit(event)">
                    <input type="email" placeholder="Email (required)" required>
                    <input type="url" placeholder="Website URL">
                    <input type="number" min="1" max="100" placeholder="Age (1-100)">
                    <input type="date" title="Select date">
                    <button type="submit">Validate Form</button>
                </form>
            </div>
            
            <div class="api-card">
                <h3>Progress & Meter</h3>
                <label>Upload Progress:</label>
                <progress id="uploadProgress" value="45" max="100">45%</progress>
                
                <label>System Health:</label>
                <meter value="0.8" min="0" max="1" optimum="0.9" high="0.7" low="0.3">80%</meter>
                
                <button onclick="updateProgress()">Update Progress</button>
            </div>
        </div>
    </div>
    
    <!-- Interactive Elements -->
    <div class="demo-section">
        <h2>🔧 Interactive Elements</h2>
        <div class="api-card">
            <details>
                <summary>🎯 Advanced HTML5 Features</summary>
                <p><strong>Web Workers:</strong> Run JavaScript in background threads</p>
                <p><strong>WebSocket:</strong> Real-time bidirectional communication</p>
                <p><strong>Drag and Drop:</strong> Native drag-and-drop functionality</p>
                <p><strong>History API:</strong> Manipulate browser history</p>
            </details>
            
            <details>
                <summary>🌐 Browser Compatibility</summary>
                <p>Most HTML5 features are well-supported in modern browsers:</p>
                <ul>
                    <li>Chrome 4+ (2010)</li>
                    <li>Firefox 3.5+ (2009)</li>
                    <li>Safari 4+ (2009)</li>
                    <li>Edge 12+ (2015)</li>
                </ul>
            </details>
        </div>
    </div>

    <script>
        // Geolocation API
        function getLocation() {
            const resultDiv = document.getElementById('locationResult');
            
            if (navigator.geolocation) {
                resultDiv.style.display = 'block';
                resultDiv.innerHTML = '🔍 Getting location...';
                
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        const lat = position.coords.latitude;
                        const lng = position.coords.longitude;
                        resultDiv.innerHTML = `📍 Location: ${lat.toFixed(4)}, ${lng.toFixed(4)}<br>
                                             Accuracy: ${position.coords.accuracy} meters`;
                    },
                    function(error) {
                        resultDiv.className = 'status error';
                        resultDiv.innerHTML = `❌ Error: ${error.message}`;
                    }
                );
            } else {
                resultDiv.style.display = 'block';
                resultDiv.className = 'status error';
                resultDiv.innerHTML = '❌ Geolocation not supported';
            }
        }
        
        // Web Storage API
        function saveToStorage() {
            const key = document.getElementById('storageKey').value;
            const value = document.getElementById('storageValue').value;
            
            if (key && value) {
                localStorage.setItem(key, value);
                document.getElementById('storageResult').innerHTML = `✅ Saved: ${key} = ${value}`;
            }
        }
        
        function loadFromStorage() {
            const key = document.getElementById('storageKey').value;
            if (key) {
                const value = localStorage.getItem(key);
                document.getElementById('storageResult').innerHTML = 
                    value ? `📖 Loaded: ${key} = ${value}` : `❌ Key "${key}" not found`;
            }
        }
        
        function clearStorage() {
            localStorage.clear();
            document.getElementById('storageResult').innerHTML = '🗑️ Local storage cleared';
        }
        
        function saveSession() {
            const data = document.getElementById('sessionData').value;
            if (data) {
                sessionStorage.setItem('sessionData', data);
                document.getElementById('sessionResult').innerHTML = '✅ Session data saved';
            }
        }
        
        function loadSession() {
            const data = sessionStorage.getItem('sessionData');
            document.getElementById('sessionResult').innerHTML = 
                data ? `📖 Session data: ${data}` : '❌ No session data found';
        }
        
        // File API
        function handleFiles() {
            const fileInput = document.getElementById('fileInput');
            const fileList = document.getElementById('fileList');
            const canvas = document.getElementById('imageCanvas');
            
            fileList.innerHTML = '';
            
            for (let file of fileInput.files) {
                const div = document.createElement('div');
                div.className = 'file-item';
                div.innerHTML = `📄 ${file.name} (${(file.size/1024).toFixed(1)} KB)`;
                fileList.appendChild(div);
                
                // Show image preview for image files
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        canvas.style.display = 'block';
                        const ctx = canvas.getContext('2d');
                        const img = new Image();
                        img.onload = function() {
                            ctx.clearRect(0, 0, canvas.width, canvas.height);
                            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                        };
                        img.src = e.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            }
        }
        
        // Canvas API
        function drawShapes() {
            const canvas = document.getElementById('drawingCanvas');
            const ctx = canvas.getContext('2d');
            
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw gradient background
            const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
            gradient.addColorStop(0, '#667eea');
            gradient.addColorStop(1, '#764ba2');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Draw shapes
            ctx.fillStyle = '#ff6b6b';
            ctx.fillRect(50, 50, 80, 60);
            
            ctx.fillStyle = '#4ecdc4';
            ctx.beginPath();
            ctx.arc(200, 100, 40, 0, 2 * Math.PI);
            ctx.fill();
            
            ctx.fillStyle = '#45b7d1';
            ctx.beginPath();
            ctx.moveTo(300, 50);
            ctx.lineTo(350, 130);
            ctx.lineTo(250, 130);
            ctx.closePath();
            ctx.fill();
        }
        
        function drawAnimation() {
            const canvas = document.getElementById('drawingCanvas');
            const ctx = canvas.getContext('2d');
            let x = 0;
            
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                ctx.fillStyle = `hsl(${x}, 70%, 50%)`;
                ctx.beginPath();
                ctx.arc(x % canvas.width, 150, 20, 0, 2 * Math.PI);
                ctx.fill();
                
                x += 2;
                if (x < canvas.width + 40) {
                    requestAnimationFrame(animate);
                }
            }
            animate();
        }
        
        function clearCanvas() {
            const canvas = document.getElementById('drawingCanvas');
            const ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
        
        // Notification API
        function requestNotificationPermission() {
            if ('Notification' in window) {
                Notification.requestPermission().then(function(permission) {
                    const status = document.getElementById('notificationStatus');
                    if (permission === 'granted') {
                        status.innerHTML = '✅ Notification permission granted';
                        document.getElementById('notifyBtn').disabled = false;
                    } else {
                        status.innerHTML = '❌ Notification permission denied';
                    }
                });
            }
        }
        
        function showNotification() {
            if (Notification.permission === 'granted') {
                new Notification('HTML5 Demo', {
                    body: 'This is a test notification from your HTML5 app!',
                    icon: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🔔</text></svg>'
                });
            }
        }
        
        // Form handling
        function handleFormSubmit(event) {
            event.preventDefault();
            alert('Form validation passed! ✅');
            return false;
        }
        
        // Progress update
        function updateProgress() {
            const progress = document.getElementById('uploadProgress');
            const meter = document.querySelector('meter');
            
            progress.value = Math.random() * 100;
            meter.value = Math.random();
        }
        
        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            // Check notification support
            if ('Notification' in window) {
                if (Notification.permission === 'granted') {
                    document.getElementById('notifyBtn').disabled = false;
                }
            }
        });
    </script>
</body>
</html>

Web Storage

Local Storage vs Session Storage

💾 Local Storage

Persists until manually cleared
Shared across browser tabs
Typically 5-10MB limit
Perfect for user preferences

🔄 Session Storage

Cleared when tab closes
Isolated per browser tab
Same storage limit as localStorage
Good for temporary data

Web Storage API Usage

<script>
// Local Storage
localStorage.setItem('username', 'john_doe');
localStorage.setItem('preferences', JSON.stringify({
    theme: 'dark',
    language: 'en'
}));

// Retrieve data
const username = localStorage.getItem('username');
const prefs = JSON.parse(localStorage.getItem('preferences'));

// Session Storage
sessionStorage.setItem('cart', JSON.stringify([
    { id: 1, name: 'Laptop', price: 999 },
    { id: 2, name: 'Mouse', price: 29 }
]));

// Check if storage is supported
if (typeof(Storage) !== "undefined") {
    // Storage supported
} else {
    // No web storage support
    console.log('Web Storage not supported');
}

// Storage events (listen for changes in other tabs)
window.addEventListener('storage', function(e) {
    console.log('Storage changed:', e.key, e.newValue);
});
</script>

Graphics: Canvas vs SVG

Canvas for Raster Graphics

Canvas Drawing

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

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Draw rectangle
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 150, 100);

// Draw circle
ctx.beginPath();
ctx.arc(200, 60, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#e74c3c';
ctx.fill();

// Draw text
ctx.fillStyle = '#2c3e50';
ctx.font = '20px Arial';
ctx.fillText('Hello Canvas!', 10, 150);

// Animation loop
function animate() {
    // Clear and redraw
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // ... drawing code
    requestAnimationFrame(animate);
}
</script>

SVG for Vector Graphics

Inline SVG

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
    <!-- Background -->
    <rect width="100%" height="100%" fill="#ecf0f1"/>
    
    <!-- Gradient definition -->
    <defs>
        <linearGradient id="blueGradient" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#3498db;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#2980b9;stop-opacity:1" />
        </linearGradient>
    </defs>
    
    <!-- Shapes -->
    <rect x="20" y="20" width="120" height="80" fill="url(#blueGradient)" rx="10"/>
    <circle cx="200" cy="60" r="40" fill="#e74c3c" opacity="0.8"/>
    <polygon points="300,20 350,80 250,80" fill="#f39c12"/>
    
    <!-- Text -->
    <text x="20" y="150" font-family="Arial" font-size="18" fill="#2c3e50">
        Scalable Vector Graphics
    </text>
    
    <!-- Animation -->
    <circle cx="50" cy="200" r="10" fill="#27ae60">
        <animate attributeName="cx" values="50;350;50" dur="3s" repeatCount="indefinite"/>
    </circle>
</svg>

🖼️ Canvas (Raster)

Pixel-based drawing
Great for complex scenes
Game development
Image manipulation
Better performance for animations

📐 SVG (Vector)

Scalable without quality loss
CSS and JavaScript controllable
Perfect for icons and logos
Accessible and SEO-friendly
Smaller file sizes for simple graphics

Practice Exercises

Exercise 1: Progressive Web App

Build a simple note-taking app using HTML5 features:

Local storage for saving notes
Offline functionality
File upload/download capabilities
Responsive design with modern elements

Exercise 2: Interactive Dashboard

Create a data visualization dashboard:

Canvas charts and graphs
Geolocation for weather data
Real-time updates using APIs
Progress indicators and meters

Lesson Summary

🎯 What You Learned

HTML5 brings powerful new capabilities to web development
New elements enhance semantics and functionality
APIs enable desktop-like web applications
Storage solutions reduce server dependencies
Graphics capabilities rival native applications

🛠️ Key APIs

Geolocation: Access user's geographic location
Web Storage: Client-side data persistence
Canvas: 2D and 3D graphics programming
File API: Access and manipulate user files

💡 Best Practices

Always check for API support before using
Provide fallbacks for older browsers
Use progressive enhancement principles
Optimize storage usage and performance
Follow accessibility guidelines
Consider user privacy and permissions

🎉 HTML5 Innovation Expert!

You've mastered modern HTML5 features and APIs! You can now create rich, interactive web applications that compete with native apps!

Next: Advanced Audio & Video →