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 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.
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.
HTML 5 Tutorials
Let’s get our teeth stuck into some HTML 5 tutorials, even though the language is in its relevant infancy, there are some great tutorials already available:
Designing a HTML 5 Layout From Scratch
HTML 5 and CSS3: The Techniques You’ll Soon Be Using
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 Geolocation Demo
HTML 5 Resources
These links are to help reinforce your learning of HTML 5 and can act as a refresher when learning the language:
