Examples of New HTML5 Features

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.

In this post I have collected 15 examples of what we can do with HTML5 and its potentials. Some of these examples work with the support of Javascript but they show how it’s easy to replace Flash with HTML5.

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 <video> element, falling back to Flash automatically, without the use of JavaScript or browser-sniffing.


10. CanvasPaint

Do you remember the early versions of Paint in Windows? CanvasPaint is a near pixel-perfect copy of Microsoft Paint in HTML, CSS and JavaScript, using the <canvas> tag.


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.


27 thoughts on “Examples of New HTML5 Features

  1. Thanks for this downright website; here is the sort of thing that keeps me on track through out these day. I happen to be looking around for your site after I found out about them from a friend and was thrilled when I located it after looking for long time. As a demanding blogger, I’m pleased to see other people taking initivative and contributing to the community. I’d like to comment to show my appreciation for your work because it is extremely energizing, and a lot of freelance writers usually do not receive appreciation that they ought to get. I know I’ll always be back and definately will pass on the word to my local freinds.

  2. I don’t really leave comments on blog entries but your post was pretty insightful for me. I like it so much that I just had to let you know. Please allow me to copy your article on my website with a link back your site. My readers would love this article.

  3. I personally am very curious about this subject but was put off by the lack of proper information. Needless to say, your blog has turned me around. I am more than satisfied now.

  4. As always, another great article. Checking your blog daily for the latest posts has become a routine for me now. I am practically addicted to your blog.

  5. Looks like my search for informative blogs on this subject has finally come to an end! Even though I recognize that you have a life, but I would definitely like to see this blog updated more often.

  6. This post really helped me fill the gaps I had in this subject. Been looking for something like this for ages but since this topic is so obscure, not many people are knowledgeable in it. Excellent work.

  7. Hello there I ran across an individual’s website whilst searching an associated website along with really I want it, Consider the good return for a second time soon. I agree in your View on this subject topic 100% ! Plus you’ve got a seriously nice style and design anyway.

  8. wow, im seriously impressed with this server but i cant click on the other links. You might wanna make sure your site works in Firefox cuz you know that browser acts up sometimes.

  9. Congratulations on having one of the most sophisticated blogs Ive arrive across in some time! Its just incredible how very much you can take away from something simply because of how visually beautiful it’s. Youve put with each other a great weblog space –great graphics, videos, layout. This is unquestionably a must-see blog!

  10. Thank you for that wise critique. Me & my neighbour were preparing to do some research about that. We acquired a good book on that matter from our local library and most books exactly where not as influensive as your information. I’m extremely glad to see these info which I was searching for a lengthy time.

  11. I admire the useful information and facts you provide inside your articles or blog posts. I’ll bookmark your weblog and also have my kids verify up right here normally. I’m fairly positive they will discover lots of new things right here than anybody else!

  12. I haven’t checked in here for a while because I thought it was getting boring, but the last few posts are good quality so I guess I’ll add you back to my daily bloglist 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.