H5P is an open-source tool that allows you to create an interactive HTML5 content easily. H5P is an abbreviation for HTML5 Package. There are 40 + different interactive content types available, including video with an interactive quizzes, memory games, image hotspots and others. See content types for an up to date list of content types and interactive content examples that can be created using H5P.
There are a few ways to use H5P. Users can either:
- reuse existing interactions,
- edit and reuse existing interactions; or
- create their own H5P interactions.
The simplest way to use H5P interactions, is to repurpose existing H5P interactions. The interactions can be reused by getting the embed code and using it on your course or web page. The code can be accessed by the <>Embed link on the bottom right of the interaction itself.
It's also possible to download an HTML 5 package (.h5p) file for editing. It can be opened and edited using Lumi. Or it can be uploaded to H5P.com, or Wordpress with H5P plugin for editing there. The Reuse Guide explains how you can download the interaction file from the source using the Reuse link. Note, not all interactions will have the embed and reuse links visible.
There are a number of sites with samples or H5P repositories online, such as:
- eCampusOntario H5P Studio,
- Maricopa Community Colleges - MLA in Minutes Pressbook
- Pressbooks Directory - Filter by H5P activities 
- or the H5P Global OER Hub (once ready).
This chart lists the options available for creating interactions.
|Service/Tool||Cost||Description||FIPPA||Sharable Format(s)||Grade transfer|
|H5P.org||Free||This service is for trying out H5P. You can embed content from H5P.org directly for test purposes only. It is not recommended to use it for the long run, as some interactions maybe become unavailable. Also few of the content types are not available on the H5P.com version. All content is publicly visible.||Server hosted in EU.||embed code, .h5p||No|
|H5P.com||Annual Fees||This is a hosting service where you can host interactions and use direct link or embeds. Annual licences are available for individuals, multiple authors and educational institutions. Users can organize interactive contents in folders, work collaboratively and can control visibility, by using the unpublished, private or public setting options.||Server location options to meet FIPPA requirements.||embed code, .h5p||Yes|
|Learning Tools Interoperability (LTI) integration||Annual Fees||Learning Tools Interoperability (LTI) integrations with H5P.com and several compatible Learning Management Systems (LMS). The LTI integration allows for grades to transfer into the LMS. Note LTI integration with Canvas is currently unavailable at UBC.||Host server location factors into meeting FIPPA compliancy.||embed code, .h5p||Yes|
|H5P plugins||Free||The plugins are available for web platforms such as WordPress, Drupal, Pressbooks and others. Interactions created and self-hosted on these platforms but do not allow for interactions which are graded.||Host server location factors into meeting FIPPA compliancy.||embed code, .h5p||No|
|Lumi||Free, Open Source||This is a free, open source, third-party, stand alone desktop application that allows users to create H5P interactions. Using the SCORM objects in compliant LMSs allows for grades to transfer into the LMS that the SCORM object has been imported into. Another benefit is that users with coding skills can custom the interactive content even further.||Host server location factors into meeting FIPPA compliancy.||.h5p, .html file(s), .Lumi, SCORM||Yes|
Currently, UBC's Canvas instance does not have the H5P LTI integration. However, H5P.org was used by instructors in various faculties for a number of years before it was changed to a test space. Information about UBC H5P.com usage or Lumi users is not available. The following are some examples of H5P current and past usage at UBC.
Learning Technology integration with H5P at UBC
- Spaces, which is a WordPress based learning technology platform has an integration with H5P. See Course Spaces to learn about more detail.
- UBC Physics - UBC grad students used H5P.org to create interactive videos targeting common misconception in intro physics. These video interactions are linked on the webpage and allow for users to easily grab the embed code.
Faculty of Education (Education Technology Support)
- ETS H5P Studio - UBC's Faculty of Education is currently piloting H5P. The Educational Technology Support (ETS) unit are using an OpenETC Wordpress site with the H5P plugin. Currently, 28 content interaction types can be created and stored on the site. Some faculty are using Lumi to create SCORM packages to import into Canvas, so that grades will be captured from interactions and show in the Canvas grades area.
H5P for Teaching and Learning
The three main uses for H5P for education are:
- Presenting content
- Formative assessments (graded or ungraded)
- Student assignments
Inclusion of H5P interactive content types facilities multi-modal strategies that work well for online or blended courses. H5P interactions have improved the learning experiences for deaf, and hard of hearing language learners 
Getting Started with H5P
H5P.org has a Getting Started Guide which is a good place to start. The following are things to consider when you are starting to use H5P.
- Will you using an existing interaction, modify it or create your own?
- Explore the H5P.org and other H5P object repository sites, such as eCampusOntario H5P Studio or the H5P Global OER Hub (once ready).
- Think about how interactive media will enhance your course as far as presenting information or helping learners with formative assessments and feedback.
- Will you be creating interactive content for graded formative assessments? Do you need to have that information in your Canvas grades area?
- Decide on how you will be accessing H5P? What do you have available? And what meets FIPPA requirements if you are considering it for student's use for assignment content creation?
- Consider accessibility. If you are using an interaction that is focused on visual information, have you included that information in text or audio modes? Will the interaction type be accessible on most devices?
The following are general tips, founded in teaching and learning strategies, for the inclusion of H5P interactive content in courses:
- Consider multimedia design principles when selecting or creating your H5P interactive content.
- Keep the context and proximity to related information on the content page or location in the LMS. While helping to "chunk information", it still allows student to make connections with ideas presented.
- Design with Universal Design for Learning guidelines and accessibility in mind. H5P interactive content is useful to Remember not to use images of text because a screen reader will not decode the image.
- Provide an introduction, so students know why the interaction is included and how it relates to the overall topic and learning goals. Understanding why students are doing something is known to help with their learning processes.
- Don’t assume that learners will know how to use the interactive content, especially more complex ones. Provide them with instructions or step by step guide for more complex interactions. For example, instructions to “drag and drop the items to their appropriate categories” or “click the submit button to check your answers”. Make it a habit to include instructions for navigating the interaction, even if you think it’s obvious to you, it may not be to the user. For interactive contents that take a longer time to complete, like the documentation tool for example, provide students with an estimated timeframe for completion of the activity.
- Use formative interactive contents to help bridge the learning gaps. Tie the feedback to textbook content, course readings or any other relevant course material. It’s a good idea to include supplementary learning materials in close proximity, or on the same page as the H5P interactive content is embedded on.
- Start simple. Create easier H5P interactive contents to start and work your way to more complex interactions. Building interactions can range from being fairly easy to being very complex, depending on the type of interaction and the media create or used for it . See chart under Interaction Types for more details on use of ease and tips for creating and using specific interactive content types.
- Hide the embed text. It's a minor thing, but it’s extraneous information that detracts from visual appeal and adds cognitive load.
- Refer to the H5P Documentation as a resource. The Content Author Guide contains a number of tutorials.
Interactive Content Types
The following chart is useful to see the different interactive content types, how easy they are to create, and how to apply them in learning. Some of the information about interactive content types and ease of use is adapted from Reimagining physiology education with interactive content developed in H5P. The information about accessibility is from the H5P.com documentation and is regularly updated. You can also find specifics about browser compatibility there as well. The pedagogical uses, learning strategies and usages tips are adapted from the H5P Overview document under the Resources section of this page.
|No.||Type||Description||Difficulty||Usage Type||Accessibilty||Learning Strategies||Examples||Notes/Tips|
|3||Arithmetic Quiz||Easy||Formative assessments||Accessible|
|4||Audio||Easy||Presenting content||Only if text alternative is added||—||—|
|6||Branching Scenario||Advanced||Formative assessments||Accessible|
|13||Documentation Tool||Intermediate||Accessible||Let students know about the approximate time it takes complete the Documentation Tool, because partially completed work isn't not saved.|
|14||Drag and Drop||Intermediate||Formative assessments||Accessible|
|15||Drag the Words||Easy||Formative assessments||Accessible|
|16||Emoji Cloud||Live engagement tool|
|18||Fill in the Blanks||Easy||Formative assessments||Accessible||—|
|19||Find the Hotspot||Formative assessments||NOT accessible||—|
|20||Find Multiple Hotspots||Easy||Formative assessments||NOT accessible||—|
|22||Guess the Answer||Easy||Accessible||—|
|23||Iframe Embedder||Depends on embedded content||—|
|25||Image Juxtaposition||Easy||NOT accessible||—|
|26||Image Sequencing||Easy||NOT accessible|
|31||Mark the Words||Easy||Not accessible yet|
|33||Multiple Choice||Easy||Formative assessments||Accessible|
|34||Multipoll||Live engagement tool|
|35||Personality Quiz||Advanced||NOT accessible|
|36||Quiz (Question Set)||Intermediate||Accessible|
|38||Single Choice Set||Intermediate||Accessible|
|39||Speak the Words||Easy||NOT accessible|
|40||Speak the Words Set||Easy||NOT accessible|
|42||Timeline||Intermediate||Presenting content||Not known|
|44||Twitter User Feed||Easy||Presenting content||Not known|
|45||Virtual Tour (360°)||Presenting content||Accessible|
|46||Word Cloud||Live engagement tool|
Note: Some of the information on this chart is likely to change as improvements are made to H5P. Last updated: June 2, 2021
Comparison to Other Tools
H5P has an ability to create an interactive video just like Camtasia. Below is a quick comparison between H5P and Kaltura Quiz:
|Analytics||If you are creating analytics on a standalone WordPress or Drupal site, you will be able to access to basic analytics (start and stop times, scores and max scores per use). You can add an additional plugin if you want to access to more advanced analytics.||yes take a look at Analytics|
|Viewers can download/embed the video||yes||yes|
|Embed the video to UBC Blogs||yes||yes, via Kaltura|
|Embed the video to Canvas||yes||yes|
If you install H5P on WordPress or Drupal, you can see the result for basic analytics, which are start and stop times, scores and max scores per user. If you want further detailed analytics, you will have to install an additional plugin . If you are installing H5P on server outside of Canada, you will need to make sure that you are not violating FIPPA.
Developer and Author Resources
The H5P.org site provides a community forum space as well as H5P Documentation as a resource for developers and content authors. The Content Author Guide contains a number of tutorials for many interactive content types. In addition the Reuse Guide is useful for information about downloading and uploading interactive content H5P files.
- Content Author Guide
- Getting Started Guide
- H5P Overview Created by Parm Gill - Pedagogical-based reasons for using H5P, overview of interactive content types, tips, and more.
- Faculty of Education, Education Technology Support. (nd). Create Interactive Learning Content With H5P. Retrieved from: https://ets.educ.ubc.ca/h5p/?login
- Reuse Guide
- The H5P PB Kitchen: Cooking with H5P & Pressbooks
- Levine, Alan. "How to Scout For H5P Examples". H5P PB Kitchen: Cooking with H5P & Pressbooks.
- Volpato, L.; Hilzensauer, M. (2018). "Teaching the National Written Language to Deaf Students: A New Approach". Miesenberger K., Kouroupetroglou G. (eds) Computers Helping People with Special Needs. ICCHP 2018. Lecture Notes in Computer Science, vol 10896. – via Springer, Cham.
- Sinnayah, P.; Salcedo, A.; Rekhari, S. (2021). "Reimagining physiology education with interactive content developed in H5P". Advances in Physiology Education. (45)1: 71–76.