30 (Very) Cool Examples of HTML5 Websites

alt="30 (Very) Cool Examples of HTML5 Websites" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2011/11/html5-sample-site-500x338_c.jpg" />

HTML5 is the newest version of the HTML standard and it comes packed with many features to spice up any website. Some of the new tags included in HTML5 include the video, audio, and canvas. HTML5 also has many advantages over its predecessor including but not limited to reduced development costs, local data storage, code maintenance, and new forms.

Below are 30 cool examples of websites using HTML5.

1. Green House

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-1.jpg" width="750" />

The Green Houses uses the <nav> and <hgroup> HTML5 tags to create this beautiful looking website. The website also includes information on turning your house into a greenhouse to help save the environment.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://greenhouse.fedehartman.com/" target="_blank">Take a look at what you can do to help the planet.

2. Vlog.it

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-2.jpg" width="750" />

Vlog uses the <nav> HTML5 along with a lot of JavaScript to make this site truly stand out. This site is definitely worth taking a look at if you have some extra time.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://vlog.it/" target="_blank">Take a look at Vlog.it

3. Overlapps

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-3.jpg" width="750" />

Overlapps is a headquarters for mobile device applications. This site uses the <section> HTML5 tag and JavaScript to bring the page to life.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.overlapps.com/" target="_blank">Take a look at some Apps for your phone.

4. The Elder Scrolls Skyrim

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-4.jpg" width="750" />

The Elder Scrolls Skyrim is a site dedicated to Elder Scrolls Fans. This site only has a couple HTML5 tags in it but combined with JavaScript the developers were able to make a beautiful site for the fans of this game. If you are a gamer this site is definitely worth taking a look at.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://theelderscrollsskyrim.com/" target="_blank">Take a look around The Elder Scrolls Skyrim

5. Banner Inspiration

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-5.jpg" width="750" />

Banner Inspiration did a great job developing a website that is interactive with the viewers. The site only uses a couple elements new to HTML5 but they did a great job mixing it up with JavaScript and CSS.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.bannerinspiration.com/" target="_blank">Take a look at Banner Inspiration

6. HTML5 Awesome

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-6.jpg" width="750" />

The name says it all here; HTML5 Awesome uses many different elements exclusive to HTML5 to bring their site to life. Some of the major tags used include <selection>, <nav>, <header>, <figure>, <aside>, the meta charset element, and many others. This site is truly HTML5Awsome.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://html5awesome.com/" target="_blank">Take a look at HTML5 awesome for yourself.

7. Cibgraphics

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-7.jpg" width="750" />

Cibgraphics is a design studio that provides printed materials and web design to their clients. Their site uses the <section> and <footer> HTML5 tags nicely to bring you a clean yet powerful website.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.cibgraphics.com/" target="_blank">Take a look at Cibgraphics website.

8. Keyzo

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-8.jpg" width="750" />

Keyzo is an IT solutions company that provides a range of services to meet their client’s needs. It is clear that Keyzo’s website was developed around HTML5 because the <section>, <header>, and <footer> elements were used frequently.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.keyzo.co.uk/" target="_blank">Stop by and take a look at Keyzo.co.uk

9. CSS Winner

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-9.jpg" width="750" />

CSSWINNER is a website show case for developers to show off their work. The site was built using only a couple HTML5 elements and a lot of JavaScript and CSS.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.csswinner.com/" target="_blank">Take a look at some of the sites being featured at CSSWINNER.

10. Catcubed

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-10.jpg" width="750" />

Catcubed is a site about art, code, and design. The site has a unique look and is loaded with HTML5 elements. Some of the elements being used include <nav>, <article>, <header>, and <footer>.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://catcubed.com/" target="_blank">Take a look at Catcubed’s unique website.

11. CSS Religion

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-11.jpg" width="750" />

CSS Religion is a site all about religion and is presented in a clean and efficient manner. The site does not use much HTML5 native elements but it is loaded with CSS that works with HTML5.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://cssreligion.com/" target="_blank">Take a look at the layout of CSS Religion.

12. An Event Apart

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-12.jpg" width="750" />

An Event Apart is a website that offers training for web developers all over the country. The site is built to attract the attention of web developers and it uses a lot of different features to do this.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.aneventapart.com/" target="_blank">Take a look at An Event Apart.

13. CSS Menu Samples

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-13.jpg" width="750" />

CSS Menu Samples is another site designed to show off work. It was built around the <header> and <footer> HTML5 native elements and is an attractive website.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.cssmenusamples.com/" target="_blank">Take a look at CSS Menu Samples’ showcase.

14. MW Template

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-14.jpg" width="750" />

MW Template is designed to show off websites that have gone the extra mile and created an impressive mobile website. MW Templates is another site that only uses the basic HTML5 tags and a whole lot of JavaScript and CSS. This site is very interesting if you are into mobile devices.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.mwtemplate.com/" target="_blank">View some of the best mobile websites at MW Templates.

15. HTML Email Gallery

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-15.jpg" width="750" />

HTML Email Gallery is dedicated to emails that are HTML based. The sire offers enough content to keep you busy for a while. HTML Email Gallery is loaded with native HTML5 tags including <section>, <nav>, <header>, and <footer>.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.htmlemailgallery.com/" target="_blank">Take a look at some HTML based emails.

16. The Inspiration Grid

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-16.jpg" width="750" />

The Inspiration Grid is a site designed to provide inspiration to the viewers with a gorgeous website. This site uses the <section> tag nicely and is designed for user interaction.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://theinspirationgrid.com/" target="_blank">Get inspired at The Inspiration Grid.

17. Landing Page Gallery

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-17.jpg" width="750" />

The Landing Page Gallery is another site designed to showcase website. This site focuses on displaying the landing page of impressive websites. Like most other gallery sites this site was built using a lot of HTML5 tags. Some of the tags used include <header>, <section>, and <footer>.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.landing-page-gallery.com/" target="_blank">Take a look at some cool landing pages.

18. Rockstar Working

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-18.jpg" width="750" />

Rockstar Working is a web site designing company with a unique website of their own. This site was designed to draw in the users attention and was built using the <header>, <section>, and <footer> HTML5 commands.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://rockstarworking.com/" target="_blank">Checkout Rockstar Working’s website.

19. Teespiration

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-19.jpg" width="750" />

Teespiration is a website that sells unique tee shirts. This website is loaded with JavaScript, CSS, and some HTML5 elements. This site is worth taking a look at even if you are not in the mood to buy a new tee.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://teespiration.co.uk/" target="_blank">Check out some tee shirts at Teespiration.

20. Garbage.ro

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-20.jpg" width="750" />

Garbage.ro has a very unique website that uses blocks for navigation and content display. This site was designed primarily on JavaScript while still using some HTML5 elements. I have to say I have not seen many sites with this type of design.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.garbage.ro/" target="_blank">Take a look at Garbage.ro’s truly unique site.

21. JQM Gallery

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-21.jpg" width="750" />

JQM Gallery is a gallery of cool and unique mobile websites. This site was built using mainly on JavaScript and CSS but it does use some HTML5 functions. If you are looking for ideas for a mobile website this is a good starting point.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.jqmgallery.com/" target="_blank">Check out some mobile websites at JQM Gallery.

22. Theme Design Gallery

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-22.jpg" width="750" />

Theme Design Gallery is a website dedicated to showing off and selling cool and unique websites. This site was built using a mix of CSS, JavaScript, and HTML5 to give the viewer the best experience.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://themedesigngallery.com/" target="_blank">Get some website ideas from Theme Design Gallery.

23. Will Work for Art

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-23.jpg" width="750" />

Will Work for Art is a site that is designed to show case different types of art. This site was not designed like a typical gallery giving it some extra points in my book. This site release heavily on the <article> HTML5 tag and without it the site would not be able to function.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://willworkforart.net/" target="_blank">View some cool art at Will Work for Art.

24. Web Banner Galler

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-24.jpg" width="750" />

Web Banner Gallery is a banner display site that offers a user rating section. This site was built using a mix of HTML5, JavaScript, and CSS. Web Banner Gallery offers an easy way to view highly ranked web banners for webmasters to view and get ideas from.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://web-banner-gallery.com/" target="_blank">Check out some banners at Web Banner Gallery.

25. Codedread

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-25.jpg" width="750" />

Codedread is a site that offers code for games and other projects. It is setup in a completely different way than most other sits of this type. The site was designed using mainly only tags found in HTML5.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.codedread.com/" target="_blank">Get some code for your next project from Codedread.

26. Empire State Recordings

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-26.jpg" width="750" height="440" />

Empire State Recordings is a site all about music. This site was designed to be unique and stand out. Empire State Recordings was built using CSS, JavaScript, and of course HTML5.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://empirestaterecordings.com/" target="_blank">Listen to some music and Empire State Recordings.

27. Editorial Template

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-27.jpg" width="750" />

Editorial Template is a WordPress template that is designed to meet the publishing requirements of digital magazines. This site is one of the few sites that I have seen to actually use the <canvas> tag.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://editorialtemplate.com/" target="_blank">Take a look at Editorial Template’s website

28. CSS3 Designer

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-28.jpg" width="750" />

CSS3 Designer is a site that makes cool CSS3 buttons for webmasters. This site has a great layout ad was built using the <article>, <section>, <header>, and <footer> HTML5 tags.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://css3designer.com/" target="_blank">Make yourself a new button at CSS3 Designer.

29. AX Visual

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-29.jpg" width="750" />

AX Visual Design Studio offers design services to meet the needs of their clients. This site has outstanding images on it and was built using the <header>, <footer>, and <section> HTML5 tags.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.axvisual.com/" target="_blank">Take a look at Ax Visual’s website.

30. Film Review Friday

class="border" alt="" src="http://www.webhostingsecretrevealed.net/images/2011/1101-30.jpg" width="750" />

Film Review Friday is a film review site that is designed for smaller, or Tweet sized, film reviews. This site is loaded with HTML5 tags and has a unique look to it. The site uses many tags only available in HTML5 like the <header>, <footer>, <article>, and <section> tags.

class="meteor-icon" style="font-size:12px !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://filmreviewfriday.com/" target="_blank">Take a look at some of Film Review Friday’s film reviews.

Can’t get enough of HTML 5?

So do we! Here’s more on the topic, go check them out.

class="nostyle special icon-list">

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/featured-articles/learn-html5-10-must-read-lessons/">Learn HTML 5: 10 Must Read Lessons

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/web-design/getting-started-with-html5-css3/">Getting Started with HTML 5

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/featured-articles/10-must-know-html5-tips-tricks-with-sample-codes/">Master HTML 5: 10 Instant Tips and Tricks with Sample Code

class="list-icon icon-angle-right accent" style="font-size: 85% !important;"> href="http://www.webhostingsecretrevealed.net/blog/featured-articles/top-30-html5-tutorials/">Top 30 Must Read HTML 5 Tutorials in 2012

Page 26 – Web Hosting Secret Revealed