Welcome to HTML5 tutorial. I will try to guide you through the process of learning HTML5. I first came “in contact” with it while trying to create Diagramo - a flowchart software web application made completely in html5.

What is HTML5?

HTML5 is the new standard for web pages. It was created to overcome problems found in HTML (version 4 and earlier) and XHTML.

HTML5 is actually a set of technologies bundled together.

What's new in HTML5?

As mentioned before html5 is a set of technologies but some of the most important are:
  • canvas tag
  • offline storage
  • new tags to help organizing pages

Canvas tag

Canvas allows JavaScript to draw lines, shapes and images directly into it, basically allowing painting inside browser.

Here is a LIVE (yes it is rendered by your browser) example:

Please upgrade your browser to the last version

And here is the code you have to add to your HTML page to create a similar example:

 

The HTML code is:

<!doctype html>
<html>
	<body>
		<canvas id="example1"></canvas>
	</body>
</html>

 

The JavaScript code is:

var eExample1 = document.getElementById('example1');
var ctx = eExample1.getContext('2d');
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(100,100);
ctx.stroke();

 

<canvas> tag looks like a simple tag but is actually an universe by itself., you can:

  • draw lines, arcs, curves, etc
  • render images
  • use different styles for rendering

The power of <canvas> tag is tremendous. It will replace (actually it is replacing) Flash and Java Applets as the rendering context inside browsers.

Offline storage

One of the most annoying aspects of current web application is they become useless if the network becomes unavailable.

“But net is everywhere!” some might say; True, but try to move away from civilization a little and you might change your mind about that. Also there might be small period of time (ex: underground passages, tunnels) when the connection might not be available.

Also thing that the application you run loaded a huge amount of data and a lot of it can be reused on other pages, why reload same data over and over again when storing that data on the client would do the trick?

Here HTML5 offline storage comes to rescue: it allows application (web pages) to store a lot of data on client side and able to retrieve that data for future use.

Tags for organizing pages

Currently most information present on pages are organized with <div> and <span> tags.

<div> tag is so overused that most of pages are just a huge collection of <div> tags.

More and more people felt that this unacceptable and they created new tags to make the structure of a page easier to understand.

  • <article> - very similar to a <div> but it can be used as an independent section
  • <header> - used to define the header of a page or section
  • <nav> - used to create navigation bars / panels

Next: The canvas tag