Comprehensive HTML5 Tutorials, Resources, Libraries

html5 Comprehensive HTML5 Tutorials, Resources, Libraries

HTML5 is being developed as the next major revision of HTML. HTML5 gives many functions and features to developers to create an interactive, well-structured website. Below are 50+ tutorials, resources, tools and libraries about HTML5 that can help you start using it immediately.

HTML5 Tutorials

Coding a CSS3 and HTML5 One-Page Website Template

A step-by-step guide for creating a website template, using HTML5 and CSS3.

html5 template Comprehensive HTML5 Tutorials, Resources, Libraries

Simple Website Layout Tutorial Using HTML 5 and CSS 3

Another nice how-to tutorial for creating website layout using HTML5 and CSS3.

Have a Field Day with HTML5 Forms

HTML5 comes with many new form features. This tutorial shows you how to use them to make a beautiful form.

Coding a HTML 5 Layout From Scratch

SmashingMagazine also writes a good tutorial for beginners to start with HTML5.

The Power of HTML5 and CSS3

Perishable Press writes an awesome tutorial for HTML5 and CSS3 beginners. You can find the basic of HTML5 and CSS3 here, including code examples.

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

This article explains how browsers render HTML5 and gives a good solution for make all browsers render THML5 exactly as we want.

CSS Code Structure for HTML 5: Some Useful Guidelines

In this post, Antonio Lupetti wants to illustrate some useful guidelines about how to implement a well organized CSS code structure in view of introduction of HTML 5 markup language.

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them.

HTML 5 canvas – the basics

The HTML 5 specification includes lots of new features, one of which is the canvas element. HTML 5 canvas gives you an easy and powerful way to draw graphics using JavaScript. For each canvas element you can use a “context” (think about a page in a drawing pad), into which you can issue JavaScript commands to draw anything you want. Browsers can implement multiple canvas contexts and the different APIs provide the drawing functionality. This article takes you through the basics of implementing a 2D canvas context, and using the basic canvas functions, including lines, shape primitives, images, text, and more. You are assumed to have mastered JavaScript basics already.

HTML5: The Basics

The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites. This article will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition.

Yes, You Can Use HTML 5 Today!

A great beginning overview of HTML 5.

Preparing for HTML5 with Semantic Class Names

This is a brief introduction to the new structural elements in the HTML 5, and how to use semantic class names in HTML 4.01 or XHTML 1.0 markup that correspond to the names of those structural elements. By doing so, you’ll get a head start in understanding how to use the new elements and also go some way towards using plain old semantic HTML if you’re not already.

HTML5 Tutorial

This is your one stop website for everything related to the new HTML 5 code. You will find many useful guides for HTML 5 resources including HTML 5 Tutorials, HTML 5 examples and HTML references.

HTML 5 Doctor, Helping You Implement HTML 5 Today

HTML5 Doctor publishes articles relating to HTML5 and it’s semantics and how to use them, here and now.

HTML5 Video Tutorials

Quick Tip: HTML5 Features you Should be Using Right Now

With all this talk about HTML5 not being complete until 2022, many people disregard it entirely – which is a big mistake. In fact, there are a handful of HTML5 features that we can use in all our projects right now! Simpler, cleaner code is always a good thing.

Introduction to HTML 5 Video

This is an educational “Introduction to HTML 5″ video that goes over many of the major aspects of this new standard and the video is choc full of demos and sample source code.

HTML5 + CSS3 = Awesome

HTML5 is the next version of the web markup standard. CSS3 is the next generation styling language. Together, they make will make the web a great experience.

Quick Tip: Learning About HTML5 Local Storage

This video quick tip is going to build a working, though very basic, to-do list in just a minute or two. Thanks to HTML5’s local storage, we can make advanced browsers “remember” what we type, even after the browser is closed or is refreshed.

Quick Tip: The HTML 5 Audio Element

As of Firefox 3.5, Chrome 3, Opera 10.5, and Safari 4, we can take advantage of many of the new HTML 5 features, including native audio support without the need for Flash. As you’ll find, we only to create the new
audio element, and set a few attributes. In this four minute video quick tip, we’ll review the mark-up, and also a quick way to play audio with jQuery.

Quick Tip: HTML5 Video with a Fallback to Flash

In this video quick tip, we’ll review how to work with HTML 5 video in your own projects. Because older browsers and Internet Explorer do not understand the video element, we must also find a way to serve a Flash file to viewers who are utilizing those browsers.

HTML5 Reference

Web Designers’ Browser Support Checklist

This website displays the browser support for HTML5 and CSS3 in intuitive tables.

html5 browser checklist Comprehensive HTML5 Tutorials, Resources, Libraries

Where can I use

“When can I use…” shows browsers capability with upcoming technologies (HTML5, CSS3). The page can be customized to show only certain browsers/features/versions.

HTML5 and CSS3 Readiness

A beautiful website that let you check browser support for HTML5 and CSS3 quickly.

HTML 5 Cheat Sheet

This cheat sheet lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.

HTML 5 Visual Cheat Sheet by Woork

The beautiful visual cheat sheet, created by Woork, that helps you to find HTML5 tags and their usage quickly.

HTML 5 Pocket Book

This is a nice and printable HTML5 reference.

HTML5 Doctor

If you need a complete reference of all HTML5 tags, their descriptions and usage, then this glossary is must-have for you.

W3C HTML5 Reference

Yes, this is the official reference created by W3C. This provides in depth information about HTML5.

HTML5 Reference

This is a table that lists all HTML5 tags, descriptions. Good for quick reference.

HTML5 input types

You want a visual look of all input types in HTML5? Then that is what you need.

HTML5 Tools and Libraries

Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

html5 modernizr Comprehensive HTML5 Tutorials, Resources, Libraries

Html5shiv

Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements, such as article, is to use the HTML5 shiv, remy sharp has quickly put together a mini script that enables all the new elements.

IE Print Protector

HTML5shiv is a great script and supports most of the HTML5 elements but missing one feature which is “printing HTML5 elements from IE”. There is now an alternative named IE Print Protector which helps IE to render HTML5 elements correctly, both on screen and in print. It simply replaces HTML5 elements with supported fallback elements (like div and span) when you print.

Jstorage

jStorage is a simple wrapper plugin for Prototype, MooTools and jQuery to store data on browser side.

Wadda

Wadda is a lightweight JavaScript library that uses HTML5 canvas for zooming images.

Less – HTML5-Powered CSS Framework

Less Framework is a lightweight CSS framework for building flexible multi-column website layouts. It contains an eight-column grid optimized for a line-height of 24px & a set of typography presets based on the golden ratio which is parallel to the grid’s vertical rhythm.

RGraph: HTML5 canvas graph library based on the HTML5 canvas tag

RGraph is a HTML5 canvas graph library. It uses features that became available in HTML5 (specifically, the CANVAS tag) to produce a wide variety of graph types: bar chart, bi-polar chart (also known as an age frequency chart), donut chart, funnel chart, gantt chart, horizontal bar chart, LED display, line graph, meter, odometer, pie chart, progress bar, pseudo radar chart, scatter graph and traditional radar chart.

Projekktor Zwei – HTML5 video player

Projekktor is an open source HTML5 video player that is built with pure JavaScript but uses Flash when there is no native H.264 support. The player supports playlists and can display the videos in full-screen. It has a control panel which appears on-hover and can be easily customized/themed by editing a single CSS file.

JAI – Javascript Audio Interface

J.A.I. or “Javascript Audio Interface” is the world’s first javascript interface for web audio. JAI uses no images for it’s player interface, all the graphics are rendered to a canvas element at run-time. The click-able play-list area is a list of links that are style using CSS. JAI is designed to provide juke-box functionality to audio enabled browsers that use the Ogg Vorbis audio codec.

CwVideo

CwVideo is a MooTools class that lets you easily handle HTML5 videos by providing access to various properties. It also extends MooTools Fx.Slider class enabling you to add your own volume slider and timeline related slider controls.

OSM Player

OSM Player is a highly customizable and open source HTML5 media player that is built with jQuery. It is designed to dynamically play almost any media, whether it be HTML5 video – Flash video – Audio, etc. For any non-standard media and browsers without HTML5 support, it can fallback to Flash.

SproutCore – HTML5 Framework

SproutCore is an HTML5 application framework for building responsive, desktop-caliber apps in any modern web browser, without plugins.

JsPlumb

jsPlumb is a jQuery plugin for visually connecting HTML elements on a web page. It uses a HTML5 canvas element when supported and Google’s ExplorerCanvas script to support older browsers.

More Resources

HTML5 Gallery

html5 gallery has two primary aims, the first is to showcase sites that use html5 for markup, so that we can see how people have interpreted the specification and how they’ve implemented it. This leads me on to the secondary aim which is to help people learn about html5 and how it should be used and how to implement it.

html5 gallery Comprehensive HTML5 Tutorials, Resources, Libraries

HTML 5 Demos and Examples

HTML 5 experimentation and demos that have been hacked together by Remy Sharp, that demonstrate the power of HTML5. Make sure you are using a browser that supports these features.

Dive Into HTML5

Dive Into HTML5 is an ongoing manual that seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards.

Further Reading

HTML5 and The Future of the Web

Steve Smith on HTML5 and CSS3

HTML 5 Webpage Structure

A Marriage Made in Heaven? HTML5 and CSS3

Semantics in HTML 5

Everything you need to know about HTML5

Leave a Reply