HTML 5 Overview and Resources Showcase

html5-thumb

When first looking to learn web design the amount of terms you’re faced with can be daunting which is why it’s important to focus your learning on specific languages and techniques.

If you’ve been learning web design or development recently, or even if you’re a veteran of the web sector, you’re sure to have heard people mentioning HTML 5 here and there. So what is HTML 5? Well, this article is supposed to act as a what’s what of HTML 5, giving you an overview of just what HTML 5 is trying to achieve and where you can find more information on some specifics of the language.

what-is-html5

What is HTML 5?

Essentially, HTML 5 is a new version of HTML / XHTML which specifically focuses on the wants and needs of web app developers.  It allows developers to implement a ton of new features in the things they create, for example a lot of new drag and drop functionality, new structuring elements as well as improved support for audio and video.

Why has it been developed?

Up until 2004, the HTML language was developed by the World Wide Web Consortium. A lot of developers were disillusioned with the proposed improvements in the HTML language that the W3C were proposing, many feeling that they were out of touch with the needs of modern day web and app developers. A new group named WHATWG (Web Hypertext Application Technology Working Group) has since taken over development of the language and has named it’s specification HTML 5.

main-features

So, what are the main features of HTML 5?

I’ve spoken about why HTML 5 is being developed, but what are the results of it? Well, let’s take a look at some of the main features that HTML 5 currently employs.

1. The video element

HTML 5 allows you to embed video with the need for third-party plug-ins or codecs, finally meaning that inserting video into a web page is a hassle free experience.

Find out more about the video element

2. The canvas element

In technical terms, the canvas element allows for dynamic scriptable rendering of bitmap images. In terms of the end user, it will allow the creation of things like diagrams, animations and charts / graphs. You can see an example of what can be done with canvas, even at this early stage, over at Mozilla.

Find out more about the canvas element

3. Local storage

Much like cookies, HTML 5 increases functionality for storing web based information locally on your machine. The main difference to cookie functionality being the sheer amount of data HTML 5 allows you to store, perfect for today’s modern, data dependent web applications.

Find out more about local storage in HTML 5

4. Web workers

According to the WHATWG scope, web workers defines an API for running scripts in the background independently of any user interface scripts. Basically put, this allows for smoother running of code-heavy web pages. Inimino state “a worker can be opened by the page, do work in the background without tying up the UI, and notify the page when the work is done. During this time, the page can respond to other events normally.

Find out more about web workers

As you can see from the roundup above, HTML 5 doesn’t just improve the process of creating applications, it improves the fundamental functionality of your web page by making activities smoother and more intuitive.

When can I start using HTML 5?

The basic answer, right now! Although you don’t have to begin using HTML 5 right away, some mainstream browsers are beginning to support the language in their recent releases meaning that the features above are already available for use for those using newer browsers. Deep blue sky has recently posted a great recap of browser support for both HTML 5 and CSS3.

tutorials

HTML 5 tutorials

Let’s get our teeth stuck into some HTML 5 tutorials, even though the language is in it’s relevant infancy, there are some great tutorials already available:

Coding a HTML 5 layout from scratch

HTML 5 and CSS3: The techniques you’ll soon be using

Designing a blog with HTML 5

HTML 5 tutorial – A simple web page layout

HTML 5 examples

There are already a ton of pages displaying live examples of HTML 5 functionality, you can find some great examples below:

HTML 5 Showcase

HTML 5 forms demo

Drag and drop functionality

HTML 5 Geolocation Demo

HTML 5 Canvas Particle

HTML 5 Resources

These links are to help reinforce your learning of HTML 5 and can act as a refresher when learning the language:

HTML 5 cheat sheet

HTML 5 supported features list

Written By Jordan

Jordan is an all-round Internet guy who has dabbled in design, SEO and article writing. He writes for his own web design blog over at awebdesignblog.com and has a passion for lots of white space.

10 Comments

  1. designfollow

    November 9th, 2009 at 12:15 pm

    thanks for this great post

  2. Kathryn Merlihan

    November 9th, 2009 at 01:22 pm

    This is a great one-stop-shop for learning HTML 5. Thanks for the overview!

  3. Design Informer

    November 9th, 2009 at 06:13 pm

    That element about the video is great. No plugins or anything needed.

  4. Andy

    November 9th, 2009 at 11:51 pm

    Fab…always wanted to try out HTML 5..guess i will start off now…

  5. Jannis Gerlinger

    November 11th, 2009 at 09:06 am

    Great Post!
    I’m curious about it.

  6. Jakob

    January 9th, 2010 at 08:18 am

    Both VIDEO and the AUDIO tag has been stripped from the HTML 5 standard. :\

  7. Kara Explores

    January 26th, 2010 at 10:49 pm

    Im still learning HTML 5 – and the one you posted is very useful. bookmarked.

    thanks,
    Kara

  8. GucciHut

    April 18th, 2010 at 12:20 am

    I want learn HTML5 to rebuild my site shop, but i can’t sure if Magento system can easy change THEME to HTML5, my Gucci shop site is base on Magento system.

  9. Robin Cox

    May 24th, 2010 at 04:56 am

    The sad truth is that as always internet explorer is holding web progress back. It will take many years until you can use HTML 5 for business to business (b2b) on the web.

  10. patrick

    October 30th, 2011 at 06:31 pm

    Excellent post, thanks for sharing. HTML5 is making the waves right now.

What Do You Think?