Table of contents
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
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
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