Home 75 Must Learn HTML5 Resources to Master Your Web Development

75 Must Learn HTML5 Resources to Master Your Web Development

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
  • tutorials
  • HTML5 browser support
  • video and audio guides
  • demos, examples, templates and tools

HTML5 Specs

1. HTML5 Specification at W3

W3 HTML Logos 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

This document provides a comprehensive rundown of the various commands to use when building HTML5 pages, while giving some practical examples on how to use them. .

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.

6. WHATWG

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.

HTML5 References

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.

HTML5 Articles

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.

12. HTML5ROCKS

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.

13. HTML5tutorial.net

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.

HTML5 Previews

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 the Smashing 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 about Semantics 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 a presentation.

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

Watch the introductory video to HTML5 from Brad Neuberg.

27. HTML5 Canvas – The Future of Graphics on the Web

HTML5 Canvas Slideshow Screenshot 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.

HTML5 Tutorials

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.

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. Learn more about building an HTML5 and CSS3 layout.

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 your HTML5 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.

55. Modernizr

This is an open-source JavaScript library that helps you take advantage of emerging web technologies. This library detects and shows, whether your current browser supports the latest HTML5 and CSS3 features. It also lets you use create conditional CSS files for different browsers with different CSS support, all aided with fail-proof fallbacks. Use Modernizr to create multi-browser CSS files without Javascript easily.

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 the handy 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.

Learn to build an HTML5 video player in Javascript through this great tutorial. This lesson is designed to give you a basic understanding of the different options you have with the HTML5 video tag. Moreover, it also give details on the Javascript needed to create some of the typical video controls you’d find in other players. Learn 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:

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

A useful demo that presents Javascript applications and a few that were made using the HTML5 canvas elements. You’ll see some of the applications listed in a grid style. See a few Javascript apps and a few apps made with HTML5 canvas.

70. Canvasmol

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

Free HTML5 Templates . com If you need a HTML5 template fast, you can grab your own free HTML5 template from one of the sites that do provide them. Get your HTML5 templates here and grab a brief HTML5 guide here.

75. Sproutcore: HTML5 Framework

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 the HTML5 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.
//

//

Related Posts via Categories

Tags: ,

24 Responses to “75 Must Learn HTML5 Resources to Master Your Web Development”

  1. 75 Must Learn HTML5 Resources to Master Your Web Development…

    If you strive to perfect your web development skills, then you’ll enjoy this collection of HTML5 resources to master your HTML5….

  2. Abhishek says:

    Thanks for this interesting list . HTML 5 stuff is rare to find , glad to have html 5 contents here

  3. njmehte says:

    A great collection of links to learn everything about HTML5.

  4. blad3runn69 says:

    cool thanks! :)

  5. andbin says:

    Hi, If I may I would like to mention my HTML5 canvas examples available at:
    http://andbin.typepad.com/webtech/html5-canvas-examples.html

  6. I like the way the web is going with HTML5. It will help it move faster if more people jump on the band wagon.

  7. SREE says:

    GREAT ,THIS IS REALLY INFORMATIVE.

  8. Thanks for the share. I found the cheat sheet very useful! :-)

  9. This is awesome thanks :)

  10. Kavita Martin says:

    Nice collection!!

  11. [...] HTML5 Resource 1 Link   [...]

  12. A pretty comprehensive list. Many thanks.

  13. I love this article. thank you for this nice collection. good job

  14. Neil says:

    Some useful pockets of HTML5 information within this list you’ve compiled. I’m a fairly advanced website designer, but when it comes to HTML5 I feel like I’m constantly learning. Thanks for taking the time to do this!

  15. Nice collection of websites! There’s a ton in there that I haven’t seen before.

  16. Dave Brixius says:

    This list is awesome. Thank you so much! Another source for html5 is html5boilerplate.com

  17. Will Nash says:

    Really useful stuff here! Welldone! Good work collating all this stuff into one place!

  18. Great resource and I couldn’t of found this at a more useful time thanks

  19. Meg says:

    Great list of resources. Thanks for putting it together!

  20. great resource and too useful and very nice blog post to read and keep sharing such a useful resource.

  21. html5 website design says:

    Its simplly great.

  22. Odell Plamer says:

    I’m continuously searching on line for blogposts that may possibly support me. Several thanks ! email

  23. gaowpeawoa says:

    Wow, marvelous blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is great, as well as the content!. Thanks For Your article about 301 Moved Permanently .

Leave a Comment

Receive blog updates by email: