What is HTML 5?

HTML 5 is a new specification of HTML designed to follow HTML 4.01 and was created by designers who were not satisfied with the direction the W3C was taking HTML with the advent of XHTML 1.0. HTML 5 adds features to help web application developers and to improve the interoperability among web browsers and user agents.

There are lots of new features to HTML 5 including:

Tags to help with the structure of your pages like section, article, and aside.
New form tags to get more specific data in your forms
Multimedia tags to assist you in adding video and audio to your web pages.
Plus, some tags have been removed from the specification.

What is HTML 5
What’s New in HTML 5

How to Use HTML 5

HTML 5 Doctype
The first thing you should know about HTML 5 is how to tell browsers you’re using it. You do this by using the correct doctype:

<!doctype html>

Building an HTML 5 Page
Put the doctype as the first line in your HTML document. Then add the <html> tag and start the <head> of your document. Inside the head, you should indicate the title of your document and the character set:

<html> <head> <title>My First HTML 5 Document</title> <meta charset="UTF-8"> </head>

Write your HTML 5 document with the same tags as you would an HTML 4.01 document. Put your content in the <body> tag and close both the body tag and the html tag at the very bottom of the document.

Here is a sample HTML 5 document:

<!doctype html> <html> <head> <title>My First HTML 5 Document</title> <meta charset="UTF-8"> </head> <body> <p>Put your HTML 5 tags here</p> </body> </html>

New Tags in HTML 5
HTML 5 Tags Alphabetically
Use Dreamweaver CS5 to Write HTML 5
Using HTML 5 Layout Tags and Getting Browsers to Display Them

HTML 5 Browser Support

HTML 5 is currently a working draft at the W3C. Because it has not yet been approved as a formal specification, many web browser manufacturers either don’t support HTML 5 or only support some of the tags.

According to Deep Blue Sky and their tests of browsers that visit their site, Safari 4 has the widest support, missing only geolocation API support. Chrome has good support of HTML 5, except for geolocation API. This isn’t surprising as it’s based off of Webkit like Safari. Firefox 3.5 supports the audio tag, video tag, canvas, and even the geolocation API. Opera 10 only really supports the canvas tag reliably, but it doesn’t support audio or video. However it does have good support for web forms 2 and SVG support. And of course, Internet Explorer 8 doesn’t support HTML 5 at all.

HTML 5 Tutorials

HTML 5 has a lot of new features. And one way to learn them is with tutorials. Here are a few:

HTML 5 Canvas Tutorial
Introduction to HTML 5 Video
How to Add Sound with the AUDIO Element
HTML 5 localStorage() Tutorial
HTML 5 Drag and Drop Tutorial
How to Make an HTML5 iPhone App
Coding A HTML 5 Layout From Scratch
HTML 5 Forms
Structural Tags in HTML 5
How to Make All Browsers Render HTML5 Mark-up Correctly — Even IE6

HTML 5 and the W3C

The W3C has a working draft document of HTML 5. But it was originally started by the WHATWG group. They started the development of HTML 5, and continued it until the W3C took over.

HTML 5 Validators

Checking that your HTML 5 web page is correct is a lot easier when you can validate it. But there aren’t a lot of HTML 5 validators. Here are a couple:

But because there is a part of the specification that defines how a browser’s parser will treat the byte stream, this will allow us to know how any given browser will treat the HTML it is given. And this is regardless of how valid the HTML is.

HTML 5 Examples

Examples are a great way to learn HTML 5.

Basic HTML 5 Canvas Tag Examples
HTML 5 Video Example
HTML 5 2-column Layout Example

HTML 5 Websites

Here are a few sites that use HTML 5 or you can submit your own: