Introduction to HTML5

Since the internet first became popular in the 90s, HTML (hypertext markup language) has been the standard language for structuring, networking, and supplying cross-platform content on the World Wide Web. Development of further editions was essentially put on the back burner since the publication of HTML 4.01 in December 1999. The internet itself, however, experienced no such slowdown. Surfing the web today is a much different experience than it was around the turn of the millennium. In addition to texts and pictures, multimedia elements are what make today’s internet what it is. Throw in the growing popularity of mobile use, and it quickly becomes clear that today’s changing internet landscape has long since outgrown the previous century’s markup language.

This arrested development has forced websites to rely on a diverse collection of plugins in order to help them satisfy the demands of programmers, publishers, and consumers. A side effect of this makeshift solution is that gaps in security and incompatibilities have become an ever-increasing occurrence. The fifth version of HTML should help bring an end to these inconveniences. In October 2014, the World Wide Web Consortium (W3C) revealed the basic framework of HTML5, which is to serve as the core language for the WWW. But not everyone has adopted the latest version. A large portion of website operators still run their sites on the old version or have moved on to compromises like XHTML. This will all change soon enough.

Developing HTML5

Unlike its predecessor, the fifth installment of the hypertext markup language is a product of two different groups of developers. W3C’s decision to defer HTML 4.01’s continued development, instead opting to proceed with XHTML, left many organisations up in arms over the standardisation committee’s move. This lagging development of new web standards proved to be a thorn in the side of software companies and browser developers. What followed was the founding of a new task force, Web Hypertext Application Technology Working Group (WHATWG), whose goal was to continue the development of HTML standards and focus more on embedding applications. In 2004 WHATWG presented its first version of HTML5. This was enough to convince W3C to put a working group together with the goal of continuing HTML5’s development based on WHATWG’s version. In 2009 the W3C announced its decision to discontinue XHTML’s development and instead concentrate on HTML5 specifications together with WHATWG.

Why HTML5?

During the early days of the internet, most websites were simply there for displaying content. Since then, their purpose has taken on an approach that centres on interacting with online offers. Gone are the days when website visitors saw themselves as mere recipients of content; they now also want to be appreciated as active users. Site owners can satisfy this need by offering interactive contact forms, comment functions, or social media integration. Online games that are loaded directly into browsers are further examples. With HTML 4.01, all of this was only possible with the use of external plugins.

This is where HTML5 is really able to flex its muscles: in addition to angle bracket HTML tags, HTML5 framework contains specified labels (see below), multimedia elements as well as countless programme user interfaces (application programming interfaces, APIs) that are available in combination with JavaScript. Proprietary plugins from private providers, like Adobe Flash, are soon to be a thing of the past. HTML5 programmers are able to work independently of software companies, which allows them to develop secure, barrier-free websites. The following provides an overview of some of the central HTML elements.

New HTML elements

One ground breaking HTML5 development is the introduction of elements for semantic labeling. While HTML 4.01 only allowed rough structuring options though various div elements, special tags like <section>, <nav>, <article>, <aside>, <header>, <footer>, or <main> make it possible to define which type of content is associated with each respective element.

Tag Function
<section> Defines a section within an HTML5 document.
<nav> Defines a section as a navigation bar. Generally links to subpages are located here.
<article> Categorises a section as discrete content within an HTML5 document.
<aside> Defines a section as a side note.
<header> Defines a section as a header. Normally, this is where logos, the site’s titles, and navigation are found.
<footer> Defines a section as a footer. Generally, this is where contact information or copyright notices are placed.
<main> Characterises a section as the main content of a website. The main tag can only be used one time per HTML5 document.

Semantically labeling website sections offers one large advantage: it makes it easier for search engines to crawl HTML documents. Website owners that make it easier for crawlers to interpret HTML5 documents by using the right tags have good chances of a better ranking in the search results.

Multimedia integration

With HTML, adding videos and audio files is just as easy as integrating images. The HTML5 elements <audio> and <video> remove the need to use plugins.

Tag Function
<audio> Labels a file as an audio file.
<video> Labels video content including its audio track.



Programming interface

Programmers can integrate JavaScript objects as APIs into HTML5 documents. The following features a selection of such HTML5 elements that make it easier for programmers to meet the basic requirements of modern web design.

API Function
Canvas With the canvas element, programmers are able to define a certain area of a document with HTML5; this enables dynamic bitmap graphics to be added with the help of JavaScript. In addition to lines, rectangles, and circular curves, this element also supports Bézier curves, colour gradients, and graphics in PNG, GIF, and JPEG formats. One classic application for <canvas> involves integrating diagrams. Examples range from complex applications to online games.
Drag and drop Drag and drop makes it possible to move objects within a HTML5 document or between two websites.
Offline applications With API offline applications, web apps on HTML5 pages are also available to users, even when there’s no internet connection. This is especially relevant for mobile internet use via smartphone; all of the necessary content is loaded into the application cache.
Geolocation In HTML5, Geolocation makes it possible to read out the current location of website visitors. When loading a HTML5 page with Geolocation API, users are asked if they’d like to reveal their current location.     

Working with HTML5

There are many HTML5 tutorials online that show users the ropes of the new markup language. One great starting point is the website. A selection of helpful resources for web developers is also provided by the Mozilla Developer Network. The tagging language is generally supported by current versions of the most popular web editors, eliminating the need to purchase a special HTML5 editor. As is the case with every official web standard, W3C also provides a markup validation service. This tool lets users check a well-formed HTML markup, an important step in ensuring high quality. 

Was this article helpful?