People are already revisiting and polishing up their HTML skills because of the exciting possibilities of HTML5.
Here are some great examples originally posted on Webification.
The new HTML5 provides some interesting features that allow designers to enhance and boost their creativity. The new useful tags will replace many of typical
div entries from code, the new canvas support allows you to create fantastic animations without using Flash, etc.
1. How we’ll create forms in HTML5
HTML5 contains new interesting input fields that enable us to perform our work and save much time. In this post we can study in deep the new input fields and all their features.
2. Learning About HTML5 Local Storage
This video tutorial shows how to build a simple to-do list with local storage. HTML5′s local storage is a new functionality which we can save data in browsers even the browser is refreshed or closed.
3. Wave motion
This experiment, made by Hakim el Hattab, makes a wave motion rendered using the canvas element. Each bubble holds a tweet with the word water in it. Clicking on them we can read the tweets.
4. In-place editing with contentEditable property and jQuery
contentEditable property is a feature which we can change the content of HTML elements. It’s a wonderful way for user interaction with the website. jQuery editableText is plugin that allows you to convert parts of the page into editable areas, just click on them and when you finish editing click outside. If you convert an inline element (h1…h5, p ) with this script, the line breaks will be disabled.
5. Cross Browser HTML5 Drag and Drop
Drag and Drop mechanism is an User Interface concept used to support copying, list reordering and the creation of link relationships. This tut provides a cross-browsing HTML5′s drag and drop examples.
6. Tetris with HTML5
How much time we spent playing Tetris? Now we can play at this game online with the experiment of Bruno Garcia developed using HTML5′s Canvas.
7. HTML5 presentation
Html5Rocks has created a fantastic presentation of new features using HTML5 structure, local storage and more others of these new property.
8. Flickr PS3 slideshow with HTML5 canvas
This is a great slideshow to see your photos on flickr with a PS3 slideshow style with HTML5 canvas. You have only to enter your Flickr id on page and automatically the script loads your photos into the slideshow.
9. Video for Everybody!
HTML5 introduced <video> and <audio> tags that allow to embeds video and audio files into a website without using external players. Video for Everybody! is simply a chunk of HTML code that embeds a video into a website using the HTML5
11. Ball Pool
Ball Pool is a great example of canvas using. This script use the mouse click and mouse drag for moving or creating other balls into the page.
12. Browser Ball
Browser Ball is a fanciful example of simultaneous use of canvas and drag and drop technologies. Browser Ball attempts to allow the configuration of a seemingly endless array of continuous spaces using multiple overlapping browser windows. Within this multivariate space, users are invited to toss a beach ball both hither and yon.
13. Cloth Simulation
Cloth Simulation is another example of HTML5′s canvas and drag and drop use. This example is a simulation of cloth movements with some interesting customizations.
14. Canvas in 3D
A canvas based 3D engine in this example developed by LBi Lost Boys. In this script we’ll see an amazing 3D interface with random Flickr photos loaded by clicking on surface.
15. Canvas Photo
Another example of Canvas using in this script. Canvas Photo is a simple wall with photos where we can move, resize, add a border to images and export the result in JPG or PNG format.