HTML5 Elements Useful When Designing eLearning Courses

HTML5 Elements Useful When Designing eLearning Courses


Ever since HTML5 was announced by Word Wide Consortium (W2C) and Web Hypertext Application Technology Working Group (WHATWG), there have been a lot of discussions on the internet. The original purpose of designing HTML5 was to bring uniformity in the way web content is created. What does these developments mean to eLearning training providers? While authoring tools such as Articulate and Captivate have a lot to catch up in terms of making themselves HTML5 compatible, Lectora scores points for the fact that it is HTML – based. Some of the elements in HTML5 would be very useful while designing eLearning courses using Lectora. Here are some which I thought were useful elements.

details Tag – This can be used to provide additional information to the learner, who has the option to view it or hide it.

canvas Tag – This can be used for creating simple 2D drawing with the help of javascript. Simple graphics can be quickly integrated in to the course without having to import the graphic created by an external application.

video Tag – This element identifies the video or movie. Currently, videos are embedded through plug-ins such as flash which are not compatible with mobile devices. However, HTML5 provides this element which could become a standard method to embed video across various platforms. Currently, three video formats are supported in HTML5 – MP4, WebM and Ogg. We hope that other web browser start to support all the formats just like Google chrome in the near future.

audio Tag – This element identifies the sound content. Just like there was no standard format for video, there hasn’t been a standard format to play audio files. HTML5 helps in creating a standard format for audio files. However, currently only Google Chrome supports all the three formats i.e, MP4, WebM and Ogg, while we await its universal acceptance across other browsers.

svg Tag – Scalable Vector Graphics elements can be directly embedded into your HTML page and this will help you create visually rich eLearning content.

Local Storage – Earlier cookies were used to retrieve information which could affect the browser performance. However, with this new element, web storage is not only secure but also fast.

Application Cache – By creating a cache manifest file, you could enable offline access of the content to the learners. The benefit of this feature is that the courses load faster and reduces the load on the server.

Drag and Drop – Drag and Drop is another interesting element that can be effectively used in eLearning courses which require a higher interactivity level.

While HTML5 is still being enhanced and developed, most of these elements are being support by various applications. As I mentioned earlier, HTML5 would become a really powerful tool when all formats of audio and video are compatible, not just in Google Chrome but also in Firefox, IE and Safari.