HTML 5 preview

The web is evolving like never before and HTML 4 has been around for almost a decade. Developers and publishers want a new technique to provide enhanced functionality.

To give us, the publishers, more flexibility, HTML 5 will introduce a wide range of new, exciting features such as form controls, APIs, multimedia and some new structure.

The work on HTML 5 started 2004 is held by W3C HTML WG and WHATWG. There are also a couple of other representatives from the major browsers; Mozilla, Opera, Microsoft and Apple.

HTML 5 is still a work in progress and got plenty of more developing hours left before release. This article is written as a brief of “What to come” for all us, the developers and publishers.

The HTML 5 structure

Allmost all HTML 4 pages is dividing the pages into headers, footers, containers, sidebars, contents, etc. Yeah, you name it and they have it. In this case we use what is called a “div element”. In the new HTML 5, we are introduced to new elements that represent this sections. Instead of using:

<div class="header">

We can now use another method, which structures it all far better:

<header>

A theoretical page could in HTML 5 look like:

<body>

<header>This is the header text</header>

<nav>This is our navigation</nav>

<leftsidebar>This is our left sidebar</leftsitebad>

<content>This is the main content</content>

<rightsidebar>This is our right sidebar</rightsidebar>

<footer>The footer..</footer>

</body>

I think you get the point here..

The video and Audio elements

Since the startup of sites such as YouTube, the demand of good video and audio elements have been increasing. HTML 4 is lacking in the matter of successfully embedding and controlling multimedia. Therefore, most sites have been using flash to provide with those functionalities. Flash is currently the only widely used plugin which is cross-browser compatible and have the desired APIs for the developers.

The new HTML 5 video and audio elements have the purpuse of making this easy. Opera has already released a build with partial support for video elements. With this, you use the video element and then the browser will provide the user with a default user interface. An example of code in this matter is:

<video src="myvideo.ogv" controls width="400" height="300">

<a href="myvideo.ogv">Download my video</a>

</video>

The controls attribue is a boolean variable which asks whether you want the inbuilt browser UI or not. In this case, we want!

It’s also as easy to implement audio into the page. The attribues between and is pretty much the same too.

<audio src="mymusic.oga" controls>

<a href="mymusic.oga">Download my video</a>

</audio>

As you see, it looks about the same.. Of course you cant choose the width and height of the audio-sample.

Another good idea of this new elements are that you can choose different sources of the media depending on what codecs the user have. To implement this action you just add another source, with another video type:

<video>

<source src="myvideo.3gp" type="video/3gpp"

media="handheld">

<source src="myvideo.ogv" type="video/ogg;

codecs="theora, vorbis">

</video>

<audio>

</audio>