HTML 5 is the new revision to HTML (Hypertext Markup Language), which is the core markup language for the web. It will be the next standard to HTML 4.01, which has been around with us for about 10 years. This is an extremely important update within the website design Cardiff” href=”http://www.webdesign-gm.co.uk”>website design community.

HTML 5 will be adding a wide range of new features to enhance web development and dropping some elements from HTML 4.01 such as font and center, which can be achieved using CSS. The new features will give authors a lot more flexibility to achieve more interactive and exciting websites.

Work commenced on HTML 5 in 2004 and is being worked on by W3C and WHATWG with many representatives from the four major browsers: Mozilla, Opera, Microsoft and Apple. HTML 5 is quite a long way from completion but most of the major browsers support the majority of the new features already.

Supported Browsers:

At the moment, Safari and Firefox support the most HTML 5 features and just behind those two are Chrome and Opera. Unfortunately, Internet Explorer is still a long way behind with all the new features available in HTML 5. It could be a very long time before all major browsers support all of the HTML 5 features but there is no harm in using it to code up your websites today.

New features in HTML 5:

There will be quite a few new features available in HTML 5, which add a lot more flexibility to a website and I will be briefly explaining the some of the major features in this article.

Structure:

HTML 5 introduces a new set of elements to make it much easier to structure web pages. With HTML 4 we used div elements to set the structure for a page with a header, footer, sidebar and content.

DIV elements are used because HTML lacks the ability for describing these parts. HTML 5 solves this issue by introducing elements to represent each of these different sections. The elements include header, nav, section, article, aside and footer.

These new elements will replace the common DIV IDs but they can also be used more than once on a single page as they behave more like classes and standard HTML elements, which you can use over and over again. The main advantage of these new structure elements is due to the fact that they have been very well defined and are a great way to structure a web page.

Audio & Video:

The new audio and video elements make embedding media into a site really easy, which means that no plugins have to be used and can easily be manipulated with scripts. Both of these provide an excellent API (Application Programming Interface) so authors can script their own interfaces.

The video element will currently work in Firefox 3.5+, Safari 3.1+ and the latest builds of Opera. The audio element will work in Firefox 3.5+, Safari 4+ and Chrome 3.

The easiest way to embed a video is to use the video element and allow the browser to provide a default interface for controls. You can also use your own video controls by using the controls attribute and you can add an image of the video incase it doesn’t load using the poster attribute.

Embedding audio into a web page is just as easy using the audio element. Most attributes are common for the video and audio but for obvious reasons there is no poster attribute available.

Canvas:

The canvas element is a region defined in HTML, which can be drawn on. Java script can be used to access the area through a set of drawing functions and allowing for dynamically generated graphics. The canvas element can be used to build games, animations and graphs.

Drag & Drop:

The drag and drop element allow users to drag an object to another location and drop the object in that location. This requires Javascript to fully work as a proper drag and drop function.

Conclusion:

There are so many new features to look forward to in HTML 5 and you don’t need to wait to use them either be aware of the browser limitations. Hopefully in the next few years it will have better support and then we can fully utilise it to benefit our websites. If you want to read the full specification then visit the W3C site to find out more about HTML 5.

Related posts:

1. Web Designers Guide To CSS 3
2. Web Designers Guide To jQuery
3. Useful Guide To A Successful Website
4. HTML 5 Demos
5. Usability Testing Resources For Designers

Posted By: Oli

I’ve been interested in web design for a while and I went to university to study a degree in media and graphics. While at university I developed my design skills using Adobe Photoshop, Flash, Dreamweaver and Adobe After Effects.

Visit Authors Website

Tags: HTML, Web Design

This entry was posted on Thursday, October 8th, 2009 at 8:57 am and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.