1. New Semantic Elements

HTML5 introduces semantic elements that give meaning to the structure of web pages, making them more readable and accessible.

Explanation:

Semantic elements help in defining different sections of a web page. For instance, elements like <header>, <footer>, <main>, and <section> provide clear structure and meaning to the content, which can improve SEO and accessibility.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Semantic Elements</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>Home Section</h2>
            <p>This is the home section of the webpage.</p>
        </section>
        
        <section id="about">
            <h2>About Section</h2>
            <p>This section is about the website and its purpose.</p>
        </section>
        
        <section id="contact">
            <h2>Contact Section</h2>
            <p>This is the contact section where users can reach out.</p>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2024 My Website</p>
    </footer>
</body>
</html>
  • <header>: Represents introductory content or navigational links.
  • <nav>: Defines a set of navigation links.
  • <main>: Represents the dominant content of the <body>.
  • <section>: Defines sections in a document, such as chapters or groups of related content.
  • <footer>: Represents the footer of a document or section.

2. Forms Enhancements

HTML5 introduces new input types and attributes to enhance the functionality and validation of forms.

Explanation:

HTML5 forms support new input types like email, date, and range, which help with better data entry and validation. Additionally, attributes such as required enforce that a user cannot submit the form without completing certain fields.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Forms</title>
</head>
<body>
    <h1>HTML5 Forms</h1>
    <form action="/submit" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        
        <label for="birthdate">Birthdate:</label>
        <input type="date" id="birthdate" name="birthdate">
        
        <label for="gender">Gender:</label>
        <select id="gender" name="gender">
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
        </select>
        
        <label for="subscribe">
            <input type="checkbox" id="subscribe" name="subscribe">
            Subscribe to newsletter
        </label>
        
        <button type="submit">Submit</button>
    </form>
</body>
</html>
  • <input type="email">: Validates email addresses.
  • <input type="date">: Provides a date picker.
  • <select>: Creates a dropdown menu for selections.
  • <button>: Creates a clickable button for form submission.

3. Audio and Video Support

HTML5 provides native support for embedding audio and video files without needing plugins.

Explanation:

The <audio> and <video> elements allow you to embed multimedia content directly into your web pages. They come with built-in controls for play, pause, and volume adjustment.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Media</title>
</head>
<body>
    <h1>HTML5 Audio and Video</h1>
    
    <h2>Audio Example</h2>
    <audio controls>
        <source src="audio.mp3" type="audio/mp3">
        Your browser does not support the audio element.
    </audio>
    
    <h2>Video Example</h2>
    <video width="640" height="360" controls>
        <source src="video.mp4" type="video/mp4">
        Your browser does not support the video element.
    </video>
</body>
</html>
  • <audio>: Embeds an audio file with playback controls.
  • <video>: Embeds a video file with playback controls.

4. Local Storage and Session Storage

HTML5 provides local storage and session storage to store data on the client side.

Explanation:

Local storage and session storage are part of the Web Storage API. Local storage persists even when the browser is closed, while session storage is cleared when the page session ends.

Code Example: 

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Storage</title>
    <script>
        function saveData() {
            // Save data to local storage
            localStorage.setItem('username', document.getElementById('username').value);
            alert('Data saved!');
        }
        
        function loadData() {
            // Load data from local storage
            const username = localStorage.getItem('username');
            if (username) {
                document.getElementById('username').value = username;
            }
        }
        
        window.onload = loadData;
    </script>
</head>
<body>
    <h1>HTML5 Local Storage</h1>
    <label for="username">Username:</label>
    <input type="text" id="username">
    <button onclick="saveData()">Save</button>
</body>
</html>
  • localStorage.setItem(key, value): Saves data with a key.
  • localStorage.getItem(key): Retrieves data by key.