wordpresshubs: HTML5

Affichage des articles dont le libellé est HTML5. Afficher tous les articles

samedi 12 novembre 2016

Getting Started With HTML5 & CSS3

alt="Getting Started With HTML5 & CSS3" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2011/10/html5-500x500_c.jpg" />

style="font-size: 15px; line-height: 1.5em;">Getting Started With HTML5 & CSS3

Using HTML5 and CSS3 can help you make a spectacular website, but, unfortunately most designers don’t use them because they aren’t supported by all browsers. Most Internet users are still using Internet Explorer, so the code will not display properly for most people. Since over half a website’s traffic is with a browser that does not support these two languages, most designers do not use them for popular websites.

Both HTML5 and CSS3 are still in progress, but it is a good idea to familiarize yourself with them now so you can use them when they are the new standard in web design. Both languages will help you get a clean look for your website using simpler code.

HTML5

id="floatright">src="http://www.webhostingsecretrevealed.net/images/2011/1005-7.jpg" alt="HTML 5" width="220" height="220" />

HTML stands for Hypertext Markup Language, and HTML5 is the latest version. Currently, it is only supported by a few browsers, but is expected to increase in popularity and usage in the next year. The entire language is expected to be fully written sometime in 2014, but some features are available now.

Since Flash is infamous for crashing and bugs, Apple does not allow it on iOS mobile phones and devices. As Apple increases in popularity, this creates a problem for developers who want the features of Flash, but also want their apps and websites viewable on an iOS device. HTML5 offers many of the same features of Flash, but runs with less bugs and more stability.

Google will be releasing a HTML5 version of YouTube soon, so this reaffirms how important this update will be in href="http://www.webhostingsecretrevealed.net/hosting-review/inmotion-hosting/" target="_blank">the future of the Internet. Mozilla’s Firefox, however, is resisting HTML5 and IE does not support it, so developers are hesitant to jump on the bandwagon. To further complicate things, different browsers may support different features of HTML5, and not all browsers will support all features. Designers must find out what features will be supported by different browsers when creating a website.

HTML5 lets you create smaller parts that combine and work together to make up the entire page. It allows the designer to create advanced pages with new features that aren’t always possible to create with older versions of HTML. HTML5 is built on HTML4, so designers can build upon existing code to improve the website. This eliminates the need to code the website from scratch, and new features can be added easily.

HTML5 Features

Cache allows the user to navigate web apps while offline.
Canvas element lets you place 2D images directly within the code.
Editing is easier. Change text quickly by adding contenteditable=“true” to an element.
Video and audio support is greatly improved, and you will be able to add both without using a plugin.
It does require a doctype so a browser can display the page in a standard mode, but the doctype has been simplified. Now it is <!DOCTYPE html>.

Why Use HTML5?

Uses WebSockets, so it loads faster than older versions of HTML.
Smartphone apps from all phone brands and models will be able to read one language.
Greater flexibility.
Video, images and audio are embedded within the code, so users do not need an outside plugin.
The language is getting more popular, so websites that do not use it will soon be outdated.
Is is based on HTML4, so you can added new elements within the code.
HTML5 coupled with CSS3 gives you many features and benefits not possible previously.

CSS3

CSS, which stands for Cascading Style Sheets, gives designers flexibility in presenting a website. It allows you to create better looking websites with unique features. Like HTML5, CSS3 isn’t supported by all browsers yet, but it is gaining popularity. CSS3 lets you add effects to the page without using Javascript or other plugins.

One disadvantage to using CSS is that you need to use filters to alter how things appear on the screen for different browsers. Internet Explorer is most known for being buggy and displaying CSS improperly, but Chrome and Firefox can also have bugs. Designers get around this by creating different codes for different browsers or utilize filters to block CSS completely.

CSS3 Features

Rounded Corners

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-1.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://psdslicer.com/" target="_blank">http://psdslicer.com/

Before, you had to use JavaScript to mask the corner of an image or create a separate image for just the corner. Now, you can round corners with the following code:

div {
border: 5px solid #434343;
padding: 10px;
background: #e3e3e3;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 500px;
}

RGBA Colors

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-2.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://vivid-ness.co.uk/" target="_blank">http://vivid-ness.co.uk/

You had to use a PHP script within the CSS code to trick the browser into displaying colors in RGBA. This added unnecessary code in the PHP file. Or, you had to memorize color codes for each color, but now you can specify the amount of each color and their opacity within the code.

Here is the code for CSS3:

background: rgba(150, 25, 150, 0.5);

Text Shadow

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-3.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://www.foundationsix.com/" target="_blank">http://www.foundationsix.com/

A text shadow adds a drop shadow below text to make it stand out or give it visual interest. Previously, the designer had to create two elements with the same text and give one a different color. The darker color was then offset by a couple of pixels and placed behind the other text. With CSS3, use the following code for text shadow:

h1 {
text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

Opacity Level

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-4.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://www.teehanlax.com/" target="_blank">http://www.teehanlax.com/

In previous version of CSS, you had to create PNG files with transparency or use filters for Internet Explorer. Now, you can use the following code:

opacity: 0.5;

Box Shadow

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-5.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://glo.id.au/" target="_blank">http://glo.id.au/

Box shadows let content slide under another area, such as the page’s footer. It makes it look like the content is sinking into the bottom of the website. With CSS3, you don’t have to create an image for this effect. You can also make the shadow appear by hovering over the area.

Before CSS3, you had to use a JavaScript plugin for a box shadow or create an image of the shadow. Now, you can use the following code with CSS3 for a box shadow:

.blogPost img {
margin: 22px 0;
box-shadow: 3px 3px 7px #777;
}

Add Fonts

Previously, websites could only display a font found on the visitor’s computer. Now you can upload a font file to your server and use CSS to call upon that file to display on the page.

Border Images

Now you can use any image as a border rather than using a boring line or dots as a border.

Transform

Lets you code how big you want an area to be when the user hovers over it.

Resizing Elements

Now working in Chrome, Firefox and Safari, this gives users a tool to resize elements. Use the following code:

div {
resize: both;
}

Multiple Backgrounds

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1005-6.jpg" alt="Sample of CSS3" width="750" />
Demo: href="http://www.hangingupthemoon.com/">http://www.hangingupthemoon.com/

Lets you overlay more than one background on a single page with the following code:

body {
background:
url(../images/bottom-left.png) top right fixed no-repeat,
url(../images/bottom-right.png) top left fixed no-repeat,
url(../images/top-left.png) bottom left fixed no-repeat,
url(../images/top-right.png) bottom right fixed no-repeat;
background-color:#ffffff;
}

Final Thoughts

Although not all browsers currently support HTML5 and CSS3, they will in the future. More and more web users and switching from Internet Explorer to Mozilla Firefox or Google Chrome, so designers need to create web pages that work on these browsers and with the features they support.

Both of these languages used together let you reduce or eliminate the need for third-part plugins, which makes it easier for visitors to use your website. Now you can embed pictures, audio and video directly within the website so pages load faster for users.

The two languages provide you with features that were not available before without having to use multiple programs. Now you can code your page quicker and easier with just two languages rather than using outside plugins that require learning yet another programming or web design language. Pages will not display faster and users do not have to waste time downloading the latest versions of plugins.

Both languages have the flexibility of being used for different browsers. Turn off portions of the code for browsers that do not support that code, and use feature rich code for browsers that do support it. HTML5 and CSS3 will soon be supported by smart phones and mobile devices, so designers can use the same page for both mobile and standard versions.

Page 26 – Web Hosting Secret Revealed

Learn HTML5: 10+1 Must Read Lessons

alt="Learn HTML5: 10+1 Must Read Lessons" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2010/06/html5-500x186_c.jpg" />

Note: This post is published in 2010 and it is one of our most popular web design posts. To make this article remain useful and to href="http://www.webhostingsecretrevealed.net/blog/blogging-tips/how-to-recycle-your-blog-content/">prolong the life of this post, I will try my best to keep this post filled with useful and update information. Post last update: June 24th, 2014.

What’s up with the hype of HTML5?

HTML5 is currently being developed as the next major revision of HTML and it is still far away from W3C recommended release date (year 2022 or later). However with the release of Apple iPad, the topic is got extremely heated and almost every web designer are talking/reading/writing/blogging/twitting about it.

Moreover, many early adapters (web developers and geeks) started creating some cool stuffs wtih the cleaner HTML5/CSS3 codes. In case you wanted to be one of them but don’t know where to start, here are list of useful HTML5 tutorials to get you started. It’s been a long week searching and reading on these tutorials (hey, I’m new to this too!) – I hope you make good use of them. Also, if you are one of the authors of these tutorials – I couldn’t thank you guys enough! It’s been a great learning journey reading each of these; thank you very, very much.

1. Udemy’s HTML5 Crash Course

class="border" src="http://www.webhostingsecretrevealed.net/images/2011/1107-12.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

Need a complete beginner lessons in HTML5? Udemy has the best in it. Taught by Robin Nixon, author of href="http://ecx.images-amazon.com/images/I/411zmvViM4L._SS500_.jpg" target="_blank">Learning PHP, MySQL, and JavaScript, the course covers pretty much everything a newbie need to know in HTML5, including basic HTML coding, HTML5 canvas for drawing, geolocation, local storage, as well as HTML5 audio and video.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.webhostingsecretrevealed.com/udemy.php" target="_blank"> Check out Udemy’s HTML5 Beginners Crash Course

2. HTML5 Getting Started Guide

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-1.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

Concise beginner guide in HTML5 – newbies should start reading from here.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.dave-woods.co.uk/index.php/html5-tutorial-getting-started/" target="_blank">Read HTML5 Getting Started

3. Preview of HTML5

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-2.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

This was an ‘overview’ on HTML5 published back in late 2007. Nevertheless, it is still a good learning source for those who are unfamiliar with the codes. Personally I like the ‘big picture’ this article offers.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://www.alistapart.com/articles/previewofhtml5" target="_blank">Read HTML5 Preview

4. What Does It All Mean (Dive into HTML5)

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-3.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

‘Dive Into HTML5’ is a HTML guide book to be published by O’Reilly. The chapter ‘What Does It All Mean’ offers a clear explanation on the basics of HTML5 semantics/elements.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://diveintohtml5.org/semantics.html" target="_blank">Read What Does It (HTML5 elemenets) All Mean

5. HTML5 Demos and Examples

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-4.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

It’s always easier to learn something new via examples. This site provides up to 20 examples of HTML5 experimentations and demos (with source code!).

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://html5demos.com/" target="_blank">HTML5 Demos

6. HTML5 Differences From HTML4

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-5.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

Detail comparison guide of HTML4 and HTML5 by the W3C (there is no better source than this!).

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://dev.w3.org/html5/html4-differences/" target="_blank">Read HTML5 differences from HTML4

7. HTML5 and CSS3: The Techniques You’ll Soon Be Using

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-6.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

This is a great tutorial that combines the application of HTML5 and CSS3 – must read for beginner/advance level of web developer and designer.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/" target="_blank">Read HTML5 & CSS3: The Techniques You’ll Soon Be Using

8. HTML5 localStorage()

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-7.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

One of the best things you can do with HTML5 is to establish a client side database (on user browser) with localStorage. To start using this awesome HTML5 function, the HTML5 localStorage() tutorial series (4 detail articles) published at PaperKilledRock.com comes very handy.

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://paperkilledrock.com/2010/05/html5-localstorage-part-one/" target="_blank">Read HTML5 localStorage()

9. HTML5 Canvas Cheat Sheet

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-8.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

The information provided is pretty much just a condensed copy of WHATWG specifications. However the .pdf file is definitely a must have on your notice board (especially when you are dealing with a HTML5 project that involves loads of canvas elements).

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" target="_blank">Get HTML5 Canvas Cheat Sheet

10. Designing A Blog With HTML5

class="border" src="http://www.webhostingsecretrevealed.net/images/2010/0616-9.jpg" alt="HTML5 Guides: 10 Must Read Tutorials" width="750px" />

This is a tutorial that every blog theme developer will need to read. (You should also read the author’s blog href="http://www.brucelawson.co.uk/2010/ie-and-html5-testing/">Bruce Lawson for more related updates.)

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://html5doctor.com/designing-a-blog-with-html5/" target="_blank">Read Designing a blog with HTML5

11. HTML5 Cheat Sheet

class="border aligncenter wp-image-10012 size-full" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2010/06/html5-cheat-sheet.jpg" alt="html5 cheat sheet" width="750" height="375" srcset="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2010/06/html5-cheat-sheet.jpg 750w, http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2010/06/html5-cheat-sheet-300x150.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" />

What can I say? Everyone loves a cheat sheet or two. ;)

class="meteor-icon" style="font-size:130% !important;">
class="icon-angle-right" style="color:inherit !important;">
href="http://websitesetup.org/html5-cheat-sheet/" target="_blank">Get HTML5 Cheat Sheet

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/30-cool-examples-of-html5-websites/">30 Very Cool Examples of HTML 5 Websites

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 29 – Web Hosting Secret Revealed

Is HTML5 A Go?

alt="Is HTML5 A Go?" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2015/04/default-image-500x308_c.jpg" />

Should we start using HTML5 alraedy?

Some say href="http://ishtml5ready.com/" target="_blank">yes.

src="http://www.webhostingsecretrevealed.com/images/2010/0616-12.jpg" class="border" />

And, some say href="http://ishtml5readyyet.com/" target="_blank">no.

src="http://www.webhostingsecretrevealed.com/images/2010/0616-11.jpg" class="border" />

This is the question I have been asking myself for the entire evening. Opinions?

By the way, check out some of the tutorials and lessons I read recently on the subject: href="http://www.webhostingsecretrevealed.com/featured-articles/learn-html5-10-must-read-lessons/">10 Must Read HTML5 Lessons.

Page 29 – Web Hosting Secret Revealed

Special Rate On Udemy HTML5 Beginner Crash Course

alt="Special Rate On Udemy HTML5 Beginner Crash Course" src="http://whsr.webrevenueinc1.netdna-cdn.com/wp-content/uploads/2015/04/default-image-500x308_c.jpg" />

So you are new to HTML5 huh? If you are serious about it, perhaps it’s time to do more than just reading free resources online.

Why free resources might not be the best learning resources for you?

I know, free tutorials and blogposts (as listed here: href="http://www.webhostingsecretrevealed.com/featured-articles/learn-html5-10-must-read-lessons/">10 Must Read HTML5 Lessons) are good quick learning resources; but, they are not the best for many web developers and webmasters. Why? Well, for one, these individual articles often do not give a complete overall view on the big picture; and two, some of the time, these guides are not written for newbies. Take Robert’s recent article published at WHSR: href="http://www.webhostingsecretrevealed.com/featured-articles/30-cool-examples-of-html5-websites/">30 Cool Examples Of HTML5 Websites, generally it’s a great inspiration round up HTML5 developers – detail explanation on new HTML5 tags, big images for visual inspiration, and a collection of 30 links to other cool HTML 5 sites – but wait, what’s there for the newbies? Nothing!

And you see this in many, many other HTML5 articles.

My recommendation? Join a complete HTML5 beginner course in your local university or college or institute that offers one. Alternatively, if there’s none in your area, signup for an online course.

Introducing Udemy’s HTML5 Beginner Crash Course

href="http://www.webhostingsecretrevealed.com/udemy.php" target="_blank">src="http://www.webhostingsecretrevealed.com/images/2011/1107-13.jpg" class="border" />

Speaking of online course, my recent communication with Dan Murphy of Udemy landed me a special deal on the site’s href="http://www.webhostingsecretrevealed.com/udemy.php" target="_blank"> HTML 5 Beginners Crash Course. Taught by Robin Nixon, author of Learning PHP, MySQL, and JavaScript (remember that href="http://ecx.images-amazon.com/images/I/411zmvViM4L._SS500_.jpg" target="_blank">white book with squirrels in it? :)), the course covers both basic and medium level topics in HTML 5 including canvas drawing, using geolocation and local storage, as well as introducing micro data and offline web apps.

Special Discount, 60% Off

The course original price is /signup but thanks to Dan, it costs (that’s 60% discount!) if you signup following href="http://www.webhostingsecretrevealed.com/udemy.php" target="_blank">this promo link. So… do check it out if you think it’s right for you, alright?

src="http://www.webhostingsecretrevealed.com/images/tick.jpg" /> href="http://www.webhostingsecretrevealed.com/udemy.php" target="_blank"> Check out Udemy’s HTML5 Beginners Crash Course

Page 26 – Web Hosting Secret Revealed

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

Page 26 – Web Hosting Secret Revealed