HTML 5

Overview
This page is a very high-level overview HTML 5.  This page assumes you are familiar with HTML 4 in the first place. 

HTML 5 is the latest draft of HTML markup.  HTML 5 is used heavily in creating Windows 8 applications as well as web pages.  The main differences are:

• CSS3 support
• <audio> and <video> elements for playback
• <canvas> for 2D drawing and <svg> for scalable vector graphics
• content-specific elements such as <header>, <article>, <section>, <nav>...
• new form controls (input types) and attributes such as url, email, date, time
• support for regular expressions in form controls
• local storage support
• easier form entry validation through attributes on form controls
• drag-and-drop
• geo-location
• application cache
• web workers
• server sent events

Browser Support
Not all browsers support HTML 5.  So take this into consideration when building web pages.  Some may support some or most of the features.  For an unofficial but helpful chart of browser support check out http://www.texaswebdevelopers.com/html5. or the Wiki at Whatwg.org

Tags
One of the main differences between HTML4 and HTML5 is instead of creating divs and providing ID's for the divs - they are now treated as tags themselves.  This simplifies the HTML coding.  For example:

HTML 4	becomes	HTML 5
<div id="header">		<header>
<div id="nav">		<nav>
<div id="article">		<article>
<div id="section">		<section>

There are many more tags and you can visit the HTML 5 New Elements on the W3C website for a complete digest.

Forms
The differences in forms has made things simpler.  Things such as required, placeholder, and patterns.  These are form Attributes.  For example:

HTML 5 Attribute		What it does
required		Make the field a required entry value.
placeholder		Allows you to specify a default value for the field as a prompt.
pattern		You can use Regular Expressions to enforce an entry pattern, such as \d\d\d-\d\d\d\d for a phone number.
autofocus		Indicates the field should receive focus when the page load is complete.

Form Attributes
There are many more attributes and you can visit the HTML 5 New Form Attributes on the W3C website for a complete list.

Audio/Video
The <video> element provides a better way to show video content.  Previously you had a plug-in like Flash or a browser-specific feature.  It provides support for multiple videos, automatic buttons, and a downgrade (browser not supported) message.  The <audio> element provides a standard for playing audio content.  Support for various audio formats is also included.

Canvas and SVG
The <canvas> element lets you draw graphics on-the-fly via scripting.  Scalable Vector Graphics (SVG) is a way to define scalable graphics in an XML format.  Useful for charts or zooming and supports dynamic data.

Geo Location
You can use this to get the geographical position of a user once they approve this feature.  Check out this for more details.

Input Types
The new input types provide for special input form elements.  These new input types have time-saving features associated with them as some of them have built-in validation based on the input type.  For example:

• email
• month
• number
• tel
• time
• url
• and more...

Local Storage
The local storage, called web storage, allows you to safely store data in the user's browser.  Previously this could be done through insecure cookies.  The storage supports session-based and local storage options.  The session-based expires whereas the local does not. 

Application Storage
With HTML5 you can create an offline application that does not require an internet connection.  However, IE currently doesn't support this...but hopefully they will in the near future!

Web Workers
A web-worker is a JavaScript that runs in the background.  You can create and terminate workers without affecting the page.  Very handy for performing calculations, getting updates, etc.  Not supported by IE.  Grrr.  Hopefully they will in the near future!

Server Sent Events
In the past you had to have a web page check for any updates.  With server-sent events, the server provides updates without having to check back.  Not supported by IE.  Double grrr.  Hopefully they will in the near future!