Today I have compiled a list of Complete HTML5 Resources and Guide. Though all of us are familiar with HTML5’s possibilities, yet there are loads to explore. HTML5 is the latest version of HTML for structuring and presenting content on the World Wide Web. One of the most exciting buzz in the web circles these days is about HTML5. HTML5 is exciting and anyone who builds web pages is looking forward to implementing its new add-ons in their sites. Web designers and techies everywhere have strong feeling about HTML5 they either love it or hate it depending upon the experience they have gone through. HTML5 is fast approaching and getting wide spread usage.

As already mentioned I have compiled a list of Complete HTML5 Resources and Guide, so all those who are new to HTML5 or do not know how to use it, can take help from my today’s post……so check the post and get tutored today!!

Html5 cheat Sheets/Guides

1- HTML5 Visual Cheat Sheet

This HTML5 Visual Cheat Sheet is an update of my HTML 5 Visual Cheat Sheet that I published for the first time some months ago on my old blog (http://woork.blogspot.com). This cheat sheet is essentially a simple visual grid that contains a list of all HTML tags and of their related attributes supported by HTML 5.

2- Quick Reference Guide

XHTML2 is dead, long live HTML5! According to W3C News Archive, XHTML2 working group is expected to stop work end of 2009 and W3C is planning to increase resources on HTML 5 instead. And even although HTML5 won’t be completely supported until 2022, it doesn’t mean that it won’t be widely adopted within the foreseeable future.

3- Pocket Books

This is a quick and printable pocket reference for HTML5. Very, very useful.

4- HTML5 Canvas Cheat Sheet

The information is pretty much just a copy of what is found in the WHATWG specs, just condensed and hopefully a bit easier to read. There are virtually no explanations, however, and no examples other than some graphics for compositing values and a few other things

Html5 Forms

5- Have A Field Day with HTML5 Forms

Forms are usually seen as that obnoxious thing we have to markup and style. I respectfully disagree: forms (on a par with tables) are the most exciting thing we have to work with. Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article.

6- Create A Stylish Contact Form with HTML5

Follow this step by step process to create your own stylish contact form completely out of HTML5 and CSS3. We’ll be using a couple of the handy new features in HTML5 to add cool functionality to our form, while making use of cool CSS3 properties to recreate our Photoshop concept purely in code.

7- How To Build Cross Browser HTML5 Forms

One of the first efforts toward HTML5 was WHATWG’s Web Forms 2.0, originally called XForms Basic. The spec introduced new form controls and validation, among other things. Later, it got incorporated into HTML5, and was subsequently stripped of the repetition model, resulting in what we know today as HTML5 Forms.

8- Email Sign-up Form

Each form field uses something from the HTML5 spec and we’ll run through it one step at a time. When I refer to a browser supporting a particular feature, I mean the very latest stable release of that browser which you can download from the relevant vendor website.

9- HTML5 Contact Form

Recently when I was working on a HTML5 project I visited a lot of inspirational stuff and today I thought of sharing a HTML5 contact form developed by Landon Miller. The contact form is very simple, light weight and no javascripts included.

10- Create a Simple HTML5 Contact Form

After reading up on HTML5 and hearing all the buzz, I decided to take a few minutes and create a simple form to help me learn a little more about it and maybe share a few things along the way. Accompanying me are 12 new input types, most of which I don’t use in this form, but are pretty snazzy.

Html5 Tutorials

11- Create An Elegant Website With HTML5

I’m sure that who chooses to work as web designer makes a choice of heart, a choice of love. He/she decides to bet any given day on his creativity and his ability of producing an idea and of making it tangible, visible and perceptible for all. These crazy men have my respect. But, also when the creative side is very important for a work, there exists a logical (and technical) part in all creative process.

12- How To Draw With HTML5 Canvas

Among the set of goodies in the HTML 5 specification is Canvas which is a way to programmatically draw using JavaScript. We’ll explore the ins and outs of Canvas in this article, demonstrating what is possible with examples and link.

13- Building Web Pages With HTML5

Depending on who you ask, HTML 5 is either the next important step toward creating a more semantic web or a disaster that’s going to trap the web in yet another set of incomplete tags and markup soup. The problem with both sides of the argument is that very few sites are using HTML 5 in the wild, so the theoretical solutions to its perceived problems remain largely untested. That said, it isn’t hard to see both the benefits and potential hang-ups with the next generation of web markup tools.

14- Designing A Blog with HTML5

It’s a simple matter to change the HTML divs into the new elements. The only difficulty I had was deciding which element to use to mark up my sidebar, as it also includes a search field and “colophon” information as well as site-wide navigation. I decided against the aside element,
as the spec says it “represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content”, but it’s nevertheless content rather than navigation. So I decided to go for the nav element as the closest fit.

15- Structural Tags In HTML5

The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical div entries from our code. So let’s dig in

16- Case Study with Html5

Having all the basic layout complete, the structure in the head and the images had already been exported, we will begin to assemble our HTML. Here we can notice some differences, even simplifications in relation to XHTML 1.0. See how easy it was to decorate the raw Html.

17- Sticky Notes With HTML5

In this tutorial you will take a look at the Webkit Sticky Notes demo that was created when Webkit first landed it’s HTML 5 SQL storage support.

18- Cross Browser HTML5 Drag and Drop

HTML5 Drag and Drop has been talked about a lot lately, but it’s hard to find really useful information about implementing it across multiple browsers. In this tutorial you will learn how to create cross browser HTML5 Drag and Drop.

19- Coding A HTML5 One Page Website Template

In this tutorial you will learn how to make a HTML5 web template, using some of the new features brought by CSS3 and jQuery,

20- Design & Code A Cool IPhone App Website In HTML5

HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

Html5 Video Tutorials

21- Introduction to HTML5

Are you interested in HTML 5 and what’s coming down the pipeline but haven’t had time to read any articles yet? I’ve put together an educational “Introduction to HTML 5″ video that goes over many of the major aspects of this new.

22- Building a Custom HTML5

The HTML5 element is already supported by most modern browsers, and even IE has support announced for version 9. There are many advantages of having video embedded natively in the browser (covered in the article Introduction to HTML5 video by Bruce Lawson), so many developers are trying to use it as soon as possible.

23- Blowing up HTML5

The api lets you take the contents of specific HTML elements and draw them into a canvas, and the 3rd element in that list is just begging to be abused. Copying video into a canvas element means opening up the ability to manipulate or process video frames at runtime. Two concepts instantly came to mind that seemed like fun to try and figure out, here they are below.

24- Html5 Open Video Tutorial

In this tutorial you can find how to process and publish video in a open format.

25- HTML5 + CSS3 = Awesome

HTML5 is the next version of the web markup standard. New features include new tags, offline dbs, and geolation aware browsers. CSS3 is the next generation styling language. Together, they make will make the web a great experience.

26- How to Build an HTML5

This is a tutorial on building an HTML5 video player in Javascript. It’s meant to give you a basic understanding of the different options you have with the new video tag in HTML5, and the javascript needed to create some of the typical video controls you’d find in other players. It’s library agnostic, meaning you don’t need a library like jQuery to create it, however once you understand how everything works it can definitely be simplified/improved on. I’m always open for feedback if you have suggestions.

Html5 Ebooks

27- Introducing HTML5

28- HTML5 Mobile Web Development

Create mobile web applications using the latest HTML5 technologies. In this 10-session video course, you’ll learn how to style your apps to respond to a device’s vertical and horizontal orientation, take advantage of global positioning, embed audio and video, create basic animations, and much more. During this course, you’ll combine HTML5 elements with JavaScript and CSS3 to create apps for Twitter, movie trailers, and an address book.

29- Essential Guide HTML5

HTML5 opens up a plethora of new avenues for application and game development on the web. Games can now be created and interacted with directly within HTML with no need for users to download extra plugins, or for developers to learn new languages. Important new features such as the Canvas tag enable drawing directly onto the web page, the Audio tag allows sounds to be triggered and played from within your HTML code, the web sockets API brings the facility for real-time communication, and the local storage API enables data such as high scores or game preferences to be kept on a user’s computer to be retrieved next time they play your game. All of these features and many more are covered within The Essential Guide to HTML5.

30- HTML5 CSS3 Develop

HTML5 and CSS3 are the future of web development, but you don’t have to wait to start using them. Even though the specification is still in development, many modern browsers and mobile devices already support HTML5 and CSS3. This book gets you up to speed on the new HTML5 elements and CSS3 features you can use right now, and backwards compatible solutions ensure that you don’t leave users of older browsers behind.

31- HTML5 For Web Designers

HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5.

32- Html5 Straight Point

This project-based book walks the reader through the creation of a Web site, using HTML5 and CSS3. It shows how to use the new HTML5 syntax (article, section, and so on) and also how to write JavaScript to force IE to recognize that code so that it can be used right now.

Html5 Applications

33- Color Cycling with HTML5

This is most great demo, here are even set of demos – animated demonstration of various weather effects.

34- Threshold Filter

Using the provided inputs, you can change the image converted and specify a level of threshold – all pixels lighter than this value are converted to white whilst all pixels darker are converted to black.

35- Liquid Particles

Daniel Puhe has created this interesting liquid motion particle demo. There are two flavours: the traditional dots and letters. Move your mouse around the page to have the particles follow the cursor, click the mouse button to send the particles flying in the other direction.

36- CanvasMol

Three-dimensional molecular structures of various elements.

37- 3D Model Viewer

3D viewer of different prepared objects.

38- 3D Earth

pinning around its axis the earth globe.

39- Visualisation with SoundManager2

Jacob Seidelin has created what he believes to be the first music visualisation demo using the canvas element and SoundManager2! Playing Radiohead’s Idioteque, the demo displays frequency bars, waveforms, binary outputs and create an image of Thom Yorke, lead singer of Radiohead.

40- 3D OBJ Viewe

Toxicgonzo has created a canvas application which can read the contents of a 3D .OBJ file and display the results in real-time. This particular demo takes Blender’s monkey model and rotates it. It also displays how many FPS in the upper left corner.

Html5 Games

41- Nano Tanks

Nano Tanks is an impressive HTML5 game optimized for use on the iPhone and iPad. You control the tank on the left and must battle the evil dark tanks on the right. Move carefully and destroy the tanks to advance to the next level. Also, there are rocket upgrades hidden in some of the explosive barrels. It has 10 levels, and seems to run very smoothly on the iPhone.

42- White Rabbit

You’ve got to be a real tech wizard if you can make out that this isn’t actually a flash game, but an HTML5 one. The screen effects are captivating, and so is the game. White Rabbit throws up action packed and fast paced ninja rabbit stuff where you fight against your dinner! The aim – stay put and avoid being eaten up. You get to attack as well and have some really crazy weapons up your attic in the form of Carrot Launcher, Carrot Shurikens, plus the Special Bunny Extreme Power. But you’ve got to be smart using these, as the Launcher and Extreme Power consume the limited supply of energy you have.

43- Crystal Galaxy

This space shooter game features a really neat way of controlling the direction of your space craft using your mouse. This is not the only cool thing about the game. Crystal Galaxy also offers some of the fastest action we have seen in an HTML5 game. Plus, the graphics and music are top notch. You would not know that it wasn’t Flash. This is not the kind of game I would usually play but technically it is brilliant and it would be criminal not to include it near the top of this list. Crystal Galaxy can be played here.

44- Sandpit

Brent Silby has been developing games with HTML5-like technologies for almost as long as the web has been around. He deserves far more recognition for his work in this area. His latest HTML game, created for the Casual Gameplay Design Competition, is Sandpit, an innovative driving game where you have to pave over a sandpit using a truck, avoiding various monsters in the process. Unusual but strangely addictive. You can play Sandpit here.

45- Fontanero

Fontanero is one of the best clones of that legendary game Nethack that we have seen, and it is done entirely in HTML5. Developed for A List Apart’s 10k competition, the game replaces the ascii characters of the original Nethack with clean illustratve icons. This makes the game not only much better looking than Nethack (fans of the original may disagree!) but also much easier to play. The monsters, potions and other items littered around the game actually look like what they are meant to be (well, some of them, anyway). Fontanero can be played here.

46- Agent 008 Ball

Snooker + Bond. It hardly gets any more exciting than this. Add to it the impressive graphical detailing of the game, and Agent 008 Ball comes across as a complete package of wholesome entertainment. The aim is to cue the maximum number of balls on the snooker table in limited time. And in between the mad rush of cueing maximum balls, you come across a naughty explosive ball that would blow off in 30 seconds, unless of course you succeed in cueing it before that. Agent 008 Ball is a test of speed and accuracy of strokes.

47- Angry Birds

Yes, you heard it right; Angry Birds is available in HTML5 now. The aim is to use these fiery eyed birds as missiles and aim them at the blocks on the far end of the screen. A good control of the mouse and a background in physics might be able to help you attain maximum destruction. The HTML5 version of this addictive game uses nice graphical details. It is really funny and interesting at the same time to see the crazy and angry birds crash into blocks and cause mayhem.

Html5 Galleries

48- Html5 Beauty

Html5 Beauty is one of the best site for html5 matterials.

49- Html5 Mania

At first glance, with HTML5, the new elements immediately jump out and command attention. The W3C really listened to the community and planned for the .

50- Html5 Gallery

HTML5 gallery has two primary aims, the first is to showcase sites that use HTML5 for markup, so that we can see how people have interpreted the specification and how they’ve implemented it. This leads me on to the secondary aim which is to help people learn about html5 and how it should be used and how to implement it.

51- Html5 Elite

HTML5 Gallery / HTML5 Inspiration / HTML5 Showcase.

52- Html5 Based

HTML5 gallery, HTML5 inspirations for the world’s best designed high quality & professionally designed websites.

53- Html5 Showcase

HTML5 is being developed as the next major revision of HTML (HyperText Markup Language), the core markup language of the World Wide Web. HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash and Microsoft Silverlight.

54- All Things Five

All Things Five for all your HTML 5 needs. Resources, Tutorials and a showcase of HTML5.