Web Hosting Blog

41 Great HTML5 Tutorials and Resources

09/02/2011

Posted in: Your Website

Want to learn more about HTML5 and implementing it on your website, but not sure where to start? We’ve pulled together a list of great links to help you with the latest version of this essential web language.

Browser Compatibility

The first point of reference is finding out which aspects of HTML5 work in which browsers (so far).

•      Can I use…

•      HTML5 Browser Test

•      HTML5 and CSS3 for the Real World

•      HTML5 Readiness

•      How to make all browsers render HTML5 mark-up correctly (even IE6)

•      HTML5 and CSS3 Support

HTML5 Introductions and Outlines

If you’re keen to get stuck in or want some background reading, bookmark these links for essential information about getting started with HTML5.

•      Dive into HTML5

•      DesignShack’s HTML5: The Basics

•      HTML5 for beginners

•      HTML5 and CSS3 techniques you’ll soon be using

•      HTML5 differences from HTML4

•      HTML5: Old and New Semantics

•      WTF is HTML5? (infographic)

•      W3’s HTML5 Overview

Cheat Sheets & Quick Reference Guides

Keep these to hand for at-a-glance reminders of essential HTML5 tags.

•      Woorkup’s HTML5 Visual Cheat Sheet Reloaded

•      HTML5 Canvas Cheat Sheet

•      HTML5 Pocketbook

•      HTML5 Slides

Creating Layouts, Pages & Templates

These step-by-step tutorials will help you get started with creating HTML5 pages and websites.

•      Create an elegant website with HTML5 and CSS3

•      Designing an HTML5 layout from scratch

•      HTML5 and CSS3 Website Template

•      Building web pages with HTML5

•      Code a backwards-compatible one page portfolio with HTML5 and CSS3

•      Designing a blog with HTML5

Tags, Attributes & Elements in Practice

If you’re interested in learning more about a particular feature of HTML5 and how you can apply it to your website, check out these pages:

•      Structural tags in HTML5

•      HTML5 native drag and drop

•      HTML5: The header element

•      HTML5 Canvas - The Basics

•      Taking advantage of HTML5 and CSS3 with Modernizr

•      HTML5: The video element

•      Custom HTML5 video player with CSS3 and jQuery

•      HTML5 Boilerplates

Forms

Creating beautiful and functional forms just got easier. Take a look at these impressive guides to find out more.

•      Sitepoint on HTML5 Forms

•      A List Apart - Forward-thinking Form Validation

•      Rethinking forms in HTML5

•      Have a field day with HTML5 forms

Mobile Apps

Wondering how you can make an HTML5 app or translate your code to mobile? Have a look at these:

•      Your first mobile HTML5 app tutorial

•      HTML5 iPhone app

•      Design and code a cool iPhone app website in HTML5

•      Create offline web applications on mobile devices with HTML5

•      Creating mobile web applications with HTML5

Have you come across any HTML5 links you’d like to share? Feel free to leave a comment below!

 

Was this article useful? Let others know

(No ratings have been submitted for this entry yet)

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

{author}

 

  • Anders
      09 February 2011 at 14:28

    Jenni

    thanks for this, good respource

    thanks

    Anders

    Anders  
  •   09 February 2011 at 16:45

    No problem Anders, glad you found it useful!

    Jenni  

  {author}

 

  Live chat