Since the internet first became popular in the 90s, HTML (hypertext markup language) has been the standard language for struc­tur­ing, net­work­ing, and supplying cross-platform content on the World Wide Web. De­vel­op­ment of further editions was es­sen­tially put on the back burner since the pub­lic­a­tion of HTML 4.01 in December 1999. The internet itself, however, ex­per­i­enced no such slowdown. Surfing the web today is a much different ex­per­i­ence than it was around the turn of the mil­len­ni­um. In addition to texts and pictures, mul­ti­me­dia elements are what make today’s internet what it is. Throw in the growing pop­ular­ity 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 de­vel­op­ment has forced websites to rely on a diverse col­lec­tion of plugins in order to help them satisfy the demands of pro­gram­mers, pub­lish­ers, and consumers. A side effect of this makeshift solution is that gaps in security and in­com­pat­ib­il­it­ies have become an ever-in­creas­ing oc­cur­rence. The fifth version of HTML should help bring an end to these in­con­veni­ences. In October 2014, the World Wide Web Con­sor­ti­um (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 com­prom­ises like XHTML. This will all change soon enough.

De­vel­op­ing HTML5

Unlike its pre­de­cessor, the fifth in­stall­ment of the hypertext markup language is a product of two different groups of de­velopers. W3C’s decision to defer HTML 4.01’s continued de­vel­op­ment, instead opting to proceed with XHTML, left many or­gan­isa­tions up in arms over the stand­ard­isa­tion committee’s move. This lagging de­vel­op­ment of new web standards proved to be a thorn in the side of software companies and browser de­velopers. What followed was the founding of a new task force, Web Hypertext Ap­plic­a­tion Tech­no­logy Working Group (WHATWG), whose goal was to continue the de­vel­op­ment of HTML standards and focus more on embedding ap­plic­a­tions. 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 con­tinu­ing HTML5’s de­vel­op­ment based on WHATWG’s version. In 2009 the W3C announced its decision to dis­con­tin­ue XHTML’s de­vel­op­ment and instead con­cen­trate on HTML5 spe­cific­a­tions together with WHATWG.

Why HTML5?

During the early days of the internet, most websites were simply there for dis­play­ing content. Since then, their purpose has taken on an approach that centres on in­ter­act­ing with online offers. Gone are the days when website visitors saw them­selves as mere re­cip­i­ents of content; they now also want to be ap­pre­ci­ated as active users. Site owners can satisfy this need by offering in­ter­act­ive contact forms, comment functions, or social media in­teg­ra­tion. 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), mul­ti­me­dia elements as well as countless programme user in­ter­faces (ap­plic­a­tion pro­gram­ming in­ter­faces, APIs) that are available in com­bin­a­tion with JavaS­cript. Pro­pri­et­ary plugins from private providers, like Adobe Flash, are soon to be a thing of the past. HTML5 pro­gram­mers are able to work in­de­pend­ently 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 de­vel­op­ment is the in­tro­duc­tion of elements for semantic labeling. While HTML 4.01 only allowed rough struc­tur­ing 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 as­so­ci­ated with each re­spect­ive element.

Tag Function
<section> Defines a section within an HTML5 document.
<nav> Defines a section as a nav­ig­a­tion bar. Generally links to subpages are located here.
<article> Cat­egor­ises 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 nav­ig­a­tion are found.
<footer> Defines a section as a footer. Generally, this is where contact in­form­a­tion or copyright notices are placed.
<main> Char­ac­ter­ises a section as the main content of a website. The main tag can only be used one time per HTML5 document.

Se­mantic­ally 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.

Mul­ti­me­dia in­teg­ra­tion

With HTML, adding videos and audio files is just as easy as in­teg­rat­ing 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.



Pro­gram­ming interface

Pro­gram­mers can integrate JavaS­cript objects as APIs into HTML5 documents. The following features a selection of such HTML5 elements that make it easier for pro­gram­mers to meet the basic re­quire­ments of modern web design.

API Function
Canvas With the canvas element, pro­gram­mers are able to define a certain area of a document with HTML5; this enables dynamic bitmap graphics to be added with the help of JavaS­cript. In addition to lines, rect­angles, and circular curves, this element also supports Bézier curves, colour gradients, and graphics in PNG, GIF, and JPEG formats. One classic ap­plic­a­tion for <canvas> involves in­teg­rat­ing diagrams. Examples range from complex ap­plic­a­tions to online games.
Drag and drop Drag and drop makes it possible to move objects within a HTML5 document or between two websites.
Offline ap­plic­a­tions With API offline ap­plic­a­tions, web apps on HTML5 pages are also available to users, even when there’s no internet con­nec­tion. This is es­pe­cially relevant for mobile internet use via smart­phone; all of the necessary content is loaded into the ap­plic­a­tion cache.
Geo­loca­tion In HTML5, Geo­loca­tion makes it possible to read out the current location of website visitors. When loading a HTML5 page with Geo­loca­tion 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 de­velopers is also provided by the Mozilla Developer Network. The tagging language is generally supported by current versions of the most popular web editors, elim­in­at­ing the need to purchase a special HTML5 editor. As is the case with every official web standard, W3C also provides a markup val­id­a­tion service. This tool lets users check a well-formed HTML markup, an important step in ensuring high quality. 

Go to Main Menu