Skip to content
Learni
View all tutorials
Outils Pédagogiques

How to Create Interactive Content with H5P in 2026

14 minBEGINNER
E-learningH5PContenu interactif
Lire en français

Introduction

H5P makes it easy to create high-quality professional interactive content: quizzes, presentations, enriched videos, or exercises. This open-source tool integrates perfectly with modern LMS platforms and websites. In 2026, H5P remains the preferred solution for e-learning because it combines ease of use with rich functionality. This tutorial accompanies you from installation to advanced integration. You will learn how to produce reusable and accessible content. Each step includes concrete examples and ready-to-use code.

Prerequisites

  • Administrator account on a WordPress, Moodle, or Drupal site
  • Basic knowledge of HTML and JavaScript
  • FTP or terminal access to install plugins
  • Modern browser (Chrome or Firefox)

Installation via WordPress

terminal
wp plugin install h5p --activate
wp plugin install h5p-xapi --activate

This command installs and activates the official H5P plugin along with the xAPI module for result tracking. Run it in the WordPress root directory.

Creating Your First Content

Once the plugin is activated, go to the H5P menu. Click on "Add content" and select a type such as "Multiple Choice Quiz". Fill in the fields with your questions and save. The system automatically generates a shortcode that you can insert into your posts.

Basic HTML Integration

index.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Contenu H5P</title>
</head>
<body>
  <div id="h5p-container"></div>
  <script src="https://cdn.h5p.org/h5p.js"></script>
  <script>
    const h5p = new H5P({
      contentId: '12345',
      container: document.getElementById('h5p-container')
    });
    h5p.init();
  </script>
</body>
</html>

This HTML file loads the H5P library from the official CDN and initializes the content with ID 12345. Replace this ID with your own content identifier.

h5p.json Configuration File

h5p.json
{
  "title": "Quiz Introduction à H5P",
  "mainLibrary": "H5P.MultiChoice",
  "embedTypes": ["div"],
  "preloadedDependencies": [
    {
      "machineName": "H5P.MultiChoice",
      "majorVersion": 1,
      "minorVersion": 14
    }
  ]
}

This JSON file defines the metadata and dependencies of the content. It is automatically generated by H5P but can be modified to customize behavior.

xAPI Tracking Script

tracker.js
document.addEventListener('h5p-xapi', function(event) {
  const statement = event.detail.statement;
  console.log('Résultat envoyé :', statement);
  fetch('/api/track', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(statement)
  });
});

This script intercepts xAPI events emitted by H5P and sends them to your server for learner tracking. It is essential for certified training courses.

CSS Customization

h5p-custom.css
.h5p-container {
  font-family: 'Inter', sans-serif;
  max-width: 800px;
  margin: 0 auto;
}
.h5p-question {
  background-color: #f8fafc;
  border-radius: 8px;
  padding: 24px;
}

This CSS file overrides H5P default styles for better visual integration with your brand guidelines.

Best Practices

  • Always test content on mobile before publishing
  • Use descriptive names for each H5P activity
  • Enable automatic result backup
  • Limit the number of interactions per screen
  • Check accessibility with a screen reader

Common Errors to Avoid

  • Forgetting to activate H5P libraries after installation
  • Using incompatible versions of dependencies
  • Ignoring JavaScript error messages in the console
  • Publishing content without testing fullscreen mode

Going Further

Discover our complete courses on H5P and modern e-learning at Learni Group.