Sunday September 26, 2010
With HTML5 browser adoption on the way, you might want to brush up your HTML5 skills with the following resources and examples.
- HTML5 specifications
- HTML5 references
- HTML5 tutorial articles
- HTML5 previews
- HTML5 browser support
- video and audio guides
- demos, examples, templates and tools
1. HTML5 SPECIFICATION AT W3
Naturally, the HTML5 specification from W3 is the first resource anyone serious about learning HTML5 should consult. This version of the specification introduces new features to help Web application authors and new elements, based on research into prevailing authoring practices. Also, special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability. Read the W3 HTML5 specification.
2. HTML: THE MARKUP LANGUAGE
This document describes the HTML markup language and provides details necessary for producers of HTML content to create documents that conform to the language. By design, it does not define related APIs, nor attempt to specify how consumers of HTML content are meant to process documents, nor attempt to be a tutorial or "how to" authoring guide. Learn more about the HTML5 markup language.
3. HTML5 REFERENCE: A WEB DEVELOPER'S GUIDE TO HTML 5
4. HTML5 DIFFERENCES FROM HTML4
This document gives developers an in depth look at the major differences between HTML5 and its predecessor HTML4, while highlighting new unique features. This document also provides information on HTML elements that have been removed from HTML5. Discover HTML5 Differences from HTML4 and unique HTML5 features..
5. HTML DESIGN PRINCIPLES
A must-have document that discusses new design guiding principles for development of HTML5. Discover design issues that are pertinent with HTML5. Learn more about HTML5 Design Principles used by the HTML Working Group.
The Web Hypertext Application Technology Working Group (WHATWG) serves as a venue for people interested in the maintenance and development of the HTML language. Being the main team that supports the W3C working group, WHATWG handles that technology development for web browser standards. Be a volunteer today and develop your HTML skills with WHATWG.
7. W3SCHOOLS.COM HTML 5 TAG REFERENCE
Keep plugging away with HTML5 with this handy HTML5 reference from W3Schools. Become better at web development using the HTML5 reference at W3Schools.
8. HTML 5 REFERENCE GUIDE
An easy to use reference guide wherein tags are listed alphabetically that gives a quick definition and use, plus notes on the differences in HTML4 and HTML5. This guide was designed to aid HTML5 students and professionals. Stay sharp with an HTML5 reference guide.
9. HTML5 GLOSSARY
This online dictionary provides a quick and reliable definition of HTML5 terms or tags. Study the HTML5 glossary to understand what's said about HTML5.
10. HTML5 CHEATSHEET
A handy cheat sheet that lists all available HTML5 tags and tag attributes into an easy to use format. Browse the sheet to quickly locate a particular tag and read more about it. The chart is printable for use when you are offline. Use an HTML5 cheatsheet to stay up-to-date with HTML5 easily.
11. <HTML> 5 DOCTOR
HTML5 doctor is a compendium of articles that cover the development and use of the HTML5 language. The site is useful in getting detailed references for HTML5, including reviews and tutorials. Keep learning HTML5 with HTML5Doctor.
HTML5 Rocks offer several tutorials for immediate hands on experience. The site has a so called “code playground” where users can experiment with the tags and view the results right away. Several web page layouts are also provided. Get a quick grasp of HTML5 at HTML5 Rocks.
A collection of HTML5 resources, tutorials and tips that can provide new ideas to web programming beginners. The site connects users to other sites which will offer more detailed HTML references. Learn more of HTML5 withHTML5 tutorials..
14. ULTIMATE COLLECTION OF HTML5 AND CSS3 RESOURCES
A good site that features a comprehensive collection of articles for learning and updating your knowledge of HTML5 and CSS3. Become a god of web development by mastering HTML5 and CSS3.
15. HTML5 SAMPLES, TUTORIALS AND NEWS
A site dedicated to following new resources and news about HTML5. Stay up-to-date with HTML5 news and skills at HTML5 Samples.
16. 23 ESSENTIAL HTML 5 RESOURCES
Learn more about HTML5 from 23 more resources. Learn more HTML 5 from 23 resources
17. 70 MUST-HAVE CSS3 AND HTML5 TUTORIALS AND RESOURCES
If you want to find even more HTML5/CSS3 resources, there is plenty to choose from in this collection of 70 resources. Dive into the 70 HTML5 and CSS3 resources.
18. HTML5 WEBSITE LAYOUT TUTORIALS AND INSPIRATION
Read 5 more HTML5 tutorials and get inspired by 20 designs, made with HTML5. See more HTML5 tutorials and 20 designs with HTML5.
19. HTML5 AND THE FUTURE OF THE WEB
This article gives readers a basic and detailed introduction to HTML5 and its new features. Also the site explores the potential implementations and enhancements that can be seen in HTML. See how well theSmashing Magazine predicted the future of HTML5 in 09/2009.
20. QUICK GUIDE TO HTML5
From this article, see what the new HTML code will offer. The Quick Guide to HTML5 gives you an insightful look at the capabilities of HTML5, while describing potential applications that will come out of it. The Quick Guide to HTML5 will help you to learn more about new features and advantages of HTML5.
21. YES, YOU CAN USE HTML 5 TODAY!
A must read for amateur web developers, the article explores the potential of HTML5. It also probes several new features of HTML5, and points out how the language can be easily used by novice developers. Learn the basics of HTML5 with Sitepoint.
22. SEMANTICS IN HTML 5
Semantics is probably one of the most complicated areas of HTML5 for some. With this article, developers will get to see how semantics has evolved in HTML5. There is also a quick look at solutions for some of the most common issues with regards to HTML semantics. Learn more aboutSemantics in HTML5.
23. HTML5 PRESENTATION
See how HTML5 has undergone a wide array of development in last few years. This presentation takes you on a detailed tour of the development history of the new language. This will serves as a good introduction for those who are new to the language. Get started on HTML5 with apresentation.
24. GETTING STARTED WITH HTML5
This article provides a quick introduction to HTML5 and its new features. A comparison with HTML4 is also shown for viewers to see the differences. A good introductory piece for those developers wishing to learn more about HTML5. Get started with HTML5.
25. BIG THINGS AHEAD FOR HTML 5
A must read for those working on HTML for the first time. The article provides an easy to read introduction to HTML as well as its latest incarnation HTML5. It also gives a quick list of the new features that make it even better than its predecessor. Get started on HTML5 with PeachPit.
26. HTML 5 VIDEO TUTORIAL FROM GOOGLE DEVELOPERS
Google developers have created an introductory video about HTML5 regarding:
- Web vector graphics with the Canvas tag and Scalable Vector Graphics (SVG)
- The Geolocation API
- HTML 5 Video
- The HTML 5 Database and Application Cache
- Web workers
27. HTML5 CANVAS - THE FUTURE OF GRAPHICS ON THE WEB
A 40-slide video presentation that comprehensively explains everything about HTML5 canvas - from the overview of canvas up to the future of canvas. Learn everything about the HTML5 canvas.
28. DIVE INTO HTML5
After reading all those HTML5 tutorials, this e-book is definitely the next step for all those learning HTML5. The guidebook offers several guides on how to do some common HTML5 tasks. The book is written in an easy style for all readers. Learn the nooks and crannies of HTMl5 with the Dive into HTML5 online book.
29. W3SCHOOLS HTML5 TUTORIAL
This online school – known for teaching the basics of HTML programming - now hosts a HTML5 tutorial for your enjoyment. Use the opportunity and start learning HTML5 now with W3Schools.
30. BUILD WEB APPLICATIONS WITH HTML 5
This must-see site for advanced developers gives an in depth look at developing web applications while providing several examples for readers to look at and use for themselves. Learn how to build web applications with HTML5.
31. HTML5 UNLEASHED: TIPS, TRICKS AND TECHNIQUES
From this article, learn several new features of HTML5 and how they can be used to come up with great pages. Get the complete lowdown on HTML5 tips and tricks.
32. CODING A HTML5 & CSS3 ONE-PAGE WEBSITE TEMPLATE
This tutorial will guide you through the process of creating an HTML5 template. Learn how to create an HTML5 template.
33. HTML 5 AND CSS 3: THE TECHNIQUES YOU'LL SOON BE USING
In this tutorial, you will be introduced to a series of techniques that will make the most out of HTML5's yet to be common features to create unique and professional pages. Learn the HTML5 and CSS3 techniques you'll soon be using.
34. HTML 5 TUTORIAL SERIES
35. HTML5: WHAT WHY HOW
A quick to read FAQ that covers everything about the history of HTML5, how it was developed and what the new features are. Get most of your HTML5 questions answered with an HTML5 FAQ.
36. TOUCH THE FUTURE: CREATE AN ELEGANT WEBSITE WITH HTML 5 AND CSS3
This tutorial features a step by step guide on how HTML5 and CSS3 will help you to come up with a classy and elegant page. Learn how to create an elegant site design with HTML5 and CSS3.
37. HTML 5 CANVAS - THE BASICS
Learn how to make great use of the HTML5 canvas to create graphics on your pages from these easy to follow tutorials. Get started with the HTML5 canvas basics.
38. CREATING AN HTML 5 CANVAS PAINTING APPLICATION
The new canvas element in HTML5 is a great way of adding simple graphics to your web pages. But with this tutorial, you can actually go further and create personalised graphics for your site. With its easy to follow instructions, you will be doing this in no time at all. Learn how to create an HTML5 canvas painting application.
39. DESIGNING A BLOG WITH HTML5
A tutorial that offers a very easy to follow instructions that can aid web developers in adding more edge to their blog using HTML5. Learn how to design your blog with HTML5.
40. SIMPLE WEBSITE LAYOUT TUTORIAL USING HTML 5 AND CSS 3
Start today and create a good web page layout with the use of HTML5 and CSS. This detailed tutorial provides a step by step guide on how to come up with great looking pages and amazing results. Learn how to create a HTML5 and CSS3 layout.
41. HTML5 + CSS3 LAYOUT
Start learning how to design your web pages with this easy guide. The tutorial gives you a detailed overview of the design process of making a HTML5 and CSS3 layout. It will also provide you with solutions to browser compatibility issues. .
42. CODING AN HTML 5 LAYOUT FROM SCRATCH
A tutorial guide that gives easy step by step instructions on how to come up with a simple yet striking HTML5 layout. Learn a few tips to improve your designs, too. Read another HTML5 layout tutorial to design HTML5 layouts from scratch.
43. HOW TO MAKE AN HTML5 IPHONE APP
This exciting tutorial gives you detailed instructions on how to come up with your own HTML5 application for the iPhone. This easy to follow guide will soon be running your home brewed game on your phone. Learn how to build an iPhone app with HTML5.
44. CODE A BACKWARDS COMPATIBLE, ONE PAGE PORTFOLIO WITH HTML5 AND CSS3
This is a run through of the basics of HTML5 and CSS3. This quick guide will help you in dealing with some of the common compatibility issues encountered in HTML5, while giving you several handy solutions for them. Learn how to build a web design portfolio with HTML5.
45. HAVE A FIELD DAY WITH HTML5 FORMS
This guide will help you in creating user friendly HTML5 forms that you can incorporate to your site. Plus, there are several tips that you can use to improve your forms. Learn how to create an awesome HTML5 form easily.
46. IMPROVE YOUR FORMS USING HTML5
Another article at creating and improving web forms with HTML5. Improve yourHTML5 forms with advice from Opera developers.
47. HTML5 WEB SOCKETS
This great and useful tutorial will show you how to use a new HTML5 feature, web sockets, to its maximum potential, while providing an example as well. Learn how to use web sockets in HTML5 and see an example.
48. HTML 5 SQL TUTORIAL - THE BASICS
A quick instruction guide that enables you to incorporate SQL functionality into your pages by using HTML5. The tutorial is easy to use and can be implemented right away. Enhance your skills in HTML5 and SQL with the HTML5 SQL Tutorial.
49. HTML 5 WEB SQL DATABASE API
HTML 5 has a lots of APIs that will allow you to create richer applications. One of the useful features is HTML 5's new "Web Storage" API. Check out more on these posts on HTML 5 Local Storage and HTML 5 Object Persistance. Add SQL functionality to your web site using this useful guide that features easy steps on how you can connect to an HTML5 SQL database with just a few line of code. It will also teach you how to efficiently run queries on these databases. Connect to your SQL database with HTML5..
50. OFFLINE APPLICATIONS WITH HTML 5
Learn how to use HTML5 to create an offline application, such as a to do list app, from this tutorial. Create an offline application with HTML5..
51. DRAG AND DROP IN HTML5
This must have guide provides all the essential information that you will need in creating drag and drop events in HTML5. The tutorial also gives examples on how to do it. Learn how to use drag&drop in HTML5.
52. CREATE MODERN WEB SITES USING HTML5 AND CSS3
This free tutorial lesson will bestow upon the readers a hands-on introduction to HTML5 and CSS3. The lesson is designed to provide readers useful information about the functionality and syntax for many of the new elements and APIs that HTML5 offers, as well as the new selectors, effects, and features that CSS3 brings to the table. Create websites with HTML5 and CSS3 with some help from IBM web developers.
HTML5 Browser Support
53. WEB DESIGNER'S CHECKLIST
This table allows you to see which browsers support HTML5 web applications. See, which browsers support HTML5 web apps.
54. WHEN CAN I USE...
A good reference tool that enables developers to know different approaches on browser compatibility. This tool features a selection list of modern web technologies and reports which browsers support HTML5 applications. Learn which HTML5 apps and CSS3 properties and values you can use in different browsers.
56. HANDY GUIDE TO DETECTING SUPPORT FOR HTML5
A useful guide that gives good solutions and alternatives for browsers that doesn't support the features you are currently using. This article serves as a great source provider of tips on detecting support for HTML5. Read thehandy guide to detecting support of HTML5.
Video and Audio with HTML5
57. EVERYTHING YOU NEED TO KNOW ABOUT HTML5 VIDEO AND AUDIO
Learn the basic details about HTML5 media through this great tutorial lesson. This article provides an example of HTML5 audio and video elements which you can refer to when playing an HTML5 media. learn everything you need to know about audio and video in HTML5.
58. INTRODUCTION TO HTML5 VIDEO
This article provides a precise introduction to HTML5 video and audio, and everything you must know on regards of it. This will be a good start for those who are new to the video application. Read the introduction to HTML5 video.
59. EMBED AUDIO AND VIDEO IN HTML 5 PAGES
This tutorial provides new structural tags that can help you in eliminating the “div-soup” of HTML 4.x layouts, and some other semantic tags so you can give your pages easy-to-parse dates, metadata and captioned images. Tips on how to add audio and video content through HTML5 tags were also provided. Learn how to embed audio and video with HTML5.
60. HTML 5 GUIDE FOR THE VIDEO PROFESSIONAL
A 16 minute video that enable you to learn who is behind the HTML5 format. Plus, providing some additional tools for video encoding. A breakdown of relevant containers and codecs for HTML5 were also shown in this tutorial video. Learn more aboutvideo and HTML5 to become a better web video professional.
61. TUTORIAL: HOW TO BUILD AN HTML5 VIDEO PLAYER.
HTML5 Demos, Examples, Samples and Tools
62. HTML 5 DEMOS AND EXAMPLES
The page shows a categorized list of HTML5 demos which you can view and learn more about it. While along with it, you can see which browser supports the particular demo. See these HTML5 demos for yourself.
63. HTML5 - INFORMATION AND SAMPLES FOR HTML5 AND RELATED APIS
This site serves as a good source for samples and tests that are suitable to use on HTML5 and APIs. The page features a compatibility table wherein you can see the features together with the web browser supporting it. See more tests for HTML5 and APIs.
64. HOW HTML5 WILL CHANGE THE WAY YOU USE THE WEB
This article discusses topics such as what HTML5 is, what its features are, and how to use it. Each topic presents a video for easy learning. Learn how HTML5 will change how you use the web.
65. DEATH TO FLASH: 3 GREAT HTML 5 DEMOS
These three HTML5 demos:
- show you how fast you can change whole portions of an application, when editing in-browser
- let you use a variety of HTML 5-related tools
- offer an open source Web-based sequencer that records your sample options and reflects your loop in the browser
Learn more about the HTML5 demos to better understand the scripting power of HTML5.
66. HTML5 CANVAS EXAMPLES
A site that provides a reliable collection of HTML5 canvas demos and examples. The demos were putted on a list form that will definitely ease your search. In addition to this, they have categorized the examples according to genre so that users can find what they want in a short period of time. See more HTML5 canvas examples.
67. HTML5 CANVAS AND AUDIO EXPERIMENT
The page shows you different and useful experiments with HTML5 canvas and audio. Examine these experiments with HTML5 canvas and audio.
68. BLOWING UP HTML5 VIDEO
This is a site that allows you to click on certain videos and see how it blows up in front of your very eyes. Plus, the site will teach users on how to create such blowing up videos. Learn how to make a blowing up effect in videos with HTML5.
69. HTML5 CANVAS GAMES
An outstanding usage of HTML5 canvas built as online molecule viewer tool. This tool contains many molecules to view in 3D view with customizing the view port. It has lots of features including:
- Import Molecules in PDB , SDF and MOL files format
- Animated Molecules
- Drag and Drop the widgets to customize the interface
- Control the molecules using your mouse or 3D view port option
- list of the common molecules for teaching purposes
- and it works with Firefox, Opera, Chrome and Safari.
See an awesome example of HTML5 canvas use to see how various molecules are structured.
71. SUBLIMEVIDEO HTML5 VIDEOPLAYER
A video player that requires no plugins or flash! This player offers a high quality service providing a great visual effect for the viewers. See a good implementation of an HTML5 video player.
72. HTML5 EXAMPLES IN THE WILD
Check out examples of HTML5 in "embedded" video, document structure, editable content, canvas graphs and browser geolocation. See a few HTML5 examples you could've seen on the Web.
73. <HTML>5 GALLERY
This gallery is designed to showcase sites that use HTML5 for markup, in order to see how people interpreted the specification and how they’ve implemented it; and also to help people learn about HTML5. Check out the gallery of HTML5 sites to see how else you can improve yours.
74. FREE HTML5 TEMPLATES
75. SPROUTCORE: HTML5 FRAMEWORK
This HTML5 application framework builds responsive, desktop-caliber applications in any modern web browser, without using plugins. This site also provides demos and sample codes for amateur web developers. Use theHTML5 application framework to build HTML5 apps in any browser.
If you know a good site with guides for HTML5, please mention it in the comments. Thanks.