facebook google plus twitter

Webucator's Free HTML5 Tutorial

Welcome to our free HTML5 tutorial. This tutorial is based on Webucator's HTML5 Training for Web Developers course.
Start Tutorial or choose from a lesson below
This lesson begins with a quick review of a basic HTML 4 page and then dives right in to HTML5 code. We're not going to spend time reviewing history or discussing the hows and whys here, but we'll come back to that later. First, we want to get you looking at some code.
In this lesson, we will discuss the differences between HTML 4 and HTML5 (aside from the space and the number).
In HTML 4, we use the <div> tag to separate HTML pages into parts. Sometimes those parts were structurally meaningful. For example, a page describing a course might include an overview, goals, prerequisites, and an outline. Each of those parts might be enclosed in a <div> tag with meaningful ids to provide meaningful structure to the page. However, <div> tags are also used to separate parts of a page for styling purposes, for example to create a column layout. In this case the areas encompassed in <div> tags might not be structurally different. Browsers cannot distinguish between structurally meaningful and meaningless divs, so they do not attribute any special significance to either kind. This lesson explains the purpose of and difference between <section> and <article> tags, how they differ from <div> tags and how they affect a page's "outline."
In this lesson, you will learn how to use the new HTML5 audio and video elements. As different browsers currently support different types of media, you will learn how to provide the necessary options to make your media work across browsers. You will also learn how to gracefully degrade your audio and video code.
The promise of HTML5 forms is great - richer, more meaningful, and backward-compatible forms that are consistent across browsers and include built-in client-side validation (read, no need for JavaScript for form validation). The current reality is that, while no browser (with the exception of iOS's Safari on iPhone) offers full support for all HTML5 form features, recent versions of all browsers do offer considerable implementation of new features. There are many things you can do now to take advantage of new features without causing any harm in the non-supporting browsers. So let's dig in and learn how to use the new HTML5 form features.
In this unit you will learn about local storage and session storage and the use cases for each. You will also learn about some other client-side storage methods, one defunct and one up and coming.
Canvas is one of the more talked-about new features of HTML5. It makes it possible to create drawings (e.g., for graphs or games) natively in the browser. If you know JavaScript, it is relatively easy to start using Canvas, which allows you to build intricate visual applications without the need of a plugin like Flash or Silverlight.
HTML5 includes a bunch of integrated and associated (e.g., not specifically part of HTML5) APIs. In this lesson, we'll look at the Offline Application API and the Drag and Drop API.