25+ Great HTML 5 Resources to Get You Started

May 19, 2013 · 35 comments

by Lars

HTML 4 has been around for nearly a decade now, and much have happened since HTML 4 landed. The way we use the Internet have taken dramatic turns and the I think the most significant turn is the trend of desktop applications and games going online running in browsers. Many people don’t use email clients any more and simply use online services as gmail or hotmail. The average Internet user today expect seamless embedded media, flexibility, responsiveness, ease of use (usability), off line capabilities etc. in ways we couldn’t imagine 5-10 years ago. Keeping up with users demans isn’t always as easy as it should be and this is where HTML 5 is expected to kick in with a helping hand.

HTML 5 introduces many new interesting elements for example canvas that makes it possible to do new exciting things from javascript, that make it much easier to structure pages and new elements that significantly improve the use of video and audio. We are all excited about the possibilities going to offered in HTML 5 and to get hand on with some of them but there’s a lot to learn and HTML 5 is still in draft status. This means only a few of the new elements have been implemented in latest browsers and you need to be careful how to approach this. Knowing that HTML 5 will eventually hit us keeping track with the new goodies coming up and how HTML 5 develops can’t be waste of time – and even fun. According to W3C News Archive, XHTML 2 working group is expected to stop work end of 2009 and W3C is planning to increase resources on HTML 5 instead.

In this article tripwire magazine provides you with the resources you need to get overview of what HTML 5 is, to get started and to understand how you can benefit from it at this early point in time. I also encourage you to have a look at our post on the latest HTML5 website templates, they can really make your life easier if you are going to build a feature rich website on a tight budget. 


ElegantThemes
ThemeForest

Advertisement

Spec, Reference and Implementation

HTML 5 – Working Draft Standard

This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability. This specification is also being produced by the WHATWG. The two specifications are identical from the table of contents onwards.

Wikipedia: HTML 5

A basic overview of HTML 5 from Wikipedia. You will get the basics settled here and you will find links to relevant resources that you can follow to keep learning.

When can I use…

Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies. While it is unclear how safe it is to use tables like this it is a great way to check if an idea is feasible or not now or when it will be.

Comparison of layout engines (HTML 5)

The tables you find here compare support of HTML 5 differences from HTML 4 for a number of layout engines (IE, Firefox etc.).

Implementations in Web browsers

This is a list of known implementations of HTML 5 in web browsers. Better safe than sorry so check it out before using new HTML 5 elements.

HTML 5 Cheat Sheets

HTML 5 Cheat Sheet

A great quick guide to HTML 5 as a printable PDF from Smashing Magazine

Screen Casts

HTML 5: Features you want desperately but still can’t use

Google I/O 2009 – Google’s HTML 5 Work: What’s Next?

Article and Showcases showing how to use HTML 5

The Power of HTML 5 and CSS 3

Goodbye <div> soup, hello semantic markup? This is a great article digging into new opportunities with HTML 5 combined with CSS 3 – the future of web development really.

Chrome Experiments

This is the ultimate showcase of what we may expect from HTML 5. Google and the community really experiment with HTML 5 and create thing you would never expect to be possible with HTML and Javasctipt only. Check it out it is awesome! I tried some of them in Firefox 3.5.2 and they worked fine too.

A Preview of HTML 5

This article is a great introduction to the new elements in HTML 5.

Yes, You Can Use HTML 5 Today!

A great beginning overview of HTML 5

HTML 5 Demos

A great set of  html 5 demos. Just view the source to see how they work.

HTML 5 Drag and Drop + Microformats = a whole world of possibilities

An example of how to use Drag-n-Drop in HTML 5

HTML 5 Gallery

See what’s possible with HTML 5

HTML 5 Forms Demo

A powerful demo of how forms work in HTML 5

Bespin

A Mozilla Labs experiment on how to build an extensible Web code editor using HTML 5 technology.

Headers in HTM 5

A good article from HTML 5 Doctor on the Header element. HTML 5 Doctor is a general resource on HTML 5.

How to get HTML5 working in IE and Firefox 2

Another great article from HTML 5 Doctor

Video elements

A useful article from HTML 5 Doctor on the Video element

Designing a blog with html5

A tutorial on how to build a blog in HTML 5

Semantics in HTML 5

An opinion piece from A List Apart

Thinking About HTML 5 canvas Accessibility

Some quick thoughts on accessibility problems with the Canvas element

HTML 5: nav ambiguity resolved

A post by Zeldman on the HTML 5 Nav element

A Selection of Supported Features in HTML5

A great list from Molly about which HTML 5 features are supported by which browsers

The WHATWG Blog

The Web Hypertext Application Technology Working Group – the folks working on the HTML 5 spec

HTML 5 canvas

A great in-depth tutorial on how the HTML 5 Canvas element works

Native Drag and Drop

A demo of how the Drag-n-Drop functionality works.

{ 10 comments… read them below or add one }

cheap custom jerseys May 19, 2011 at 9:29 am

Great HTML 5 Resources to Get You Started

Reply

Brett Widmann October 23, 2010 at 9:12 pm

Thanks for the great set of resources!

Reply

andbin October 16, 2010 at 11:39 am

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

Reply

daddy design February 4, 2010 at 5:54 am

great post! thanks!

Reply

neel September 17, 2009 at 5:16 pm

Nice article for a beginner to start learning the HTML. I like this post.. great work dude

Reply

Craig August 26, 2009 at 12:55 pm

Great article and thanks for sharing will be sure to share with others

Reply

Ray August 23, 2009 at 7:50 am

You can also look at “70 Must-Have CSS3 and HTML5 Tutorials and Resources”

http://www.webappers.com/2009/08/10/70-must-have-css3-and-html5-tutorials-and-resources/

Reply

BebopDesigner August 22, 2009 at 9:58 pm

This is really handy. Thanks a million… I’m sharing this. Cheers!

Reply

Matt August 22, 2009 at 6:59 pm

Great post, thanks for compiling all these resources.

Reply

Charlie August 22, 2009 at 12:25 pm

Thank you. There are some superb HTML 5 resources there… :)

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 25 trackbacks }

Previous post:

Next post:


Web Analytics