An introduction to HTML5

By Robert Brown

Get more articles like this:

Related categories

What is HTML?

Before we get stuck into HTML5, we must first take a step back and look at the original HyperText Markup Language (HTML). HTML is a markup language that when viewed in a web browser will display web pages full of information, images, photographs, products and tables etc. Nearly all websites that you go to on the web will have been written using some, if not all, HTML markup.

The building blocks for HTML are written using tags enclosed in angle brackets for example or these tags normally come in pairs like and or and with the first tag called the opening tag and the last one called the closing tag. In some cases you only have the opening tag, for example which is the tag to display an image. In between each tag we add the relevant text, whether that is the title of a page or the content.

Below is a visual example of what a very basic web page may look like:

<html>
  <head>
    <title>
       Hello HTML
  <body>
    <p>Hello World!p>

The web browser then has the job of reading the HTML and turning it all into a complete web page. The actual tags themselves are not displayed but used to interpret the content for the page.

For a more detailed list of the history view the wiki page [http://en.wikipedia.org/wiki/HTML#Version_history_of_the_standard]

The arrival of HTML5

HTML has been around since 1990 and like all things on the web today has undergone a lot of revisions and changes which brings us to the arrival of HTML5, the fifth major revision of the HTML standard. HTML5 is a browser-based programming language and was recently announced to be "feature complete", but won't become the official Web standard until 2014. Most of the major browsers such as Google Chrome, Mozilla Firefox and Apple Safari support many of the new HTML5 elements and this will only continue to grow.

HTML5 will ultimately allow web designers an increased amount of functionality and features ensuring a much more immersive overall user experience. It will allow us developers to create apps and websites with more performance, greater speeds and better graphics, on par with those of desktop applications. There is also the inclusion of Geolocation which can be used to determine the location information of a user using their web browser or mobile.

New and exciting features

As with the release or update of just about anything you get your hands on new, upcoming or not-yet released things. And HTML5 is no different. Here are some of the cool new things us developers can do with the new language.

g
The and elements for media playback such as embedded YouTube or Vimeo
New content-specific elements, like
,
,
and
And new form elements, such as calendar, date, time, email and search

But what does this mean in real terms. Well take a look at a few of these examples (opens in a new window) and you will see that they are taking the different elements of the web and turning them on their head.

Video (using HTML5 techniques) - HTML5 Video
Typography (using HTML5 techniques) - HTML5 Typography
Gallery (using HTML5 techniques) - HTML5 Gallery
Transitions (using HTML5 techniques) - HTML5 Transition
360⁰ (using HTML5 techniques) - HTML5 360⁰
VR (using HTML5 techniques) - HTML5 VR

Current examples of HTML5 use (you will have used without knowing)

When was last time you visited Netflix, YouTube or went to the Apple website? If your answer is 'Yeah, sure. I did those today', then you have used HTML5. Other companies to have already utilised HTML5 include CNN, Adobe, Vimeo and Facebook (Mobile App). Many of Google's famous front page doodles were also built using HTML5.

HTML5 is also used for various mobile apps including the Financial Times smartphone app, launched in June 2011. The FT actually dropped their app in the Apple store in favour of this version. Rob Grimshaw, managing director of FT.com explained that:

There's not a single thing we couldn't do in HTML5 that we could do in our native app.

Here are a few more lovely examples of HTML5 in full use:

CNN Ecosphere Project - http://cnn-ecosphere.com/
The Wilderness Downtown by Arcade Fire - http://www.thewildernessdowntown.com/
This Shell promoting Gamit's new album "Parts" - https://thisshell.com/
Take a stroll down one of the busiest streets in Zurich - http://www.360langstrasse.sf.tv/page/
A scrolling digital comic book like no other - http://www.soul-reaper.com/

* Having any problems with the above links? You may need to update your browser or try one that is HTML5-ready. Download Google Chrome or try out Mozilla Firefox.

HTML5 Stat Attack

HTML5 gives marketers the ability to deliver content on multiple platforms (desktop, tablet, smartphone) at a much lower cost.
HTML5 apps offer almost the same degree of interactivity and app-like behaviours as native apps
As a browser-based technology, HTML5 web apps can be built once and run on almost any device; almost 70% of browsers support this programming language.

Take a look at our introduction to HTML5 with more interesting statistics on HTML5 and the future of the Web.

So what does this mean for the future of the Web?

The future of TV

HTML5 is big news on the Web and Mobile, but something that isn't mentioned too often is the impact it may have on TVs of the future. Using HTML5 makes integration of third party content and services into connected TV services potentially much easier. For example Freesat has built its hybrid broadcast broadband offering using HTML5. YouTube then took advantage of this and launched a HTML5-designed app on the platform. YouView, which is built in Flash, could also soon be rebuilt in HTML5 in order to keep up with the development cycles. Watch this space...

Stronger, better, faster...websites

HTML5 promises a bright future for the Web. It is progressing at a remarkable pace and users of all kinds demand more from their websites and HTML5 can help with this. It will provide businesses with powerful, cross-platform tools for their web and mobile apps and make the Web a more immersive, fun place to be.

Stronger, better, faster...apps

As mentioned previously the Financial Times recently announced it will stop selling its apps through the Apple store following on from the success of the HTML5 web page. This is without doubt a trend that will pick up pace throughout the business world and it's an exciting time to be a Web / Mobile App user. As Web companies, Web browsers and businesses push the Web to the limits it will only mean more and more developments in the structure of the Web allowing us developers enhanced tools, which will in turn provide stronger, better and faster apps.

Finally...

Why not take the html5 browser test - http://html5test.com/ and see how your browser is performing right now. And remember, the next time you visit your favourite website or open up your newest app. Think about what it could do in the future, and not what it does now.

Spread the word...

Share on Twitter, Facebook, LinkedIn, Whatsapp