40+ Useful HTML5 Examples and Tutorials

May 19, 2013 · 87 comments

by Lars

html5-examples[1]

HTML5 examples can be really good inspiration for anyone starting a new web project, after all it is the future of web page markup and we all need to prepare for it. HTML5 is being developed as the next major revision of HTML (HyperText Markup Language). The major market and Internet leaders are already switching to the HTML 5 platform. With Apple and Google both pushing the standards in order to facilitate more advanced web development, we now see HTML 5 implementations popping up all over the place as more companies get on board with the advanced features. With the constant drop of Flash usage in web and Internet applications, HTML5 is opening new doors to web designers and developers. In this scenario, it is indeed imperative for every web developer to know about basic compatibility, features, tricks and tricks of HTML5. Here we present before you, a comprehensive list of more than 40 HTML5 examples, tutorials and techniques that you can’t afford to miss if you are a web developer. This post was just updated with new html resources and all we also checked all links.

Keep in mind that besides coding your own web site from ground up you can also kick start your project using a WordPress theme. Many recent solutions are HTML5 compatible responsive themes and they offer great mobile support. You can find an up-to-date collection on website templates created using HTML5 here.


ElegantThemes
ThemeForest

Advertisement

Let check out some HTML5 Examples

HTML 5 Demos and Examples

image

This site have HTML5 examples all over the place and good ones too. HTML 5 experimentation and demos I’ve hacked together. Click on the browser support icon or the technology tag to filter the demos (the filter is an OR filter).

HTML5 Web Applications

image

HTML 5 browser compatibility overview.

HTML5 For Web Developers

html5-for-developers

Not only one of the best technical specs available online for html5, but also a good html5 example in itself. It is responsive and makes use of HTML5 in various ways.

html5test.com

html5-test

This is a browser test with a lot of detail. Very useful.

Move the Web Forward

move-the-web-forward

This is a very good reference for anyone looking at learning html5. However the site also make use of html5 and if a great html5 example.

Boston Globe

boston-globe

Boston Globe is a beautiful commercial “responsive web design” website making use of HTML5. Try resizing the browser window to see the responsive effect.

Responsive WordPress Themes

responsive-themes

A responsive WordPress theme is a theme build to adapt to the client and to look great in both browsers, iPhones, iPads etc. Responsive design rely on HTML5 and CSS3 features and may very well be the future of web design. This article gives an overview and have demo links to try out the HTML5 examples.

Anatomy of a mashup

atonomy-of-a-mashup

This site is a pretty serious showcase of what is possible with HTML5 and it is all visualised using the <audio> API and<canvas>, with support from CSS3 transforms and transitions.

When Can I Use

can-i-use

Here you will find very useful compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies.

WTF is HTML5

image

One page overview of HTML5 – very useful and with good HTML5 examples!

35 Cool HTML5 Games

Who would’ve thought one day we would be able to create HTML5 games just using HTML5 and Javascript without the help of any other technology such as Flash. And that all we need to run is an updated browser.

html5-games

Building a live news blogging system in PHP, Spiced with HTML5

image

This tutorial show you how to build a news website in HTML5 and CSS3. Every line of code is explained for both HTML and CSS

Create Offline Web Application On Mobile Devices With HTML5

image

A comprehensive article from the technical library of IBM by IT Architect Dietmar Krueger. In this article, the author describes and explains how challenging it i s to write application for operating systems and mobile platforms. Instead of relying on learning the platform specific languages like Objective-C with Cocoa (on iPhone), the author takes the open way of developing things through HTML5. A very clearly explained and in-depth article.

Designing A Blog With HTML5

image

Much of HTML 5’s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. This tutorial investigate these by setting u a blog layout.

40 Beautiful and Creative HTML5 Website Showcase

html5-examples[3]

What is better than seeing something taken into use? Here are plenty of html5 examples to pick from.

Semantics in HTML 5

image

HTML 5, the W3C’s recently redoubled effort to shape the next generation of HTML, has, over the last year or so, taken on considerable momentum. It is an enormous project, covering not simply the structure of HTML, but also parsing models, error-handling models, the DOM, algorithms for resource fetching, media content, 2D drawing, data templating, security models, page loading models, client-side data storage, and more. There are also revisions to the structure, syntax, and semantics of HTML, some of which Lachlan Hunt covered in “A Preview of HTML 5.” In this article, let’s turn solely to the semantics of HTML. It’s something the author has been interested in for many years, and something which he believe is fundamentally important to the future of HTML.

HTML5 & CSS3 Readiness

readiness-html5

Graphical overview of the browser readiness for HTML5 and CSS3 features

Five Web Sites Making Great Use of New HTML5 Features

sites-using-html5

More sites that are good as html5 examples.

html5gallery.com

html5-gallery-examples

This is a site devoted to collecting HTML5 examples.

101 Best HTML5 Sites

101-best-html5-examples

Focus of this site is to showcase the best html5 examples online.

How to Draw with HTML 5 Canvas

image

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

Have a Field Day with HTML5 Forms

image

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.

Coding Up a Web Design Concept into HTML5

image

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

image

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural. This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question.

Coding A HTML 5 Layout From Scratch

image

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play. There are some good HTML5 examples here.

How to Make an HTML5 iPhone App

image

You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn. You can also do it with the skill set you probably already have: HTML(5), CSS, and JavaScript. This tutorial show you how to create an offline HTML5 iPhone application. More specifically, I’ll walk you through the process of building a Tetris game.

Create An Elegant Website With HTML 5 And CSS3

image

Learn five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. But technology doesn’t stop, luckily, and we have other two great allies for the future to design better website: HTML 5 and CSS3.

Coding a CSS3 & HTML5 One-Page Website Template

image

See how to create a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template here.

Design & Code a Cool iPhone App Website in HTML5

image

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.

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

image

In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

HTML5 for Beginners. Use it now, its easy!

image

HTML5 for Beginners have good HTML5 examples. Use it now, its easy! This article cover some of the HTML5 basics in a funny way…

Rocking HTML5

image

This presentation is an HTML5 website and it is a very informative and easy to use overview of the HTML5 elements.

Building Web Pages With HTML 5

image

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.

HTML5 Cheat Sheet

image

This is not HTML5 examples but HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

HTML5 Canvas Experiment

image

Time for us to play with this technology. We’ve created a little experiment which loads 100 tweets related to HTML5 and displays them using a javascript-based particle engine. Each particle represents a tweet – click on one of them and it’ll appear on the screen. (click on the image to see it in action)

12 Incredible HTML5 Experiments

Here you find a collection of Incredible HTML5 canvas-based experiments that will make you HTML5 lover.

HTML 5 Cheat Sheet (PDF)

image

html5 Pocketbooks

image

Other interesting posts on this topic

Author : Lars Vraa

Lars started tripwire magazine back in January 2009. He is really passionate about web design, web development and loves to look into new technologies, techniques, tools etc. and to write articles for his readers.

{ 59 comments… read them below or add one }

Kiash July 23, 2013 at 7:03 pm

Useful collection! Thanks for sharing. :)

Reply

suleman June 10, 2013 at 4:51 pm

thanks for sharing the article :)

Reply

Webdesign May 30, 2013 at 8:56 pm

Great examples for those who are going to learn HTML5!

Reply

Fachim May 29, 2013 at 1:21 am

Nice examples, it’s worth, help us to learn HTML5. Thank you.

Reply

Max May 8, 2013 at 8:24 pm

Great article….thanks

Reply

Ashwini B April 1, 2013 at 9:00 am

Great Post Thank You So much for sharing it..!1

Reply

Max February 27, 2013 at 8:29 pm

Great list! Bookmarked this page and will come back for sure.
I’ll keep reading stuff like this to integrate in my own website.

“The computer is the most remarkable tool that we’ve ever come up with. It’s the equivalent of a bicycle for our minds.”
Steve Jobs

Reply

Bijay Yadav February 5, 2013 at 3:46 pm

Great article. Thanks for sharing. Very informative.

Reply

wecode February 4, 2013 at 3:45 am

This great article helped me a lot in learning HTML. Now I’ve found it very interesting to work with HTML. Thanks a lot!!!!! Keep up with the good work. All the best.

Reply

suren January 24, 2013 at 5:10 am

Great Article, Helped Me A lot To Learn HTML, AND Great Comment Views Too. Very much like this kind of good discussion(on comments) on any subject, Helps us to learn more about the topic we are trying to learn, Thank’s A Lot to all.

by: Suren Siriwardene (SriLanka)

Reply

annesofie January 24, 2013 at 8:21 am

Hi Suren, glad to hear you found the article useful.
Best of luck with learning HTML.

Kind regards,
Sofie

Reply

Dubai Properties December 22, 2012 at 9:50 am

HTML5 going to rocks among others.

Reply

Bension December 8, 2012 at 12:57 pm

nice post. love the post,Great post, thanks for sharing

Reply

Maria James November 28, 2012 at 11:49 pm

Great post, thanks for sharing. This is a really good resource for developers that are still getting to know html. I’ve also come across another good resource which maybe useful for others, it’s on the Sitepoint website and is their html5 tutorial.

Cheers,

Reply

ReeZh Design October 28, 2012 at 7:27 pm

Great round up. Thanks!

Reply

Steve October 10, 2012 at 3:21 pm

Great examples!!!I read through this article and I thought it could be interesting for you too:
http://www.todate.com/blog/an-introduction-to-html5/

Regards, Steve

Reply

Max Parker September 25, 2012 at 8:33 pm

Whoops, code didn’t show up.. A search for <!DOCTYPE HTML> should work.

Reply

Max Parker September 25, 2012 at 8:30 pm

You can do a Globalogiq search for “” to get tons of examples of sites using html5.

Reply

Ali September 6, 2012 at 1:22 am

Very nice samples. Thanks for article

Reply

html5Banner July 24, 2012 at 1:07 pm

what is the main difference of html and html5? and what are the software to be used?

Reply

Prasant Patra July 23, 2012 at 1:08 am

Thanq. I m very glad to had a look of your website. Here are so many things to learn

Reply

Luiz July 13, 2012 at 7:56 pm

thanks..I think I can now develope my own website.
#html5

Reply

Attitude Graphic Design July 6, 2012 at 5:15 pm

Hi, thanks for that. We liked how you mentioned the responsive wordpress themes/1140 grid system we use this all the time in our work. Thanks again. Attitude.

Reply

ah?ap deck dö?eme July 2, 2012 at 10:51 am

supper thanx good

Reply

Sean Peterson June 4, 2012 at 11:16 am

This really is an impressive/extensive list thanks!

I’ve book-marked at least 5 for future reference.

Staying on-topic, a really useful site for creating HTML5 animations is http://www.loxiastudio.com/en

They have nearly 40 different animations to choose from and everything is done on-line (it honestly takes 1-2 minutes) then you simply copy/paste a simple line of code into your site.

Great tool for those who want to stay clear of plug-ins/download and programming.

Reply

Martin Barrow July 11, 2012 at 10:49 am

I would suggest that anyone looking to add a banner/animation/gallery to their sites have a look at this site. Really clear instructions fantastic live support if you do get stuck (literally tool seconds to get a reply) and a fantastic range of animations.

Thanks

Martin

Reply

jayendra April 24, 2012 at 2:03 pm

Thanks to share this.
I hope I can develop drupal theme with html5 now.

Reply

johnes April 20, 2012 at 4:44 pm

thanks..i think i can now develope my own website in two weeks time

Reply

Paul Weston April 2, 2012 at 10:11 am

Thought this was a great article and one that will be very useful to me as a designer. I am working with HTML5 and this article will act as a great resource for me to see what I can create using this platform and how I can push my designs. All the resources are going to be useful to me and I really liked the html5gallery.com site and how it showcases HTML5 sites. Great article and this is something I will be going back to again and again.

Reply

webexstudios March 31, 2012 at 8:37 am

Thanks for such a helpful post.

Reply

jayendra March 11, 2012 at 6:53 am

thanks to share this

Reply

TheWebGoodies February 8, 2012 at 8:09 am

Very nice!! thanks for this post.

Reply

Raghibsuleman January 12, 2012 at 7:54 am

Thanks for this post….

Reply

Delhiwonders January 12, 2012 at 7:53 am

Very nice work.. Thanks for ALL this information!

Reply

robin Hood October 25, 2011 at 3:07 pm

Awesome html5 website design..check this out .. http://www.howgood.im

Reply

Domain Registrar September 24, 2011 at 12:12 pm

If HTML, CSS and browsers mature like this, majority of the standalone desktop applications will swich to HTML based GUI.

A welcome advancement for GUI developers, we dont have to keep track of MFC, Swing and other desktop GUI tools. Just focus on browser based GUI.

Also Software tool development companies can make HTML and CSS be a standard for GUI developement, which may compile into different native GUI.

Reply

John September 23, 2011 at 5:41 pm

Some really good stuff here. HTML 5 is definitely something, as an industry, we should be using more of.

Reply

Mark April 26, 2012 at 10:25 am

Great article, thank you for posting this. After reading your article, I have realized that HTML5 is quite easy. And it also makes things much more neat. I love the links you’ve posted too. As for all the older IE, thats easy – just add the JS. No big deal. Question – do we need to update all our websites that are written in the old HTML to HTML5?

Reply

muthuvel June 1, 2011 at 11:41 pm

Hi,
I need a suggestion.
I need to create a online mobile web application using HTML5.
In that i will use service call and also save some information as a offline using sqlite(Local DB).
it should supports all the browser.
How can i do that.
Please put your input so that its easy for me to start.

Reply

Gabirell December 9, 2010 at 6:09 pm

Fantastic! Thanks for ALL this information! Looking forward to try HTML5 !

Reply

Naweed December 4, 2010 at 5:48 pm

thanx for useful tips.

Reply

amol November 23, 2010 at 2:48 pm

Very useful article thanks.

Reply

dreamincolor November 1, 2010 at 4:08 pm

Don´t forget this 12 Incredible HTML5 Experiments

Check this out: http://www.dreamincoloronline.com/12-incredible-html5-experiments/

Reply

Lars November 1, 2010 at 6:00 pm

Thanks for the tip I have added it to the article.

Reply

Brad Maver October 4, 2010 at 7:53 am

Awesome Round Up! Thank you for sharing.

Reply

MrMikeBong August 18, 2010 at 9:24 pm

Are you kidding me? can HTML 5 create this: http://www.2advanced.com – Not a chance. You are basically saying you are content going back to using paint, horrible graphics and mediocre animation – which every single one of those examples display. It’s as if they just discovered animation.

Take creative thinking and any possible concept which can be brought to life easily with Flash and resort to antique capabilities and BS coding? Missing the boat again with how far back HTML5 really is! and for what? Better question – for Who? Apple. Unbelievably a joke.

I can make any thing fly, drag, rotate, expand, fade and compute – on any type of canvas I can dream up – that can be displayed on ANY browser with Flash. Oh sorry – accept for your nifty touch-screen Apple devices because you think they are cute.

What developers really need is someone who is educated and understands that everything is already possible with Flash. Why the heck would I want my website to look like some antique animated garbage from 5-8 years ago.

This isn’t cool man, these are crap animations and crap display.

And then some moron will respond that flash is a video player again.

Don’t drink the Apple-flavored punch!

Cool? You have got to be joking me.

Sincerely,

A Fact.

Reply

NBot November 18, 2010 at 6:16 am

HTML5 works great on low performance computers. HTML5 doesnt need to download a new “flash update” every three months. HTML5 doesn’t require an expensive program to create it. HTML5 works great on many mobile devices (apple aren’t the only people with mobile devices). HTML5 is great for inexpensive sites for new small businesses. HTML5 is much easier to learn. HTML5 is a much easier way to put videos onto a webpage.

Reply

Badnews November 29, 2010 at 7:28 am

Every tool and technology has a time and place for use. Would I use HTML 5 for everything I developed – probably not. Would I use Flash – probably not. One issue I do have with Flash has nothing to do with the tool or technology – it is the security framework it rides on. That may be one of the reasons there are perpetual updates.

Contradict if you wish…I know the facts.

Reply

Gabirell December 9, 2010 at 6:02 pm

Oh, no… yet another Apple – Windows / Adobe – Apple / Flash – Html5 binary closed thinker… The tool doesn’t make the artist… please keep your OS/Language racism for yourself.

Reply

DontBeAHater August 16, 2011 at 4:23 pm

Besides the hostile tone I have a lot of agreement with MrMike. For programmers Flex/Actionscript is far easier to use than HTML5. There’s no compatibility issues it’s object oriented and very close to Java. For web developers I can see that that might be why they say that HTML is easier. I’m a programmer and I find HTML incredibly frustrating. You have to deal with 3 or 4 different browser compatibilities and numerous workaround hacks. As far as beauty, I have seen HTML5 sites as nice as any flash sites. They don’t work on every browser but they are no less beautiful.

Adobe needs to get it’s act together with performance, and make it even more tightly secured but I love it. It’s what I use for my front ends in business applications not just beautiful apps but useful apps. That said, if I could get all that flex does in HTML and a nice JS framework I’d probably do it. Companies for whatever reason have an aversion to pluggins. It’s them that drive my requirements so it’s them that I try and please not myself.

My big hate on at the moment is how fractured the browsers remain after so many years. That’s what I’d like to see a movement for. That’s what I save my anger for. Not us schleps going around trying to earn a living while fighting the browser world. If you use HTML5 great you make great stuff and it’s very innovative as well. If you use Adobe that’s probably less long term if the critics are to be believed but it’s still in my opinion where the bar is set. I’ve done flex for years and I’ve done HTML for years. I prefer the true client nature flash and actionscript but I can see why it’s not for everyone.

It’s ridiculous to bash one or the other.

Reply

icedwater May 16, 2012 at 11:42 pm

Man, am I late to the party.

Well, I would like to see the day Flash apps get overtaken by HTML implementations. For one, pages in HTML would mean we could actually select the text that looks like text, and not be told to change the quality or to rewind or to read more about Flash Player version X.Y.Z…

@DontBeAHater: As to your problem with workaround hacks in HTML (and those I’ve seen in CSS), it isn’t that the “programming world” is free of those either. When you code for different platforms, you still have to use the correct versions of libraries or things won’t work right.

Maybe what we need is a sort of preprocessor layer for HTML which does the browser-hackery on its own, which can then be included into the source code of every browser. Unless someone else finds some other place to put a layer of abstraction somewhere.

@MrMikeBong: Also, even with Flash there are problems: it’s not like all Flash apps can be run on all browsers and operating systems without a hitch.

Reply

wendy October 26, 2012 at 10:26 am

You are smoking your socks

Reply

Theo July 28, 2010 at 11:09 am

Very useful article as usual !

Reply

peter July 26, 2010 at 3:15 pm

Nice ! really simple and easy

Reply

Saifu July 20, 2010 at 6:39 pm

Great tutorials…very helpful..
thanks tripwire team.

Reply

HTML5fan July 10, 2010 at 7:49 pm

You can also get a quick learning guide as well as 100+ (and growing daily) HTML5 templates at freehtml5templates.com .

Reply

ugh July 9, 2010 at 2:11 am

put your shit behind a fucking cut

Reply

tripwire team July 9, 2010 at 12:12 pm

Your feedback is not very constructive….having a bad day or?

Reply

Jennifer R July 7, 2010 at 3:15 pm

Very nice round up, HTML% will be the future of the web, but using new syntax element sometimes make me confused :D

Reply

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 28 trackbacks }

Previous post:

Next post:


Web Analytics