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.
A step-by-step guide for creating a website template, using HTML5 and CSS3.
Another nice how-to tutorial for creating website layout using HTML5 and CSS3.
HTML5 comes with many new form features. This tutorial shows you how to use them to make a beautiful form.
SmashingMagazine also writes a good tutorial for beginners to start with HTML5.
Perishable Press writes an awesome tutorial for HTML5 and CSS3 beginners. You can find the basic of HTML5 and CSS3 here, including code examples.
This article explains how browsers render HTML5 and gives a good solution for make all browsers render THML5 exactly as we want.
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.
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 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.
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.
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.
HTML5 Doctor publishes articles relating to HTML5 and it’s semantics and how to use them, here and now.
HTML5 Video Tutorials
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.
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 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.
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.
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.
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.
This website displays the browser support for HTML5 and CSS3 in intuitive tables.
“When can I use…” shows browsers capability with upcoming technologies (HTML5, CSS3). The page can be customized to show only certain browsers/features/versions.
A beautiful website that let you check browser support for HTML5 and CSS3 quickly.
This cheat sheet lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.
The beautiful visual cheat sheet, created by Woork, that helps you to find HTML5 tags and their usage quickly.
This is a nice and printable HTML5 reference.
If you need a complete reference of all HTML5 tags, their descriptions and usage, then this glossary is must-have for you.
Yes, this is the official reference created by W3C. This provides in depth information about HTML5.
This is a table that lists all HTML5 tags, descriptions. Good for quick reference.
You want a visual look of all input types in HTML5? Then that is what you need.
HTML5 Tools and Libraries
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.
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 is a simple wrapper plugin for Prototype, MooTools and jQuery to store data on browser side.
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 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.
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 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 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 is an HTML5 application framework for building responsive, desktop-caliber apps in any modern web browser, without plugins.
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.
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.
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.