HTML5 is the latest markup language for creating and presenting content on the web. Since its advent it has been in news as it is quite awesome. It is really handy and user-friendly, and offers enhanced functionality. Web developers love using HTML5 as it boasts various new features which make Web development a lot handier. You may like Html5 Cheat Sheets for your web development projects.

So today we have a list of 30 Awesome HTML5 Tutorials and Techniques for all the web designers and developers out there. We hope that these samples, tutorials and techniques would prove to be helpful for you. So check them out and learn new cool stuff.

Implementing HTML5 Drag & Drop

A new feature of HTML5 is native drag and drop. This tutorial will teach you how to implement drag and drop to create a simple shopping cart interface.

How to Draw with HTML 5 Canvas

One of the great HTML5 specifications is Canvas, which is the ability of programmatically drawing using JavaScript.

HTML5 File Uploads with jQuery

As the name suggests, this tutorial will teach you how to create a small web app known as Upload Center, which allows people to upload images from their PCs by dragging and dropping them onto the browser window.

Design a Blog with HTML5

HTML5 boasts such feature which involves JavaScript APIs. This makes it a lot handier to develop interactive web pages. It will teach you marking up a blog.

How to Build Cross-Browser HTML5 Forms

In this tutorial you would be taught to serve HTML5 forms to modern browsers. It compensates for older browsers by utilizing a mix of Webforms2, Modernizr, jQuery UI and assorted jQuery Plugins.

How to Code a CSS3 & HTML5 One-Page Website Template

Here you can get to know how to create a HTML5 web template, utilizing some of the latest features of CSS3 and jQuery, with the scrollTo plug-in.

HTML5 Canvas Element Guide

This is a really cool guide which can help you understand the canvas element and the kinds of things required and expected in its associated code.

Making an HTML5 iPhone App

Learn how to create an offline HTML5 iPhone app.

Have a Field Day with HTML5 Forms

This tutorial will teach you how you can create a cool HTML5 form utilizing some sophisticated and latest CSS3 techniques.

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial you will learn how to build a blog page using next-generation techniques from HTML5 and CSS3.

Bouncing a Ball Around with HTML5 and JavaScript

This one is a really nice guide which will discuss the use of use of HTML5s canvas element by a fun example of how to create a bouncing blue ball.

Another HTML5 Tutorial from Brad Neuberg

In this tutorial the Google Employee Brad Neuberg tells us why HTML5 matters to both, consumers and developers. He also discusses the practical implications of the alterations coming with HTML5 support in modern browsers.

Blowing up HTML5 video and mapping it into 3D space

This one is a really cool tutorial where you can learn how to blow up a HTML5 video and then map it into 3D space. It is definitely a must try.

Comprehensive video tutorial on HTML5

As the name suggests, this one is a comprehensive video by a Google Employee named ‘Brad Neuberg’. In this video he gives us an introduction to HTML5. It can prove to be really helpful for people who don’t have enough time for reading articles.

The Official Guide to HTML5 Boilerplate

In this screencast, Paul Irish gives a detailed review of each page. He then also gives further explanation on why and when each snippet can be used in your projects.

How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery

Here you will learn how to create a bar which pops up at the top of a page, and rests above the content (just like ‘hellobar’). It has only been tested in Chrome and Safari, so it might not work in other browsers.

Making a Beautiful HTML5 Portfolio

In this tutorial you would be able to learn how to create a stylish HTML5 portfolio based on jQuery and the Quicksand plugin. This can be used for showcasing your latest work. The best thing is that it is totally customizable.

An HTML5 Slideshow with Canvas & jQuery

Mostly the uses of canvas are limited to games and other such stuff. This tutorial teaches you the creation of a progressively enhanced slideshow with beautiful transitioning effect. The best part is that it is fully functional in older browsers too.

Designing Search Boxes with HTML5 and CSS3

In any website, having a search box is a must. In this tutorial you can learn to design a search forms and also a few techniques and tricks to create usable and nice looking search functionality.

Code a Vibrant Professional Web Design with HTML5/CSS3

This tutorial will teach you how to create a vibrant and professional design using HTML5 and CSS3.

Simple Website Layout Tutorial Using HTML5 and CSS3

Here you can learn how to create a really Simple web page with HTML5 and styling with CSS3.

HTML5 Visual Cheat Sheet

This one is a really cool and useful HTML5 cheat sheet for web designers and developers which can come in handy. It is a simple list of all HTML tags and of their related attributes supported by HTML versions 4.01/5.

How to Make All Browsers Render HTML5 Correctly — Even IE6!

Learn how to create a common layout utilizing some of HTML5s new semantic elements, then using JavaScript and CSS for making your design backwards-compatible with Internet Explorer.

Creating an Animated 404 Page

The name says it all, this tutorial teaches you how to create an animated 404 page, that can be customized and ameliorated with ease.

Creating an ad in HTML5

HTML5 is a new technology that is competing with Flash for next generation web technologies. One of the most popular uses of Flash is animated and interactive advertisements. You can read this article to find out more on this subject.

The video element

The video element is latest in HTML5 and allows playing a movie within your website. The data of this element can be video, audio or images associated with it.

Create a Stylish Contact Form with HTML5 & CSS3

This tutorial helps you learn creating your own cool contact form completely in HTML5 and CSS3 in few easy steps. It uses some new HTML5 features for adding amazing functionality to the form, while at the same time utilizing CSS3 properties for recreating the Photoshop concept totally in code.

webOS HTML5 Database Storage Tutorial

This one is the first tutorial on webOS / HTML5 database storage capabilities. A must check out for all.

HTML5 Geolocation Tutorial

As the name suggests, this tutorial teaches you the geolocation capabilities of HTML5 and all the basic principles you need to know.