New Scripts | HTML5 | Tutorials & Reference

The goal of this tutorial is to write a browser based "to-do list" application that works on the iPhone, Android and Palm Pre in six steps. The application should even work when the device has no network connection.

The gist of Offline Web Applications is to provide a manifest file that states which files should be downloaded for offline usage, which fallback certain files should have and other options. It is currently supported by Firefox 3.5+, Google Chrome and Safari.

HTML 5 provides a new caching feature to support offline web applications. Basically, you can specify in a specific file called the “cache manifest” the caching policy to apply to a particular web page. To activate the HTML 5 caching feature for a specific document, you only need to specify the URI of the cache manifest file in the manifest attribute of the element.

I’ll show you how to create an offline HTML5 iPhone application. More specifically, I’ll walk you through the process of building a Tetris game.

HTML 5 is introducing several new features to the web such as multi-threaded JavaScript, cross document messaging and local storage. In case you are looking for an overview of what HTML 5 promises, visit HTML 5. Today, we will look more closely at the offline application caching feature of HTML 5.

The nice thing about contentEditable is that it maintains original markup and is in effect live editing of text in the currently formatted text. So if unlike wwEditable which used a textbox to copy content and had to figure out what CSS attributes to copy to make the text look right and then handle markup conversion issues, the text you type into a contentEditable block is live HTML.

Firefox3 supports the “contentEditable” property. Setting this attribute to “true” allows you to make parts of a document editable. This attribute was already supported by IE6/7/8, Safari, Chrome and Opera. So now we can start using it in our applications.

The contentEditable property (and the similar document.designMode) are meant to enable WYSIWYG editing. One of the cool parts about contentEditable is that it can apply to specific elements.

The feature of the day is contentEditable, by which I mean client-side in-browser "rich text" editing. All major browsers support this now, including Firefox 3, Safari 3, Opera 9, Google Chrome, and Internet Explorer (since 5.5).

This project is an attempt to create a well maintained, informative and categorized cheat sheet to highlight HTML5 as well as other client side and related security issues and ways to avoid them. The project is meant to target web developers as well as security researchers and especially browser vendors since many of the problems we found are based on faulty or quirky implementations. Focus is on completeness, comprehensibility and timeliness as well as continuity - benefits many other related cheat sheets don't exactly provide.

One-page printable pocket book on some of HTML5's new tags and attributes.

This handy HTML 5 reference guide lists all tags supported in the HTML 5 specification. Tags, tag attributes and a listing of tags removed in HTML 5 (valid in HTML 4) are listed in a convenient cheatsheet format. This is the most complete, and up-to-date, HTML5 cheatsheet (reference) around. Features:

The mapping of HTML5 structural elements to id and class names for use with s

HTML 5 Visual Cheat Sheet is an useful cheat sheet for web designers and developers designed by me. This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

A handy printable HTML 5 Cheat Sheet that lists all currently supported tags, their descriptions, their attributes and their support in HTML 4.

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 element, we must also find a way to serve a Flash file to viewers who are utilizing those browsers.

The element is brand new in HTML 5 and allows you to, get this, play a movie in your website! The data of this element is supposed to be video but it might also have audio or images associated with it.

This is an old video put up by a Google Employee called Brad Neuberg as an educational Introduction to HTML5. This is for the people who don’t find time to keep up with HTML5 developments by reading up articles.

In this tutorial, I will start with a .mov file and encode that into what we need to serve our HTML5 video.

Tutorial from WebMonkey.com that explains how to embed audio and video in HTML5 pages. Currently, the only way to reliably embed video on a web page so that all users can see it regardless of browser or operating system, is with Flash. This requires the Adobe Flash plugin and a combination of the and tags.