HTML5 has become the new buzz word in website development and it is highly used in web templates today. Developers are adapting their websites to feature HTML5 and it won’t be long till more people jump on the bandwagon and take advantage.
Early adopters have been around for years already, and there are several sites which will show you a whole host of HTML5 sites including HTML5 Gallery and 101 Best HTML5 Sites. But due to poor browser support, there have been few corporate examples. In this article we give you five hand-picked web sites making use of new interesting HTML5 features.
What makes a good HTML5 site worth being inspired of and learning from? Well, as the specification is changing constantly it is hard to define an authoritative checklist. However some of the newest features in HTML5 are very interesting and should be included:
- New HTML elements such as <header>, <footer> and <section>, making the overuse of <div> no longer a concern. The <header> tag for example defines an introduction to the document. ex.
<h1>Page Title is put here</h1>
<p>Introduction text for the header is put here</p>
- A new backwards compatible, easy to remember doctype (at last!). The <!DOCTYPE> declaration must be the very first thing in your HTML5 document, before the <html> tag. This tag tells the browser which HTML specification the document uses. The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
- Canvas – allowing for animations without the need for Flash. The <canvas> tag is used to display graphics. The <canvas> tag is only a container for graphics, you must use a script to actually paint graphics.
- Video – a highly customizable video player in the browser, again without the need for Flash. The <video> tag defines video, such as a movie clip or other video streams. ex. (ogg format can be found here http://www.theora.org/)
<video src=”movie.ogg” controls=”controls”>
your browser does not support the video tag
Using these features, among others of course is a definite way to ensure a clean HTML5 structured layout. The question is when HTML5 is really ready and well enough supported for being used in large and serious projects. Please share your opinion on this in a comment, thanks.
There is an ongoing the argument that whatever HTML5 can do – Flash can do better. For example, Canvas animations are considered jerky on some computers, something which has long been used within Flash without this effect. However, Flash is not an option for any of the Apple mobile products and it won’t be long before browsers are improved to a standard where HTML5 issues, such as jerkiness, will be a thing of the past.
HTML5 provides developers with the means to create highly compelling and engaging websites, and it is a real possibility that HTML5 will be preferred by developers when designing web apps in the future. HTML5 is indeed very popular today and I encourage you to take a look at our up-to-date article about HTML5 website templates.
Here are our top 5 sites that have embraced the new HTML5 features – what is your opinion are they good, is HTML5 cool and worth using?
ManicSpaceman – Game using Canvas. Take a look at the source code to see how the game is build using a single canvas and some script.
sketchpad – more canvas fun! This is a well featured drawing application build using HTML5. You should give it a try and look at the code to see how it is done!
mygreenheat.co.uk – HTML5 doctype and elements
Vaullt – Nice video element
subcide.com – Uses new form elements. See how the future of web forms is coded.
Although the initial roar about HTML5 is dwindling, and many are now finding faults complaining it is really just a tidy up of HTML4. But, a tidy up is not a bad thing, HTML4 was born in 1999, and this new evolution was much needed.
Once internet browsers become more aligned with new languages such as HTML5, and begin adapting to unsure features can be showcased to their best advantage, the next generation of languages can evolve.
Until then, developers will enjoy playing with the code in their free time but it will be a while before they suggest a new HTML5 site to their clients!
Have you found any great HTML5 sites that you want to shout about?