HTML 5 is coming. You as Java developer might think: “Yeah so what, I’m not a webdesigner.”; but since todays applications are webapps you do have to deal with HTML.The version 5 will not only contain a lot of new tags, HTML 5 will go further into the concept: “Semantic Web”, this means; to separate your scripts and styles from the HTML and use descriptive markup so your code is accessible for all users and machines. In this article I will explain you some of the new HTML 5 features (and okay, I will leave out the design related details).

HTML has almost reached his age of 20 years, founded by Tim Berners Lee. HTML stands for HyperText Markup Language, (the way to describe the structure of a text-based document).
The current version we are working with is HTML 4.01 and all the versions are in maintenance by the W3C (World Wide Web Consortium). HTML 4.01 is available since 1999, so we are definitely ready for a newer version, especially while the world is thinking in terms of “Web 2.0″.

Now before you open your favorite editor and think: “Let’s work from now on with HTML 5″, it’s not official yet and it probably won’t be before 2010 or even 2012. That means not all browsers can work with all the new tags and nothing is more annoying then (base) specifications that can change (JavaFX anyone?). But I think it’s worth for giving it already a try and use it for some experiments. Currently the newest Opera browser gives you the best results for working with HTML 5, this because Opera has the Presto engine. (Mozilla Firefox uses Gecko, MS Internet Explorer uses Trident, Google Chrome and Safari – WebKit and Konqueror uses KHTML.)

The HTML 5 specification will not be considered finished before there are at least two complete implementations of the specification. This is a different approach than previous versions of HTML had. The goal is to ensure that the specification is implementable and usable by designers and developers once it is finished.

One of the goals of HTML 5 is “user-friendly”, but there also should be tools available for better working offline and user input.
Let’s list some of the new features:

Semantic Web
<header>, <article>, <section>, <aside>, <nav>, <footer>

These tags are there for describing content. I read in a magazine that these tags are there for making the life of a developer easier with building and reading of page sources.
Personally I think these tags are there for more commercial reasons. Search engines can index pages easier (Imagine how often you visited a site which did not contain the content you searched for.) and advertisement companies such as Google can better analyze the content of a webpage. (For example Adsense banners who match with the original page content.)

When you mix these tags with the older HTML 4.01 tags, you’ll notice that the Document Object Model will handle different with <h1><h2>…, text headings in for example a <section> or <article>.

There are also tags like: <figure> for tagging an image with a text note, or <dialog> for a conversation between people, with the old tags <dt>(participant)</dt> and <dd>(the text quote)</dd>.

Multimedia
You can use the <embed> tags for including video, audio or Flash / Silverlight but HTML 5 now also supports his own video and audio tags:
<audio>,<video> – These tags can be used same like the <img> tag, only these tags needs to be closed.

For example you can easily control a video:
HTML:

<source src="foo.ogg" type="video/ogg">
    <source src="foo.mov">
    Your browser does not support the <code>video</code> element.
</video>

Javascript:
var myVideo = document.getElementsByTagName("video")[0];
myVideo.play();

A cool thing to mention: HTML 5 will support 2 free opensource codecs: Ogg Theora (for video) and Ogg Vorbis (for audio),
which is easy to implement and therefor will be supported by all modern browsers.

Another nice tag within HTML 5 is the <progressbar> tag, with some little more Javascript you can animate the progress of loading.

<progress><span>0</span>%</progress
where the <span> tag can be animated.

WebForms 2.0
Several new values are introduced for the type attribute of the input tag. As with the older types, UAs are recommended to show specialized widgets for these types, instead of requiring that the user enter the data into a text field:
“email”, “url”, “number”, “range”, “date”, “time”, “datetime”, “week”, “month”.

There are also new attributes for declaring ranges: “min” and “max”.
You can use this for data, time or numeric fields, but also for upload controls. (incase of an upload control, it declares the min and max number of files to upload.
There will be also a step attribute for the precision allowed for the date-related, time-related, and numeric types.

For example:

  <label for="time1"> Preferred delivery time: &lt;/label>
  <input id="time1" name="time1" type="time" min="08:00" max="17:00" value="08:00" /> —
  <input id="time2" name="time2" type="time" min="08:00" max="17:00" value="17:00" />
  <input type="datetime" step="120" name="start">

And finally there’s a way how you can use regex on a field to make sure that the values are according specification:
The “pattern” attribute contains a regular expression that the control’s value must match before the form may be submitted
When the value doesn’t match the control’s type or the pattern, the “typeMismatch” flag must be set.
When the pattern is not a valid regular expression, it is ignored for the purposes of validation, as if it wasn’t specified:

<label> Credit Card Number:
<input type="text" pattern="[0-9]{13,16}" name="cc" />
</label>

Offline data storage
Think (Google) Gears, this contains a database engine based on SQLite for storing data offline.
HTML 5 will contain a client-side database storage API, which allows web applications to store structured data locally using a medium many web developers are already familiair with: SQL.
The API is asynchronous and uses callback functions to track the results of a database query.
Compact usage defining a callback function on the fly might look something like this:

Javascript:

var database = openDatabase("dB Name", "dB version");
database.executeSql("SELECT * FROM test", function(result1) {
   // do something with the results
   database.executeSql("DROP TABLE test", function(result2) {
   // do some more stuff
   alert("query finished executing");
   });
});

Canvas
<canvas>
Personally I don’t know if I’m gonna use this tag often, but with the canvas tag, it’s possible to draw shapes and images and animate them.
I can imagine that this is cool for creating and animating circle graphs and charts, on the otherhand why wouldn’t you use Adobe Flex, Flash or JavaFX for this? A cool example of the use of the canvas tag can be found here:
3D example and Graph example

<script type="text/javascript">
function drawCanvas(){
    var canvas=document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
 }
</script>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

Bye bye frames
And I won’t miss them. HTML 5 does not support framesets anymore. And that is a good thing cause frames are affecting accessibility and usability
very badly. Oh yeah and they are so 90’s.

Handy Links
Well there’s so much more to tell about HTML 5, this quick overview covers only the half. There for I wrote some handy links down:

• HTML 5 differences from HTML 4 W3C
• Browser Comparison
• Firefox handles <video> implementation
• Ogg Theora (opensource video codec)
• Ogg Vorbis (opensource audio codec)