36 Resources to Learn HTML5 from the Beginning

HTML5 is buzzing in web design community and making an excitement, as the offered features open many possibilities in creating web pages and web apps.

However, HTML5 has many new tags and specifications compare to HTML4, which is often makes some people, particularly beginners, get confused and feel intimidated. So, in this post we try to collect the best sources where you can start learning HTML5 from the very beginning.

HTML5 Introduction

We will be starting from introduction to HTML5 and its features. It is always a good start to learn something new from the very basic subject.

A Preview of HTML5

In this article, Lachlan Hunt of a List Apart presented a brief introduction to some of the major features in HTML5.

HTML5 Features: What You Need to Know

Taken from the source; Remy Sharp talks you through the major changes in the latest version of HTML, and reveals what HTML5 features we’ll all be using very soon

A Brief History of HTML5

Jeffrey Way presented an in-depth history of HTML5. As what he said, in this article he will describe the important events that lead to what we now recognize as HTML5.

HTML5 in WikiPedia

There always be Wikipedia where you can find every information you need, as well as an introduction to HTML5.

Why We Should Using CSS3 and HTML5 Today.

Smashing Magazine editors explaining in and out, why we should adapt HTML5 starting today and breaking our fears to adapt this new (still in progress) technology.

Creating Web Pages with HTML5

After knowing what is HTML5 and what possibilities can be done through it, let’s do some practice making a simple web page using HTML5.

What is HTML? The Anatomy of HTML5 Document

Taken from the source, Joshua Johnson of DesignShack will explain all that stuff at the top of an HTML file and outline the basic structure that you’ll follow for creating your own HTML files.

Beginner’s Guide to: Building HTML5/CSS3 Webpages

Jake Rocheleau explaining how to build web pages using HTML5 for beginners as well as giving you some sources of free HTML5 templates.

Create a Typography Based Blog Layout in HTML5

In this tutorial, Chris Spooner will walk us through the entire process of creating a WordPress theme using HTML5 called Typo.

The following are some tutorials to make web page element more attractive.

The Content Editable Attribute.

We have been using various technologies to edit and store text within a web browser. Now  with the content editable attribute in HTML5, editing content through browser is much easier.

Cross Browser HTML5 Placeholder Text

We once used JavaScript trick to make placeholder in form input. Now, with placeholder tag in HTML5 things got easier. In this following tutorial Nickla of WebDesignerWall will show us how to create Cross-browser HTML5 placeholder text.

HTML5 Grayscale

Nickla & Darcy Clake of Themify presenting a short tutorial creating grayscale image using HTML5 canvas.

Look Into HTML5 Audio

One of the new tag that is introduced in HTML5 is audio tag. With the audio tag we can  insert audio very easily like never before. In HTML4, the way we insert an audio is by using embed tag or object tag which often have some problems and combined with some plugins (that is not sound easy, right?).

OK, let’s look into this tag deeper.

Native Audio in the Browser

This article from HTML5 doctor will explain in and out, how to implement audio tag in HTML document.

The State of HTML5 Audio

While, this article by Scott Schiller, discuss some annoyances in implementing multimedia including audio in HTML document.

Mastering the HTML Audio Property

In this tutorial, Jean-Baptiste of Cats who code, explain on how to implement audio tag in HTML document. This tutorial is very easy to follow.

HTML5 Audio

Also the best way to get to know current HTML standard is from W3Schoools.

Look Into HTML5 Video

Another new tag form HTML5 is video tag. This tag is also changed our way to insert video.

Some times ago, Adobe drop its support for Flash in mobile browsers. Well, maybe Steve Jobs and Apple was right, HTML5 is the way we use to play video online (in the future). Let’s take a look into this tag.

Building a custom HTML5 Video Player with CSS3 and jQuery

Opera Dev. also contributing a tutorial about HTML5. This article will show us on how to build custom HTML video player, start from the basic mark-up to themeing the video player. very useful.

How to Use HTML5 to Display Video in Modern Browsers

Taken from the source, This tutorial will take you through the steps to create a page in HTML 5 that will run video in all the modern browsers.

Getting Started with HTML5 Video

In this articles Richard Shepherd of thinkvitamins gives his reason why we should apply HTML5 video tag now, as well as giving you tips to use this tag the easy way.

HTML5 Basic

In this HTML5Rocks’s tutorial Ernest Delgado, Developer Relations at Google explain thoroughly about HTML5 video tag, from the introduction to make it live in your site.

HTML5 Video tag

And there always be W3Schools where we can should take a visit to check HTML standard, as well as HTML5 video tag.

Look Into HTML5 Canvas

Canvas is a distinctive feature in HTML5. With this element, we can draw a graphics and animations. Let’s take a look into this tag more:

Mozilla Developer Network: Canvas Tutorial

Mozilla Developer Network presenting canvas tutorial from the very basic usage.

How to Draw with HTML Canvas

Another useful at ThinkVitamin. This tutorial will show you how draw with HTML5 canvas tag from the very basic object.

HTML5 Canvas

Don’t forget, W3School also providing the fundamental description of HTML5. To me w3School is like the encyclopedia for web developers and web designers.

HTML5 Canvas the Basics

HTML5 Canvas basic tutorial from Opera Developer.

HTML5 Video Tutorial

Tired of reading?. Don’t worry, there are generous people in web design community that have created & shared their video tutorial about HTML5. Here are some of them:

Introduction to HTML 5

HTML5 Document Structure

Coding An HTML 5 Layout From Scratch

HTML5 Showcase

We have went through all the essential read. Now, it’s time to look at some awesome demos & experiment created with HTML5 that make you wowed.

360 Degree View

HTML5 Typography

HTML5 Dashboard

HTML5 Dashboard Demo

HTML5 Demo Studio

You can also find many experiments and demos of HTML5 over at Mozilla developers Demo Studio

HTML5 Presentation Slide

An alternative for you who often dealing with presentation slide. Now, you can create a more awesome slide with HTML5 and impress your audience.

Leave a Reply

We welcome for every constructive commment and respond. However, all comments will be moderated prior to publishing and rel=nofollow is in use. So, please do not use spammy ketword name


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