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 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,
- Wilfrid Laurier University Library's Catalogue of H5P Content
- Maricopa Community Colleges - MLA in Minutes Pressbook
- Pressbooks Directory - Filter by H5P activities 
- Lumi Searchable Online Hub
- 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 and an online cloud version which allow 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 ways H5P was used at UBC and is currently being used.
H5P Open Hub
- H5P Open Hub - The H5P Open Hub is open to the UBC community (authenticated users) to use. It's currently in its soft launch phase.
Learning Technology integration with H5P at UBC
- Spaces - This 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 main uses for H5P in education are:
- Presenting content
- Formative assessments (graded or ungraded) and formative feedback
- Student assignments
Inclusion of H5P interactive content types facilities multi-modal strategies that work well for online or blended courses. Using multi-modal content and activities, like H5P interactions, can go beyond the traditional text/lecture approach to make learning more inclusive for diverse learners. For example, H5P interactions have improved the learning experiences for deaf, and hard of hearing language learners . Using H5P interactive contents for formative feedback allows students retrieval practice opportunities. Which in turn, further benefits students with improved metacognition, increased self-reported sense of mastery, increased attentional control, and reduced anxiety.  Another feature available in many of the interactive content types, is the ability to control when, how fast and how often student access the inaction. This helps student control how they intake and process the information.
The following points founded in teaching and learning strategies, and are helpful to consider when creating for the H5P interactive contents for 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. For H5P interactive content remember not to use images of text because a screen reader will not be able decode the image.
- Provide an introduction for interaction activities so students know why it is included and how it relates to the overall topic and learning goals. Understanding why students are asked to do something is known to help with their learning.
- Using interactive contents to present content, can itself highlight important learning materials that are aligned to learning objectives.
- Don’t assume that learners will know how to use the interactive content, especially more complex ones. Provide 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. Spaced and repeated retrieval practice of the same information, with feedback, is known to improving learning. 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.
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?
- 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.
- Consider your time and effort to create interactive contents. Focus on key areas of learning, or ideas that are difficult to understand. The more attention you give to more important content as design your course, the more students will. Even though some content may lend itself well to interactive content, it may not be tied to learning objectives, it may be a basic concept that students don't need to review. Make sure you consider student's time on task, and directing their attention.
- Test interactions. It's especially good to do this with more complex interactive contents, and ones imported as SCORM objects.
- Hide the embed text, if that ability is available on your version of H5P. It's a minor thing, but it’s extraneous information that detracts from visual appeal and adds cognitive load.
- Many of the H5P interactive contents will permit the use of emojis in the text fields. For example using 😀 in the feedback is a good way to provide quick feedback. Make sure you use the particular emoji consistently to convey the same meaning each time it is used. While emojis are screen-reader friendly, and accessible be careful not to use too many colourful and distracting emojis, as that could detract from the student experience. And be aware of culture interpretations of emojis as well.
- 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. The content types available differ based on the tool or platform you are using. 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. Some of the pedagogical uses, learning strategies and usages tips are adapted from the H5P Overview document under the Resources section of this page.
|No.||Type||Difficulty||Usage Type||Accessibilty||Learning Strategies||Examples||Notes/Tips|
|1||Accordian||Easy||Presenting content||Accessible||chunking, preloading, retrieval practice||Using Accordions in Courses from UBC H5P Open Hub||Useful for definitions, expanding on abbreviations or acronyms, listing sequential steps or processes, or presenting complex concepts in more digestible sections.|
|2||Agamotto||Easy||Presenting content||Accessible||Displays a series of images and text captions. Can be useful to compare images or charts, and provide explanations.|
|3||Arithmetic Quiz||Easy||Formative feedback
|Accessible||retrieval practice||UBC H5P OpenHub|
|4||Audio||Easy||Presenting content||Only if text alternative is added||—||—|
|6||Branching Scenario||Advanced||Formative assessment||Accessible||Recapturing Your Castle from eCampus Ontario H5P Studio by Wael Nawara|
|11||Dialog Cards||Easy||Presenting content
|Accessible||Faculty of Education Examples|
|13||Documentation Tool||Intermediate||Learning Activity||Accessible||Cause - Effect Essay Outline from eCampus Ontario H5P Studio||This is a good interaction type to help guide students through a process and organize their ideas. Let students know about the approximate time it takes complete the Documentation Tool, because partially completed work isn't not saved. Remind them to export their work once they are done.|
|14||Drag and Drop||Intermediate||Formative assessment||Accessible|
|15||Drag the Words||Easy||Formative assessment||Accessible|
|16||Emoji Cloud||Live engagement tool|
|18||Fill in the Blanks||Easy||Formative assessment||Accessible||cued recall practice||Providing hints is a way to reduce the number of possible answers — while this makes the assessment easier it still requires active knowledge from the learners.|
|19||Find the Hotspot||Formative assessment||NOT accessible||—|
|20||Find Multiple Hotspots||Easy||Formative assessment||NOT accessible||—|
|22||Guess the Answer||Easy||Accessible||—|
|23||Iframe Embedder||Depends on embedded content||This content types has privacy and security implications and isn't responsive. H5P will probably stop supporting it. Most UBC users can embed content using normal iframe embeds in Canvas or WordPress. |
|25||Image Juxtaposition||Easy||NOT accessible||develop observation, & analytical and reasoning skills ||—|
|26||Image Sequencing||Easy||NOT accessible|
|28||Interactive Book||Tips for H5P content types and H5P accessibility tips (CC BY-NC 4.0) both by Laurier Library (Joanne Oud)|
|31||Mark the Words||Easy||Not accessible yet|
|33||Multiple Choice||Easy||Formative assessment||Accessible||cued recall practice|
|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||If you have linked to media, images or webpages those links may be changed. Its a good idea to go through your timeline interactive contents in your course before term start and correct missing links.|
|44||Twitter User Feed||Easy||Presenting content||Not known|
|45||Virtual Tour (360°)||Presenting content||Accessible|
|46||Word Cloud||Live engagement tool|
|49||Cornell Notes||Intermediate||Learning Activity||Accessible||Video Elicitation|
Note: Some of the information on this chart is likely to change as improvements are made to H5P. Last updated: March 26, 2022
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
- LUMI Guide (Creating and Importing a H5P SCORM object) - A guide to creating H5P SCORM objects with Lumi, which can then be uploaded and used in Canvas Assignments.
- The H5P PB Kitchen: Cooking with H5P & Pressbooks
- H5P Symposium Resources - Resources from the UBC H5P Symposium
- 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.
- Higham, P. A (10/21/2021). "The benefits of successive relearning on multiple learning outcomes American Psychological Association". American Psychological Association. Check date values in:
- Sinnayah, P.; Salcedo, A.; Rekhari, S. (2021). "Reimagining physiology education with interactive content developed in H5P". Advances in Physiology Education. (45)1: 71–76.
- Das, Bidyut; Majumder, Mukta (August 9, 2017). "Factual open cloze question generation for assessment of learner's knowledge". Int J Educ Technol High Educ. 14, 24. doi:https://doi.org/10.1186/s41239-017-0060-3 Check
- H5P.com (September 24st 2021). "Content types not installed on H5P.com". Retrieved March 10, 2022. Check date values in:
- Atherton, Peter (2018). 50 Ways to Use Technology Enhanced Learning in the Classroom: Practical Strategies for Teaching. Learning Matters. p. 129. ISBN 1526448084, 9781526448088 Check
|isbn=value: invalid character (help).